Skip to content

Instantly share code, notes, and snippets.

@philipwalton
Last active August 29, 2015 14:22
Show Gist options
  • Save philipwalton/ac1f6da62722021d5f4b to your computer and use it in GitHub Desktop.
Save philipwalton/ac1f6da62722021d5f4b to your computer and use it in GitHub Desktop.
CSS Polyfill Proposal

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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment