radium-stylify

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.

Usage with mocha --compilers

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