vkbansal / css-tagged-template-to-object

babel-plugin-transform-css-tagged-template-to-object

babel-plugin-transform-css-tagged-template-to-object

Babel Plugin to convert css tagged literals to javascript objects. Intended to be used with CSS-in-JS libraries like glamor.

It transpiles the following

export const $switch = css`
    display: inline-flex;
    vertical-align: middle;
    height: 34px;
    align-items: flex-end;
`;

into this

export const $switch = css({
    display: 'inline-flex',
    verticalAlign: 'middle',
    height: '34px',
    alignItems: 'flex-end'
});

Install

Use npm

npm install -S babel-plugin-transform-css-tagged-template-to-object

Add the following to your .babelrc or package.json. Whichever you prefer.

{
    "plugins": [
        "transform-css-tagged-template-to-object"
    ]
}