Repository files navigation

A lightweight wrapper on top ofcss-to-react-nativeto allow valid CSS to be turned into React Native Stylesheet objects.

To keep things simple it only transforms class selectors (e.g..myClass {}) and grouped class selectors (e.g..myClass, .myOtherClass {}). Parsing of more complex selectors can be added as a new feature behind a feature flag (e.g.transform(css, { parseAllSelectors: true })) in the future if needed.

Example:

.myClass {font-size:18px;line-height:24px;color: red;}.other {padding:1rem;}

is transformed to:

{myClass:{fontSize:18,lineHeight:24,color:"red"},other:{paddingBottom:16,paddingLeft:16,paddingRight:16,paddingTop:16}}

importtransformfrom"css-to-react-native-transform";// or const transform = require("css-to-react-native-transform").default;transform(`  .foo {    color: #f00;  }`);

↓ ↓ ↓ ↓ ↓ ↓

{  foo:{    color:"#f00";}}

transform(`  .foo {    color: red;  }  .bar {    font-size: 12px;  }`,{ignoreRule:(selector)=>{if(selector===".foo"){returntrue;}},},);

↓ ↓ ↓ ↓ ↓ ↓

{  bar:{    fontSize:12;}}

Parsing theCSS Modules (ICSS) :export is supported. The:export is often used to share variables from CSS or from a preprocessor like Sass/Less/Stylus to #"auto" data-snippet-clipboard-copy-content="transform(` .foo { color: #f00; } :export { myProp: #fff; }`);">

transform(`  .foo {    color: #f00;  }  :export {    myProp: #fff;  }`);

{  foo:{    color:"#f00";},  myProp:"#fff";}

CSS Media Queries (experimental)

transform(`  .container {    background-color: #f00;  }  @media (orientation: landscape) {    .container {      background-color: #00f;    }  }`,{parseMediaQueries:true},);

{__mediaQueries:{"@media (orientation: landscape)":[{expressions:[{feature:"orientation",modifier:undefined,value:"landscape",},],inverse:false,type:"all",}],},container:{backgroundColor:"#f00",},"@media (orientation: landscape)":{container:{backgroundColor:"#00f",},},}

transform(`  .container {    background-color: #f00;  }  @media android and (orientation: landscape) {    .container {      background-color: #00f;    }  }`,{parseMediaQueries:true},);

CSS Viewport Units (experimental)

transform(`.foo { font-size: 1vh; }`);

{__viewportUnits:true,foo:{fontSize:"1vh";}}

Limitations

Dependencies