css-to-react-native

What is css-to-react-native?

The css-to-react-native package allows developers to convert CSS text to a JavaScript object that matches the style format expected by React Native components. This is particularly useful for leveraging existing CSS code within React Native projects, enabling a more seamless integration of web styles into mobile development.

What are css-to-react-native's main functionalities?

Convert simple CSS strings

This feature allows the conversion of simple CSS strings into a format that can be directly used in React Native's style prop. The example demonstrates converting width and height properties from CSS to a React Native style object.

import { transform } from 'css-to-react-native';
const styles = transform('width: 100%; height: 100%;');

Support for shorthand properties

css-to-react-native can parse and split CSS shorthand properties into their respective longhand properties, making it easier to work with complex styling in React Native. The example shows how margin and padding shorthands are converted.

import { transform } from 'css-to-react-native';
const styles = transform('margin: 10px 20px; padding: 5px;');

Handling of custom properties

While React Native does not support CSS custom properties (variables) directly, css-to-react-native can process them when they are defined and used within the same CSS string. This feature is useful for maintaining consistency in color schemes or other values.

import { transform } from 'css-to-react-native';
const styles = transform('--custom-color: #333; color: var(--custom-color);');

Other packages similar to css-to-react-native

styled-components

styled-components is a library for React and React Native that allows developers to write traditional CSS in their JavaScript. It differs from css-to-react-native by enabling CSS to be part of component definitions, offering a more integrated styling experience with support for theming and dynamic styling.

react-native-extended-stylesheet

react-native-extended-stylesheet extends the basic stylesheet capabilities of React Native, adding features like themes, relative units, media queries, and more. While it offers more advanced styling options, it does not convert CSS strings directly but rather enhances the styling capabilities within React Native.

README

css-to-react-native

Converts CSS text to a React Native stylesheet object.

Try it here

font-size: 18px;
line-height: 24px;
color: red;

{
  fontSize: 18,
  lineHeight: 24,
  color: 'red',
}

Converts all number-like values to numbers, and string-like to strings.

Automatically converts indirect values to their React Native equivalents.

text-shadow-offset: 10px 5px;
font-variant: small-caps;
transform: translate(10px, 5px) scale(5);

{
  textShadowOffset: { width: 10, height: 5 },
  fontVariant: ['small-caps'],
  // Fixes backwards transform order
  transform: [
    { translateY: 5 },
    { translateX: 10 },
    { scale: 5 },
  ]
}

Also allows shorthand values.

font: bold 14px/16px "Helvetica";
margin: 5px 7px 2px;

{
  fontFamily: 'Helvetica',
  fontSize: 14,
  fontWeight: 'bold',
  fontStyle: 'normal',
  fontVariant: [],
  lineHeight: 16,
  marginTop: 5,
  marginRight: 7,
  marginBottom: 2,
  marginLeft: 7,
}

Shorthands will only accept values that are supported in React, so background will only accept a colour, backgroundColor

There is also support for the box-shadow shorthand, and this converts into shadow- properties. Note that these only work on iOS.

Shorthand Notes

border{Top,Right,Bottom,Left} shorthands are not supported, because borderStyle cannot be applied to individual border sides.

API

The API is mostly for implementors. However, the main API may be useful for non-implementors. The main API is an array of [property, value] tuples.

import transform from 'css-to-react-native';
// or const transform = require('css-to-react-native').default;

transform([
  ['font', 'bold 14px/16px "Helvetica"'],
  ['margin', '5px 7px 2px'],
  ['border-left-width', '5px'],
]); // => { fontFamily: 'Helvetica', ... }

We don't provide a way to get these style tuples in this library, so you'll need to do that yourself. I expect most people will use postCSS or another CSS parser. You should try avoid getting these with string.split, as that has a lot of edge cases (colons and semi-colons appearing in comments etc.)

For implementors, there is also a few extra APIs available.

These are for specific use-cases, and most people should just be using the API above.

import { getPropertyName, getStylesForProperty } from 'css-to-react-native';

getPropertyName('border-width'); // => 'borderWidth'
getStylesForProperty('borderWidth', '1px 0px 2px 0px'); // => { borderTopWidth: 1, ... }

Should you wish to opt-out of transforming certain shorthands, an array of property names in camelCase can be passed as a second argument to transform.

transform([['border-radius', '50px']], ['borderRadius']);
// { borderRadius: 50 } rather than { borderTopLeft: ... }

This can also be done by passing a third argument, false to getStylesForProperty.

License

Licensed under the MIT License, Copyright © 2019 Krister Kari, Jacob Parker, and Maximilian Stoiber.

See LICENSE.md for more information.