Philip Walton philipwalton

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.

	// host library code
	program()
	.initStuff()
	.then(function() {
	dispatcher.emit('beforeRenderPost')
	})
	.then(function() {
	dispatcher.emit('afterRenderPost')
	})
	.then(function() {

	{
	"total": 10459,
	"metric": "sessions",
	"viewId": "42124519",
	"dateRange": "Last 30 days",
	"generatedOn": "Sat Jun 21 2014 21:02:41 GMT-0700 (PDT)",
	"browsers": [
	{
	"name": "Chrome",
	"count": 6853,

	[16:54:43] COMMAND POST "/wd/hub/session"
	[16:54:43] DATA {"desiredCapabilities":{"javascriptEnabled":true,"locationContextEnabled":true,"handlesAlerts":true,"rotatable":true,"browserName":"chrome","loggingPrefs":{"browser":"ALL","driver":"ALL"},"requestOrigins":{"url":"http://webdriver.io","version":"4.6.2","name":"webdriverio"}}}
	[16:54:44] INFO SET SESSION ID e1f26aa1-9834-4891-b653-3d00282ef8a1
	[16:54:44] RESULT {"applicationCacheEnabled":false,"rotatable":false,"mobileEmulationEnabled":false,"networkConnectionEnabled":false,"chrome":{"chromedriverVersion":"2.24.417412 (ac882d3ce7c0d99292439bf3405780058fcca0a6)","userDataDir":"/var/folders/tn/jvvbl2tn0h52glcy9r49q2d00073gj/T/.org.chromium.Chromium.k1JYf7"},"takesHeapSnapshot":true,"pageLoadStrategy":"normal","databaseEnabled":false,"handlesAlerts":true,"hasTouchScreen":true,"version":"57.0.2987.133","platform":"MAC","browserConnectionEnabled":false,"nativeEvents":true,"acceptSslCerts":true,"webdriver.remote.sessionid":"e1f26aa1-9834-4891-b653-3d00

	// ==UserScript==
	// @name Time to Consistently Interactive Polyfill
	// @namespace http://developers.google.com/
	// @version 0.1
	// @description Polyfill to detect Time to Interactive
	// @author Deepanjan Roy
	// @include http://*
	// @include https://*
	// @run-at document-start
	// @noframes

	<!-- Load `web-vitals` using a module script. -->
	<script type="module">
	import {getCLS, getFID, getLCP} from 'https://unpkg.com/[email protected]/dist/web-vitals.es5.min.js?module';

	getCLS(console.log);
	getFID(console.log);
	getLCP(console.log);
	</script>