React Statics Styles
Ultra-light utility to help writing CSS inside your JS React components declarations.
Statically extracts CSS styles declared at the component class level and outputs a nicely formatted CSS string. It is then easing to pipe it to your CSS postprocessor of choice (eg. postcss
).
Best friends with gulp-react-statics-styles
to make it work with your building pipeline.
Usage (without gulp)
Declare styles
as a static
property of your component class (or using statics
if you use vanilla React.createClass
):
Component static styles = '.MyComponent .MyComponent-item': // you can put build-time calculations here fontSize: 08 * + 'px' ; { return <div className='MyComponent'> <div className='MyComponent-item'>This is smaller that usual</div> </div>; }; // alternate syntax using the decorator; @Component ...
Then pass one or more class definition(s) to extractStyles(class)
or extractAllStyles(array of class)
:
;; // returns a CSS string;
Assuming that readFontSizeFromConfig()
returns 10
, then the first line returns the string:
/* @react-nexus-style MyComponent */
The decorator form supports passing additional options.
The only currently supported option is prefix
, a static string which will be preprended to all the generated selectors.
@Component static displayName = 'ES6ClassDecoratorWithPrefix'; { return <div className='MyComponent' />; }
will yield
/* @react-statics-styles ES6ClassDecoratorWithPrefix */
Usage (with gulp)
See gulp-react-statics-styles
.
Installation
This module is written in ES6/7. You will need babel
to run it.