babel-plugin-transform-cssobj

Babel plugin to transform css into cssobj (CSS in JS solution), map class names into cssobj localized names

Usage

1. Install

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

2. In your .babelrc:

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

3. Write CSS as normal, Wrap JSX in result.mapClass()

   1const result = CSSOBJ`
   2
   3---
   4# YAML as config
   5plugins:
   6  - default-unit: px
   7  - flexbox
   8---
   9
   10// support inline comment in style
   11body { color: red; font-size:12; }
   12
   13.container {
   14  display: flex;
   15  height: ${ getWindowHeight() };
   16
   17  // nest selector
   18  .item {
   19    flex: 1; width: 100; height: ${ v=> v.prev ? v.prev + 1 : 200 };
   20    a {
   21      color: red;
   22      &:hover { color: blue; }
   23    }
   24  }
   25}
   26`
   27
   28const html = result.mapClass(
   29  <div class='container'>
   30    <div class='item'>
   31    <a class='!news item active'>link text</a></div></div>
   32)

   Which transform into below code:

   1import cssobj from 'cssobj';
   2import cssobj_plugin_default_unit from 'cssobj-plugin-default-unit';
   3import cssobj_plugin_flexbox from 'cssobj-plugin-flexbox';
   4const result = cssobj({
   5  body: {
   6    color: 'red',
   7    fontSize: 12
   8  },
   9  '.container': {
   10    display: 'flex',
   11    height: getWindowHeight(),
   12    '.item': {
   13      flex: 1,
   14      width: 100,
   15      height: v => v.prev ? v.prev + 1 : 200,
   16      a: {
   17        color: 'red',
   18        '&:hover': {
   19          color: 'blue'
   20        }
   21      }
   22    }
   23  }
   24}, {
   25  plugins: [cssobj_plugin_default_unit('px'), cssobj_plugin_flexbox()]
   26});
   27
   28const html = <div class={result.mapClass('container')}>
   29        <div class={result.mapClass('item')}>
   30        <a class={result.mapClass('!news item active')}>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:

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", {"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

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

1{
2  "plugins": [ ["transform-cssobj",
3  {
4  "mapName": "makeLocal",
5  "tag": "MYTAG",
6  "format": "less",
7  "names": {"cssobj": {"name": "_cssobj", "path": "./cssobj"}}
8  } ] ]
9}

TODO

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