How to use the css-to-react-native function in css-to-react-native

To help you get started, we’ve selected a few css-to-react-native examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github smartkarma / react-native-jumbo-html / src / utils / render-native.js View on Github external
// If a custom mapping is provided for the tag, use it
    // Otherwise use the one from default mapping
    customMappings && node.type in customMappings
      ? customMappings[node.type]
      : mappings[node.type];

  if (typeof Comp !== "function") {
    // Don't render a tag if it doesn't have a mapping
    return null;
  }

  let style;

  try {
    style = node.attrs.style
      ? css(
          // Generate a 2D array from the inline style string
          node.attrs.style
            // Split lines to 'property: value' pair and filter empty values
            .split(";")
            .filter(Boolean)
            // Split 'property: value' pair to an array
            .map(r => r.split(":").map(it => it.trim()))
        )
      : undefined;
  } catch (error) {
    // eslint-disable-next-line no-console
    console.warn(error);
  }

  // Extract the class names from the class attribute
  const classList = node.attrs.class
github styled-components / styled-components / src / models / InlineStyle.js View on Github external
if (!generated[hash]) {
        const root = parse(flatCSS)
        const declPairs = []
        root.each(node => {
          if (node.type === 'decl') {
            declPairs.push([node.prop, node.value])
          } else if (node.type !== 'comment') {
            /* eslint-disable no-console */
            console.warn(`Node of type ${node.type} not supported as an inline style`)
          }
        })
        // RN currently does not support differing values for the corner radii of Image
        // components (but does for View). It is almost impossible to tell whether we'll have
        // support, so we'll just disable multiple values here.
        // https://github.com/styled-components/css-to-react-native/issues/11
        const styleObject = transformDeclPairs(declPairs, [
          'borderRadius',
          'borderWidth',
          'borderColor',
          'borderStyle',
        ])
        const styles = styleSheet.create({
          generated: styleObject,
        })
        generated[hash] = styles.generated
      }
      return generated[hash]
    }
  }
github styled-components / styled-components / packages / styled-components / src / models / InlineStyle.js View on Github external
if (!generated[hash]) {
        const root = parse(flatCSS);
        const declPairs = [];
        root.each(node => {
          if (node.type === 'decl') {
            declPairs.push([node.prop, node.value]);
          } else if (process.env.NODE_ENV !== 'production' && node.type !== 'comment') {
            /* eslint-disable no-console */
            console.warn(`Node of type ${node.type} not supported as an inline style`);
          }
        });
        // RN currently does not support differing values for the corner radii of Image
        // components (but does for View). It is almost impossible to tell whether we'll have
        // support, so we'll just disable multiple values here.
        // https://github.com/styled-components/css-to-react-native/issues/11
        const styleObject = transformDeclPairs(declPairs, [
          'borderRadius',
          'borderWidth',
          'borderColor',
          'borderStyle',
        ]);
        const styles = styleSheet.create({
          generated: styleObject,
        });
        generated[hash] = styles.generated;
      }
      return generated[hash];
    }
  }
github kristerkari / css-to-react-native-transform / src / index.js View on Github external
!isLengthUnit &&
      !isViewportUnit &&
      !isPercent &&
      !isUnsupportedUnit
    ) {
      throw new Error(`Failed to parse declaration "${property}: ${value}"`);
    }

    if (!result.__viewportUnits && isViewportUnit) {
      result.__viewportUnits = true;
    }

    if (shorthandBorderProps.indexOf(property) > -1) {
      // transform single value shorthand border properties back to
      // shorthand form to support styling `Image`.
      const transformed = transformCSS([[property, value]]);
      const vals = values(transformed);
      if (allEqual(vals)) {
        const replacement = {};
        replacement[camelCase(property)] = vals[0];
        Object.assign(styles, replacement);
      } else {
        Object.assign(styles, transformed);
      }
    } else {
      Object.assign(styles, transformCSS([[property, value]]));
    }
  }
};
github emotion-js / emotion / packages / emotion-primitives / src / convertToRNStyles.js View on Github external
export function convertToRNStyles(styles) {
  if (styles[0][0] !== undefined) {
    let arr = []

    arr.push(styles[0][0])
    let len = styles.length
    let i = 1
    for (; i < len; i++) {
      arr.push(styles[i], styles[0][i])
    }

    let css = createStyles.apply(this, arr)
    let parsedCSS = convertStyles(css)

    // Convert css styles to react native
    let rnStyles = Array.isArray(parsedCSS) ? transform(parsedCSS) : {}
    return [StyleSheet.create({ style: rnStyles }).style]
  }

  return styles.map(style => {
    if (typeof style === 'object' && Object.keys(style).length > 0) {
      return StyleSheet.create({ style }).style
    }
    return style
  })
}
github kristerkari / css-to-react-native-transform / src / index.js View on Github external
}

    if (shorthandBorderProps.indexOf(property) > -1) {
      // transform single value shorthand border properties back to
      // shorthand form to support styling `Image`.
      const transformed = transformCSS([[property, value]]);
      const vals = values(transformed);
      if (allEqual(vals)) {
        const replacement = {};
        replacement[camelCase(property)] = vals[0];
        Object.assign(styles, replacement);
      } else {
        Object.assign(styles, transformed);
      }
    } else {
      Object.assign(styles, transformCSS([[property, value]]));
    }
  }
};
github emotion-js / emotion / packages / primitives-core / src / css.js View on Github external
function convertStyles(str: string) {
  if (str.trim() === '') return

  const stylePairs = []

  const parsedString = str.split(';')

  parsedString.forEach(convertPropertyValue, stylePairs)

  return transform(stylePairs)
}
github viewstools / morph / react-native / transform-styles.js View on Github external
export default obj => {
  const list = Object.keys(obj)
  const listWithProps = list.filter(k => hasCode(obj[k]))
  const listWithoutProps = list.filter(
    k => !hasCode(obj[k]) && isValid(k, obj[k])
  )

  const res = transform(
    listWithoutProps.map(k => [toSlugCase(k), getValue(k, obj[k])])
  )

  listWithProps.forEach(k => (res[k] = obj[k]))

  return res
}
github jacobp100 / cssta / runtime / cssUtil.ts View on Github external
export const transformStyleTuples = (
  styleTuples: StyleTuple[],
  appliedVariables?: Variables
): Style => {
  const transformedStyleTuples = styleTuples.map(([property, value]) => {
    let transformedValue = value;
    if (appliedVariables != null) {
      transformedValue = transformVariables(transformedValue, appliedVariables);
    }
    transformedValue = transformColors(transformedValue);
    transformedValue = transformCalc(transformedValue);
    return [property, transformedValue];
  });
  return cssToReactNative(transformedStyleTuples);
};

css-to-react-native

Convert CSS text to a React Native stylesheet object

MIT
Latest version published 2 years ago

Package Health Score

79 / 100
Full package analysis