babel-plugin-transform-cssobj-jsx

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 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 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 it

• 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, as a alias property of cssobj result

Notice: 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