Not ready for production
Babel macro to transform CSS tagged template literal to object
import { css, keyframes } from 'css-to-js.macro';
css`
color: red;
font-size: ${props.fontSize};
${props.isBlue && css`
color: blue;
`}
animation-name: ${keyframes`
from { opacity: 1; }
to { opacity: 0; }
`};
`
{
color: 'red',
fontSize: props.fontSize,
...(props.isBlue && { color: 'blue' }),
animationName: {
from: { opacity: 1 },
to: { opacity: 0 }
}
}
# Yarn
yarn add -D css-to-js.macro babel-plugin-macros
# npm
npm install -D css-to-js.macro babel-plugin-macros
{
"plugins": ["macros"]
}