🐠 Transforms CSS into beautifully formatted styles ready to use with a preprocessor
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

README.md

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
  height: 50px
  color: red

  .header
    position: sticky
    top: 24px