jss-codemorphs

jscodeshift transform for converting from CSS to JSS

Try it out!

Table of Contents

• JSCodeshift Transforms
  • css-to-jss
• Node.js API
  • convertCssToJss
  • convertCssToJssString

JSCodeshift Transforms

css-to-jss

Converts CSS to JSS. Accepts selectionStart and selectionEnd options if you only want to convert a subrange of a file.

Before

@keyframes alarm {
  from {
    color: red;
  }
  50% {
    color: initial;
  }
  to {
    color: red;
  }
}
.foo {
  color: green;
  & .bar-qux, & .glorm:after {
    color: red;
  }
  & .baz:after {
    content: 'whoo';
  }
}
.glorm {
  color: green;
  display: box;
  display: flex-box;
  display: flex;
}
.bar-qux {
  color: white;
  animation: alarm 1s linear infinite;
}
@media screen {
  a {
    text-decoration: none;
    .foo {
      color: brown;
    }
  }
  .foo {
    & .bar-qux {
      color: orange;
    }
  }
}

Command

jscodeshift -t path/to/jss-codemorphs/css-to-jss.js <file>

After

'@keyframes alarm': {
  from: {
    color: 'red',
  },
  '50%': {
    color: 'initial',
  },
  to: {
    color: 'red',
  },
},
foo: {
  color: 'green',
  '& $barQux, & $glorm:after': {
    color: 'red',
  },
  '& $baz:after': {
    content: '"whoo"',
  },
},
glorm: {
  color: 'green',
  display: 'flex',
  fallbacks: [
    {
      display: 'box',
    },
    {
      display: 'flex-box',
    },
  ],
},
barQux: {
  color: 'white',
  animation: '$alarm 1s linear infinite',
},
'@media screen': {
  $foo: {
    '& $barQux': {
      color: 'orange',
    },
  },
  '@global': {
    a: {
      textDecoration: 'none',
      '& $foo': {
        color: 'brown',
      },
    },
  },
},
baz: {},

Node.js API

convertCssToJss

import convertCssToJss from 'jss-codemorphs/convertCssToJss'

Converts CSS to JSS. Returns an array of JS ObjectProperty AST nodes representing the JSS. If you just want the string text, use convertCssToJssString.

Signature:

declare function convertCssToJss(rawCss: string): ObjectProperty[]

convertCssToJssString

import { convertCssToJssString } from 'jss-codemorphs/convertCssToJss'

Converts CSS to JSS. Returns the resulting JSS code as a string. You can pass recast.Options as the second argument to customize the code format. Uses { tabWidth: 2, useTabs: false, quote: 'single' } as default options.

Signature:

declare function convertCssToJssString(
  rawCss: string,
  options?: recast.Options
): string