Question about embedding the CSS parser into web pages and a suggestion

Hi folks. 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 PostCSS's 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.

But after reading the usage, I still could not find a way to embed PostCSS's CSS parser into my web page like how we usually embed jQuery. I'm confused and not even sure whether the parser is available publicly or not.

Can someone please shed some light on this? Thanks.

Besides, I also have a suggestions (if the parser is available publicly). The suggestion is about the re-usability of the parsed results.

Currently, a common problem of CSS polyfills is that each uses its own CSS parser. On my web page, when I include a CSS polyfill which implements an unsupported CSS feature, that polyfill loads and parses all style sheets it needs. And if I also include another CSS polyfill which implements another unsupported CSS feature, that polyfill also loads and parse all style sheets it needs....

As you can see, we don't have a popular library which do the loading and parsing jobs for us once and for all. Therefore every CSS polyfill has to do that for itself, and most likely loads and parses style sheets which have already been loaded and parsed by other CSS polyfills before. It's time-consuming and also increase server's burden.

So I hope PostCSS can make it so that polyfill authors can use/reuse parsed results done by PoseCSS's CSS parser. If a style sheet has already been loaded and parsed under the request of a CSS polyfill, other CSS polyfills can simply reuse that parsed result.

The embedding of the parser and CSS polyfills which rely on it can look like the following code, much like how jQuery and its plugins are embedded:

<script src="https://postcss.org/path/to/css-parser-1.0.0.min.js"></script>
<script src="js/css-polyfill-1-by-michael.js"></script>
<script src="js/css-polyfill-2-by-andrew.js"></script>
<script src="js/css-polyfill-3-by-william.js"></script>

P.S. That kind of embedding of polyfills is just for demonstrating the idea. In reality, they should be included in one plugins.js or main.js file instead.

And if the parser already loaded and parsed global.css and homepage.css under the request of css-polyfill-1-by-michael.js, other polyfills can reuse the parsed results if they need them. In other words, if css-polyfill-2-by-andrew.js needs global.css, homepage.css, and user-interface.css to be parsed, the parser would only need to load and parse user-interface.css because global.css and homepage.css have already been loaded and parsed before.

Just my two cents. I hope I explained it clearly. Thanks.

postcss / postcss.org

Question about embedding the CSS parser into web pages and a suggestion #248