babel-plugin-transform-cssobj-jsx v2.1.0
babel-plugin-transform-cssobj-jsx
Babel plugin to transform class names into cssobj localized names, easily transform existing code into cssobj.
Usage
Install
npm install --save-dev babel-plugin-transform-cssobj-jsx
In your
.babelrc
:{ "plugins": ["transform-cssobj-jsx"] }
Wrap your JSX in result.mapClass()
const style = cssobj(obj) const html = style.mapClass( <div className='container'> <div className={func()}> <p className='!news item active'> </p></div></div> )
Which transform into below code:
const html = ( <div className={style.mapClass('container')}> <div className={style.mapClass(func())}> <p className={style.mapClass('!news item active')}> </p></div></div> )
Note: According to cssobj
mapClass
rule, the!news
will becomenews
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 transform
myObj.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 itPass plugin option
mapName
to use other name rather thanmapClass
{ "plugins": [ ["transform-cssobj-jsx", {"mapName": "makeLocal"}] ] }
Then you can use
makeLocal
instead ofmapClass
, as a alias property of cssobj resultNotice:
makeLocal
must not exists in result object to avoid conflict// below will be transformed, using alias property style.makeLocal( <div className='nav'></div> ) // <div className={ style.mapClass('nav') }></div> // your existing code keep untouched myObj.mapClass( <div className='abc'> )
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 assigned
const makeLocal = style.mapClass
// will inject to className, shorter code
makeLocal( <div className='nav'></div> )
// <div className={ makeLocal('nav') }></div>
See, all the className have a shorter code, that reduced the bundle size and have better pref
TODO
- Support JSX Spread
- Child element should regard to parent cssobj scope