Using process css demo - tomhodgins/process-css-demo GitHub Wiki

Download process-css-demo, run npm install and optionally npm link, then use with node:

node index.js /path/to/stylesheet.css

The result will be JavaScript including all of the original styles, plus any runtimes necessary for supporting the custom extensions (if they're a CSS→JS transformation instead of a simple CSS→CSS transformation).

For example, compiling the test/base64-encode-function.css file will result in JavaScript output containing the preprocessed CSS. Adding the JavaScript generated by this to any page will apply all of the styles to that page, and the output is fully self-contained, including any runtimes or plugins required to make it work.

node index.js test/base64-encode-function.css

You can also optionally include JSON as an additional command:

node index.js <filename to read> <JSON data>

So if we had a stylesheet that used the variation-at-rule like this:

@--variation 1 {
  :root {
    background: red;
  }
}
@--variation "2" {
  :root {
    background: green;
  }
}
@--variation three {
  :root {
    background: blue;
  }
}
@--variation 'four' {
  :root {
    background: yellow;
  }
}
@--variation 2, four {
  body {
    color: purple;
  }
}

When building this with the following JSON-encoded data for {variation: 1}:

node index.js test/variation-at-rule.css '{"variation": 1}'

We would expect to see this rule included in the output:

:root {
  background: red;
}

But if run with the following command specifying the environment data included a variation equal to "three":

node index.js test/variation-at-rule.css '{"variation": "three"}'

We would instead see the @--variation at-rule that matches that value output instead:

:root {
  background: blue;
}

This is how information can be passed into the preprocessor for use inside plugins.