Search code examples
javascriptpostcss

How to embed the PostCSS's CSS parser into web pages?

I recently saw a demo page of a CSS polyfill which uses PostCSS's CSS parser to read and parse style sheets.

That demo page is here. It's the step 4 of a step-by-step tutorial. If you check the console, you can see that it logs an object containing all parsed CSS rules for showing the power of the CSS parser.

I'm trying to create a CSS polyfill. And I would like to use PostCSS's CSS parser to read and parse style sheets, too. Its CSS parser probably is the most up-to-date one and can correctly parse @supports at-rule.

But after reading the usage of PostCSS on GitHub, I still could not find a way to embed PostCSS's CSS parser into my web page like how we usually embed jQuery.

The npm command mentioned in the usage (such as the following line) is for development environment and isn't what I'm looking for.

postcss --use autoprefixer -c options.json -o main.css css/*.css

I'm confused and not even sure whether the parser is available publicly or not. Can someone please shed some light on this?

Solution

  • Any way you could try this. Make use of browserify and postcss-browserify plugin.

    links:

    http://browserify.org/.

    https://github.com/zoubin/browserify-postcss