trevorblades/transform-css

🐠 Transforms CSS into beautifully formatted styles ready to use with a preprocessor

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

transform-css's Issues

Fishsticss doesn't close media queries on css to scss convertion

Variables #fff and #ffffff on the same file and "url" not rendering correctly.

Hello! I am trying to send you a pull request but I don't have permissions.
I think I found a fix with simple regex changes!

Selector lost when block applies to two selectors with comma

Hey,

The following generates wrong nested Less:

.arg-header,
.social-header{
    padding: 40px 0 20px;
}


.arg-header h2,
.social-header h2{
    font-size: 28px;
}

.social-header {
  padding: 40px 0 20px;
  h2 {
    font-size: 28px;
  }
}

.arg-header should be preserved.