babel-plugin-css-to-js

0.0.4 • Public • Published

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 = props => css`
  font-size: ${props.fontSize}px;
  margin-top: ${props.margin ? '15px' : 0};
  color: red;
  line-height: 1.4;
  :hover {
    color: blue;
    fontSize: ${props.fontSize + 2}px;
  }
  @media (min-height: 300px) {
    background-color: gray;
    :hover {
      color: black;
    }
  }
`

After:

const rule = props => ({
  fontSize: props.fontSize + 'px',
  marginTop: props.margin ? '15px' : 0,
  color: 'red',
  lineHeight: 1.4,
  ':hover': {
    color: 'blue',
    fontSize: props.fontSize + 2 + 'px'
  },
  '@media (min-height: 300px)': {
    backgroundColor: 'gray',
    ':hover': {
      color: 'black'
    }
  }
})

.babelrc

{
  "plugins": [["css-to-js", {
    "plugins": ["autoprefixer"]
  }]]
}

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 0.0.4
    1
    • latest

Version History

  • Version
    Downloads (Last 7 Days)
    • Published
  • 0.0.4
    1
  • 0.0.3
    0
  • 0.0.2
    101
  • 0.0.1
    0

Package Sidebar

Install

npm i babel-plugin-css-to-js

Weekly Downloads

102

Version

0.0.4

License

MIT

Unpacked Size

7.85 kB

Total Files

7

Last publish

Collaborators

  • jakecoxon