TL;DR Mimic what Polyfill.js and Hitch.js were trying to do, but server-side.
Essentially, we create a JavaScript library (a post-processor of sorts) that accepts a CSS file and outputs a JavaScript file. The JS file would consist of:
- An AST of the original CSS
- Some JavaSript feature detects
- Some logic that knows how to turn the AST back into a stylesheet (based on the findings of the feature detects).
- The necessary plugins to polyfill the missing features (again, based on the findings of the feature detects).
All of this could be packaged as a command-line tool (similar to webpack or browserify), and it would output a single JS file that could do everything.
Here's an example of how the JavaScript file might be built prior to deploying (let's call the tool css-polyfill):
$ css-polyfill path/to/stylesheet.css \
-o public/stylesheet.js \
--plugins="plugin1,plugin2,plugin3"And here's what its usage would look like (notice no CSS file at all):
<html>
<head>
<title>CSS Polyfill Test</title>
<!-- A blocking script, similar to how CSS is today, to avoid FOUC. -->
<script src="/path/to/stylesheet.js"></script>
</head>
<body>
<!-- Main page stuff here... -->
</body>
</html>