Transform CSS

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
  height: 50px
  color: red
 
  .header
    position: sticky
    top: 24px