Nefariously Programmed Mecha

    jss-codemorphs
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.6 • Public • Published

    jss-codemorphs

    CircleCI Coverage Status semantic-release Commitizen friendly npm version

    jscodeshift transform for converting from CSS to JSS

    Try it out!

    Table of Contents

    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

    Install

    npm i jss-codemorphs

    DownloadsWeekly Downloads

    0

    Version

    1.2.6

    License

    MIT

    Unpacked Size

    585 kB

    Total Files

    19

    Last publish

    Collaborators

    • jedwards1211