Skip to content

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

License

Notifications You must be signed in to change notification settings

cssobj/babel-plugin-transform-cssobj

Repository files navigation

babel-plugin-transform-cssobj

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

Join the chat at https://gitter.im/css-in-js/cssobj Build Status Coverage Status npm

Usage

  1. Install
npm install --save-dev babel-plugin-transform-cssobj
  1. In your .babelrc:
{
  "plugins": ["transform-cssobj"]
}
  1. Write CSS as normal, Wrap JSX in result.mapClass()

    const result = CSSOBJ`
    
    ---
    # YAML as config
    plugins:
      - default-unit: px
      - flexbox
    ---
    
    // support inline comment in style
    body { color: red; font-size:12; }
    
    .container {
      display: flex;
      height: ${ getWindowHeight() };
    
      // nest selector
      .item {
        flex: 1; width: 100; height: ${ v=> v.prev ? v.prev + 1 : 200 };
        a {
          color: red;
          &:hover { color: blue; }
        }
      }
    }
    `
    
    const html = result.mapClass(
      <div class='container'>
        <div class='item'>
        <a class='!news item active'>link text</a></div></div>
    )

    Which transform into below code:

    import cssobj from 'cssobj';
    import cssobj_plugin_default_unit from 'cssobj-plugin-default-unit';
    import cssobj_plugin_flexbox from 'cssobj-plugin-flexbox';
    const result = cssobj({
      body: {
        color: 'red',
        fontSize: 12
      },
      '.container': {
        display: 'flex',
        height: getWindowHeight(),
        '.item': {
          flex: 1,
          width: 100,
          height: v => v.prev ? v.prev + 1 : 200,
          a: {
            color: 'red',
            '&:hover': {
              color: 'blue'
            }
          }
        }
      }
    }, {
      plugins: [cssobj_plugin_default_unit('px'), cssobj_plugin_flexbox()]
    });
    
    const html = <div class={result.mapClass('container')}>
            <div class={result.mapClass('item')}>
            <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:

// 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. 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

{
  "plugins": [ ["transform-cssobj", {"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

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

{
  "plugins": [ ["transform-cssobj",
  {
  "mapName": "makeLocal",
  "tag": "MYTAG",
  "format": "less",
  "names": {"cssobj": {"name": "_cssobj", "path": "./cssobj"}}
  } ] ]
}

TODO

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

About

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

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published