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"]
      }]]
    }
    

    Install

    npm i babel-plugin-css-to-js

    DownloadsWeekly Downloads

    286

    Version

    0.0.4

    License

    MIT

    Unpacked Size

    7.85 kB

    Total Files

    7

    Last publish

    Collaborators

    • avatar