babel-plugin-css-to-js
Babel plugin for converting CSS template literals into JavaScript object literals
Install
npm i babel-plugin-css-to-js --save-dev
Before:
const rule = css` font-size: px; margin-top: ; color: red; line-height: 1.4; :hover { color: blue; fontSize: px; } @media (min-height: 300px) { background-color: gray; :hover { color: black; } }`
After:
const rule = fontSize: propsfontSize + 'px' marginTop: propsmargin ? '15px' : 0 color: 'red' lineHeight: 14 ':hover': color: 'blue' fontSize: propsfontSize + 2 + 'px' '@media (min-height: 300px)': backgroundColor: 'gray' ':hover': color: 'black'
.babelrc
{
"plugins": [["css-to-js", {
"plugins": ["autoprefixer"]
}]]
}