Nefarious Plastic Mannequins

    transform-css

    1.0.7 • Public • Published

    Transform CSS

    Build Status

    This library transforms CSS into beautifully formatted styles ready to use with a preprocessor like LESS, SASS, or Stylus. Check out a working example here!

    Installation

    $ npm install transform-css

    Usage

    transformCss(css, options)

    Takes a string of CSS as input and returns a string of LESS/SASS. Descendant selectors, subclasses, and pseudo-classes will be nested where it makes sense. Sets of rules will be spaced out for increased readability. Pass options as a second argument to customize the format of the returned styles.

    import transformCss from 'transform-css';
     
    const css = `
      #id {
        width: 420px;
        color: green;
      }
     
      #id .child-class {
        overflow: hidden;
      }
     
      #id .child-class p {
        margin: 0 1em;
      }
     
      #id .child-class p:last-child {
        margin-bottom: 0;
      }
    `;
     
    transformCss(css);

    This will produce the following output:

    #id {
      width: 420px;
      color: green;
     
      .child-class {
        overflow: hidden;
     
        p {
          margin: 0 1em;
     
          &:last-child {
            margin-bottom: 0;
          }
        }
      }
    }

    Options

    spaces

    By default, two spaces will be used as indentation for the transformed styles. Use the spaces option to change this behaviour.

    Specify a number to control the number of spaces used, or false to use tabs.

    omitBracketsAndSemicolons

    By default, transform-css will produce code that follows LESS or SCSS syntax, which use brackets to separate selectors from rule declarations and semicolons to separate declarations from one another.

    #container {
      height: 50px;
      color: red;
     
      .header {
        position: sticky;
        top: 24px;
      }
    }

    On the other hand, SASS and Stylus use newlines and tabs to separate stylesheet elements from one another. Set the omitBracketsAndSemicolons option to true to use this syntax.

    transformCss(css, {omitBracketsAndSemicolons: true})

    Turns into...

    #container
      height50px
      colorred
     
      .header
        position: sticky
        top24px

    Install

    npm i transform-css

    DownloadsWeekly Downloads

    4

    Version

    1.0.7

    License

    MIT

    Unpacked Size

    19.9 kB

    Total Files

    7

    Last publish

    Collaborators

    • trevorblades