deku-css-modules
Mapping of class names to CSS modules in Deku components
CSS Modules
CSS Modules uses a module bundler such as webpack to load CSS scoped to a particular document.
CSS module loader will generate a unique name for a each CSS class at the time of loading the CSS document
CSS Modules with Deku looks like this:
/** @jsx element */;; let Table = { return <div class=stylestable> <div class=stylesrow> <div class=stylescell>A0</div> </div> </div>; }
Rendering the component will produce a markup similar to:
<div class="table__table___32osj"> <div class="table__row___2w27N"> <div class="table__cell___2w27N">A0</div> </div></div>
and a corresponding CSS file that matches those CSS classes... Awesome!
deku-css-modules
Similar to React CSS Modules, Deku CSS Modules automates loading of CSS Modules using the styleName
property.
Check out the deku-webpack-example
/** @jsx element */ ;;; const Table = { return <div styleName='table'> <div styleName='row'> <div styleName='cell'>A0</div> </div> </div> } Table styles;
Benefits of using deku-css-modules
:
- You are not forced to use
camelCase
naming convention. - You do not need to refer to the
styles
object every time you use a CSS Module. - There is clear distinction between global CSS
class
and CSS ModulesstyleName
Implementation
deku-css-modules
extends the render
method of the target component. It uses the value of styleName
to look for CSS Modules in the associated styles object and appends the matching unique CSS class names to each Element
s className
property value.
Usage
- Set up a module bundler to load the Interoperable CSS.
- Configure the render method of your component to use
deku-css-modules
Bundlers
webpack
- Install
style-loader
andcss-loader
- Use
extract-text-webpack-plugin
to aggregate the CSS into a single file - Setup your
/\.css$/
loader
Check out the example deku-webpack-example
Extending Component Styles
Use styles
property to overwrite the default component styles.
Explanation using Table
component:
/** @jsx element */;;; const Table = { return <div styleName='table'> <div styleName='row'> <div styleName='cell'>A0</div> </div> </div> } Table styles;
In this example, CSSModules
is used to decorate Table
component using ./table.css
CSS Modules. When Table
component is rendered, it will use the properties of the styles
object to construct className
values.
Using styles
property you can overwrite the default component styles
object, e.g.
; <Table styles=customStyles />;
Interoperable CSS can extend other ICSS. Use this feature to extend default styles, e.g.
/* table-custom-styles.css */ /* .cell { composes: cell from './table.css';} */
In this example, table-custom-styles.css
selectively extends table.css
(the default styles of Table
component).
Refer to the UsingStylesProperty
example for an example of a working implementation.
styles
Property
Decorated components inherit styles
property that describes the mapping between CSS modules and CSS classes.
const render = { <div> <p styleName='foo'></p> <p class=propsstylesfoo></p> </div>;}
In the above example, styleName='foo'
and class={this.props.styles.foo}
are equivalent.
Decorator
You need to decorate your component using deku-css-modules
, e.g.
/** @jsx element **/;;; const Table = { return <div styleName='table'> <div styleName='row'> <div styleName='cell'>A0</div> </div> </div> } Table styles;
Thats it!
As the name implies, deku-css-modules
is compatible with the ES7 decorators syntax:
/** @jsx element **/;;; @ { return <div styleName='table'> <div styleName='row'> <div styleName='cell'>A0</div> </div> </div> } { console }
Browserify
Refer to css-modulesify
.
Development
npm install
npm run build
npm test
npm start