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

1. Install

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

2. In your .babelrc:

{
  "plugins": ["transform-cssobj-jsx"]
}

3. 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 become news and not localized (aka keep AS IS).

This plugin only transform the format: result.mapClass(JSX)

But 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

1. Transform the method call as myObj['mapClass']

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

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

Then you can use makeLocal instead of mapClass

// below will be transformed
style.makeLocal(<div className='nav'></div>

// your existing code keep untouched
myObj.mapClass(<div className='abc'>)

• Support JSX Spread
• Child element should regard to parent cssobj scope