babel-plugin-transform-cssobj
Babel plugin to transform css into cssobj (CSS in JS solution), map class names into cssobj localized names
Usage
- Install
npm install --save-dev babel-plugin-transform-cssobj
- In your
.babelrc
:
-
Write CSS as normal, Wrap JSX in result.mapClass()
const result = CSSOBJ`---# YAML as configplugins:- default-unit: px- flexbox---// support inline comment in stylebody { color: red; font-size:12; }.container {display: flex;height: ;// nest selector.item {flex: 1; width: 100; height: ;a {color: red;&:hover { color: blue; }}}}`const html = resultWhich transform into below code:
;;;const result =;const html = <div class=result><div class=result><a class=result>link text</a></div></div>;
Note: According to cssobj mapClass
rule, the !news
will become news
and not localized (aka keep AS IS).
More Usage
This plugin transform the below formats:
-
result.mapClass(JSX)
-
result.mapName(JSX) (alias of result.mapClass)
-
mapName(JSX) (function reference of result.mapClass)
If your existing code already has the form, .e.g:
// existing code, you don't want below to transformmyObj.mapClass(<div className='abc'>should not be transformed</div>)
You have two way to escape the transform
-
Change the original method call as
myObj['mapClass']
, that way this plugin don't touch it -
Pass plugin option
mapName
to use other name rather thanmapClass
Then you can use makeLocal
instead of mapClass
, as a alias property of cssobj result
Notice: makeLocal
must not exists in result object to avoid conflict
// below will be transformed, using alias propertystyle// <div className={ style.mapClass('nav') }></div> // your existing code keep untouchedmyObj
More about mapName
If you discard the cssobj result part, then the mapName
is not alias, it's a real function
Notice: makeLocal
must exists in your scope, it will be kept as real function
// makeLocal is not alias, it's have to be assignedconst makeLocal = stylemapClass // will inject to className, shorter code// <div className={ makeLocal('nav') }></div>
See, all the className have a shorter code, that reduced the bundle size and have better pref
Option for import names
Normally the default import name of import cssobj from 'cssobj'
declear should be ok, but if the cssobj
have conflicts, pass below option in .babelrc
TODO
- Support JSX Spread
- Child element should regard to parent cssobj scope