A lightweight wrapper on top of css-to-react-native to allow valid CSS to be turned into React Native Stylesheet objects.
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
}
}import transform from "css-to-react-native-transform";
// or const transform = require("css-to-react-native-transform").default;
transform(`
.foo {
color: #f00;
}
`);↓ ↓ ↓ ↓ ↓ ↓
{
foo: {
color: "#f00";
}
}The API for CSS Media Queries might change in the future
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",
},
},
}- For
remunit the root elementfont-sizeis currently set to 16 pixels. A setting needs to be implemented to allow the user to define the root elementfont-size. - There is also support for the
box-shadowshorthand, and this converts intoshadow-properties. Note that these only work on iOS.