@vscodeshift/jss-codemorphs

Convert CSS to JSS Command

Example

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',
      },
    },
  },
},