Synopsis
Looks for either .rts
files or any other extension specified in the package.json browserify section (e.g. rt.css
) and converts the stylesheet found to JSON object for ReactJS to use for inline styling.
This package uses react-styling
to parse and transform the stylesheets. This transformer was written with Radium in mind - however can be used for any other ReactJS inline styling.
Code Example
{
"name" : "my-package",
"version" : "0.0.0",
...
"devDependencies" : {
...
"radium-stylify" : "*",
...
},
"browserify" : {
[
"radium-stylify",
{
"styleExtension" : [
".rt.css"
]
}
]
}
Motivation
Built to be able to access style sheets from react-templates
in an intuitive way. With radium-stylify
the following syntax is possible:
<rt-require dependency="./MyComponent.rt.css" as="Styles"/>
<div>
<ul>
<li style={[Styles.liStyles[this.props.kind], Styles.liStyles[this.props.modifier]]}>
Lorem ipsum
</li>
</ul>
</div>
With MyComponent.rt.css
being the following:
.liStyles {
.blue {
background-color : blue;
:hover {
background-color : white;
}
}
.large {
font-size : 20px;
},
.small {
font-size : 10px;
}
}
Installation
npm install radium-stylify --save-dev
Tests
Run npm test
. There are 2 tests which ensure that the minimum transformations required to work with Radium are working fine.
mocha --compilers
Usage with To pre-compile style sheets for your unit tests, you can use this library as follows in your npm test
package.json
definition:
"test" : "mocha --compilers css:./node_modules/radium-stylify/compiler"
Contributors
Applied ideas and structure from react-templatify
and based our implementation using react-styling
.
License
ISC