babel-plugin-transform-cssobj-jsx

Babel plugin to transform class names into cssobj localized names, easily transform existing code into cssobj.

Usage

1. Install

1npm install --save-dev babel-plugin-transform-cssobj-jsx

2. In your .babelrc:

1{
2  "plugins": ["transform-cssobj-jsx"]
3}

3. Wrap your JSX in result.mapClass()

   1const style = cssobj(obj)
   2
   3const html = style.mapClass(
   4  <div className='container'>
   5    <div className={func()}>
   6    <p className='!news item active'> </p></div></div>
   7)

   Which transform into below code:

   1const html = (
   2  <div className={style.mapClass('container')}>
   3    <div className={style.mapClass(func())}>
   4    <p className={style.mapClass('!news item active')}> </p></div></div>
   5)

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:

1// existing code, you don't want below to transform
2myObj.mapClass(<div className='abc'>should not be transformed</div>)

You have two way to escape the transform

1. Change the original method call as myObj['mapClass'], that way this plugin don't touch it

2. Pass plugin option mapName to use other name rather than mapClass

1{
2  "plugins": [ ["transform-cssobj-jsx", {"mapName": "makeLocal"}] ]
3}

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

1// below will be transformed, using alias property
2style.makeLocal( <div className='nav'></div> )
3// <div className={ style.mapClass('nav') }></div>
4
5// your existing code keep untouched
6myObj.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

1// makeLocal is not alias, it's have to be assigned
2const makeLocal = style.mapClass
3
4// will inject to className, shorter code
5makeLocal( <div className='nav'></div> )
6// <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