CSS Inlining #12

developit · 2018-04-03T02:53:40Z

This adds a new plugin (which I think could be released on its own, and I have a funny name for). It plugs into the output of html-webpack-plugin, finds inline & external stylesheets, inlines them, then trims out selectors & rules not used by the document.

In this app, the effect is a drop from 13kb to 1.2kb of critical CSS.

(note: currently targeted at app-skeleton branch)

Still to do:

If the stylesheet being inlined is external, replace the <link> tag with an async one (preload -> style).

/cc @surma

mathiasbynens · 2018-04-03T02:58:21Z

config/html-webpack-inline-critical-css-plugin.js

+
+function defineProperties(obj, properties) {
+  for (let i in properties) {
+    let value = properties[i];


Drive-by nit: why are these not const?

+1 we should only use let if the value is changed.

whoop, old habits die hard. I imagine there's a lint rule to remind me of this.

switch to const

add prefer-const to eslint config

mathiasbynens · 2018-04-03T02:58:54Z

config/html-webpack-inline-critical-css-plugin.js

+    return treeUtils.createElement(name, null, []);
+  },
+  createTextNode: function (text) {
+    let scratch = this.$$scratchElement;


mathiasbynens · 2018-04-03T02:59:11Z

config/html-webpack-inline-critical-css-plugin.js

+  createTextNode: function (text) {
+    let scratch = this.$$scratchElement;
+    treeUtils.insertText(scratch, text);
+    let node = scratch.lastChild;


…and throughout the rest of the file, really

all of em

jakearchibald · 2018-04-03T10:35:51Z

config/html-webpack-inline-critical-css-plugin.js

+          const filename = path.resolve(outputPath, href.replace(/^\//, ''));
+          let asset = compilation.assets[path.relative(outputPath, filename).replace(/^\.\//, '')];
+          let promise = asset ? Promise.resolve(asset.source()) : readFile(filename);
+          return promise.then(function (sheet) {


Would this be easier to read with async functions?

yup. I was avoiding the transpile step. that said, I would vastly prefer async here.

jakearchibald · 2018-04-03T10:43:59Z

What counts as 'not used' here? We're likely to have a little bit of JS in the page that accepts drag & dropped images, so there'll be a dynamically applied class name to react to that.

developit · 2018-04-03T12:49:24Z

@jakearchibald Might be worth adding an option to scan for strings that look like classnames in inline JS? Or even simpler, an option to force the existence of selector parts.

Right now this is "css required to style the static html".

jakearchibald · 2018-04-03T13:00:42Z

config/html-webpack-inline-critical-css-plugin.js

+    visit(ast, function (rule) {
+      if (rule.type==='rule') {
+        rule.selectors = rule.selectors.filter(function (sel) {
+          if (sel.match(/:(hover|focus|active)([.[#~&^:*]|\s|\n|$)/)) return false;


Does this mean :hover rules etc are always lost?

yes. I was waffling on them and I think I might remove this clause - hover and focus are valid states for a static HTML document.

Don't strip :hover, :focus or :active rules.

I thought this meant that they are always kept, but I am also not 100% sure. Comments please? 😄

comments

surma

This is interesting!

I’m not too familiar with WebPack plugins, so I am not entirely sure about everying (e.g. what is $match?), but a couple of style things and some nits.

Overall Qs:

Can we have more comments?
More ES6? Arrow functions, async/await etc?
Also more comments 😜

surma · 2018-04-03T13:10:17Z

config/html-webpack-inline-critical-css-plugin.js

+  treeAdapter: treeUtils
+};
+
+function defineProperties(obj, properties) {


Why are you polyfilling defineProperties?

Wasn't - most of the values are functions that get assigned as pure values, this made that a bit easier (rather than having to specific { value() {} } for each prototype method.

Oh I see. Comment please :D

surma · 2018-04-03T13:15:31Z

config/html-webpack-inline-critical-css-plugin.js

+      return this.tagName;
+    }
+  },
+  appendChild: function (child) {


I can haz appendChild(child) { /*...*/ } syntax?

Just looked and its Node 4+ so yes!

Out of curiosity — what is your baseline for build tooling like this? My gut feeling would be LTS, so Node 8.

Nvm, asked this in chat.

surma · 2018-04-03T13:17:02Z

config/html-webpack-inline-critical-css-plugin.js

+        const document = parse5.parse(htmlPluginData.html, PARSE5_OPTS);
+
+        defineProperties(document, DocumentExtensions);
+        document.documentElement = document.childNodes[document.childNodes.length - 1];


... Is that guaranteed to be correct?

Nope. I'll have it filter by tagName.

surma · 2018-04-03T13:18:09Z

config/html-webpack-inline-critical-css-plugin.js

+
+        Promise.all(externalSheets.map(function(link) {
+          const href = link.getAttribute('href');
+          if (href.match(/^(https?:)?\/\//)) return Promise.resolve();


This means that any stylesheet that is included via a full URL is ignored, right?

Yes. I might also add an attribute option to filter by, or make this filterable via a regex passed as an option. During build we don't know the intended document origin, so any full URL is assumed to be external.

Add regex stylesheet URL filter.

surma · 2018-04-03T13:19:47Z

config/html-webpack-inline-critical-css-plugin.js

+    this.options = options || {};
+  }
+
+  apply(compiler) {


Willing to make this async and use async/await?

surma · 2018-04-03T13:32:13Z

config/html-webpack-inline-critical-css-plugin.js

+
+    const before = sheet;
+
+    visit(ast, function (rule) {


The callback could be async as well

how come? it's a synchronous walk.

surma · 2018-04-03T13:34:16Z

config/html-webpack-inline-critical-css-plugin.js

+}
+
+
+function readFile(file) {


WDYT about:

const {promisify} = require('utils'); const fs = require('fs'); const readFile = promisify(fs.readFile);

yup, if we're doing 8+ that's all this does.

use util.promisify

surma · 2018-04-03T13:39:30Z

config/html-webpack-inline-critical-css-plugin.js

+  return rule.type !== 'comment';
+}
+
+function getElementsByTagName(tagName) {


I mean, it doesn’t really matter. But a recursive function could be easier to read:

function getElementsByTagName(tagName) { if (this.nodeType !== 1) return []; // Only elements are relevant tagName = tagName.toUpperCase(); return [ ...((this.tagName == tagName || tagName === '*') ? tagName : [])), // Add current element if it matches tag ...this.children.map(child => getElementByTagName.call(child, tagName)) // Check children recursively ]; }

easier to read but quite a bit slower. also the weird edge cases are to handle the fact that this dom doesn't normalize the case of tagName

Whoop, here I was spouting "facts" without testing. Recursion is much faster here:

I'll update with the ones from that bench.

Even if it wasn’t, I’d prefer the more readable/concise version (unless the difference is on the magnitude of seconds). It’s a build step after all.

Also we can probably safe the bind() and turn the element into a normal parameter, if that makes it more readable.

The bind is because this gets mixed into Element.prototype.

My benchmark was flawed, stack is around 5x faster, or 2x faster than an optimized recursive version:

(same url: https://esbench.com/bench/5ac3b647f2949800a0f619e1)

surma · 2018-04-03T13:40:07Z

config/html-webpack-inline-critical-css-plugin.js

+  }
+}
+
+const ElementExtensions = {


surma · 2018-04-03T13:40:10Z

config/html-webpack-inline-critical-css-plugin.js

+  getElementsByTagName: getElementsByTagName
+};
+
+const DocumentExtensions = {


surma · 2018-04-03T13:43:59Z

Oh and I forgot: Can we have some tests infra for this? I’d love to use this, but I’d like to be able to test (esp. if you wanna go ahead and publish this and we start running into corner cases).

mathiasbynens · 2018-04-03T13:59:48Z

config/html-webpack-inline-critical-css-plugin.js

+        const externalSheets = document.querySelectorAll('link[rel="stylesheet"]');
+
+        Promise.all(externalSheets.map(function(link) {
+          const href = link.getAttribute('href');


Use link.href to always get a normalized URL string (even when the attribute value is a relative URL, for example).

nah, this DOM (parse5) is extremely rudimentary and only supports attributes.

Ooh, gotcha. Fingers crossed dealing with raw attribute values doesn’t break anything, I guess!

- Format output using pretty-bytes - Insert inlined style tags immediately after their source link tags - Add option to turn off external stylesheet processing - Add `async` option that converts critical'd external sheets to `<link rel="preload" as="style" onload="this.rel='stylesheet'">`

surma · 2018-04-03T16:29:35Z

I’m gonna wait with my 2nd review until you push the async/await :)

…o `true`)

…e're a proper Document.

surma

A+ on the comments and restructure. Really nice to follow now.

I’d prefer some more async/await to make the code more serial, but that’s not a hard blocker from my end.

surma · 2018-04-04T11:12:29Z

config/critters-webpack-plugin.js

+          ));
+        }
+
+        externalStylesProcessed


async/await?

surma · 2018-04-04T11:15:26Z

config/critters-webpack-plugin.js

+function makeDomInteractive(document) {
+  defineProperties(document, DocumentExtensions);
+  // Find the first <html> element within the document
+  document.documentElement = document.childNodes.filter( child => String(child.tagName).toLowerCase()==='html' )[0];


Have you linted this file with semistandard? The spaces look suspicious here

I'll switch over - right now it is using my fork but needn't be.

surma · 2018-04-04T11:19:20Z

config/critters-webpack-plugin.js

+
+    // wait for a disk read if we had to go to disk
+    const promise = asset ? Promise.resolve(asset.source()) : readFile(filename, 'utf8');
+    return promise.then(sheet => {


async/await?

surma · 2018-04-04T11:21:00Z

config/critters-webpack-plugin.js

+      if (this.options.async) {
+        link.setAttribute('rel', 'preload');
+        link.setAttribute('as', 'style');
+        link.setAttribute('onload', "this.rel='stylesheet'");


What does this onload handler do o_O

swaps the preload to a stylesheet once it's loaded:
https://www.filamentgroup.com/lab/async-css.html

surma · 2018-04-04T11:23:01Z

config/critters-webpack-plugin.js

+
+    sheet = css.stringify(ast, { compress: this.options.compress!==false });
+
+    return done.then(() => {


async/await? 😬

surma · 2018-04-04T12:02:33Z

Wait... did I just put “async/await?” everywhere and you are still working on that? Apologies if that’s the case. I thought you pushed a commit. Sorryyy

developit · 2018-04-05T13:44:21Z

lol still workin on it. will be up in a jiffy - my day got torched yesterday.

…nd a <link rel="stylesheet"> to the end of body.

…ning CSS Inlining

# This is the 1st commit message: Add position reset button and update zoom interaction. (GoogleChromeLabs#292) (GoogleChromeLabs#345) # The commit message GoogleChromeLabs#2 will be skipped: # 1.2.3 # The commit message GoogleChromeLabs#3 will be skipped: # Prevent both sides sharing a download URL. (GoogleChromeLabs#369) # # The commit message GoogleChromeLabs#4 will be skipped: # Add basic history handling (GoogleChromeLabs#288) (GoogleChromeLabs#309) # # * Add basic history handling (GoogleChromeLabs#288) # # * Move history management to Compress component # # * Remove unused pathname property from history # # * Rename history listener functions # # * Use history.back instead of history.replace # # * Support going forward in history. Persist last selected file in runtime # # * Add netlify redirects file # # * Use 301 status code for redirect # # * Cleanup _redirects file # # * Use 200 status code for redirects # # * Simplify onPopState function # # * Always redirect to 301 with url rewrite # # * Remove redundant history function # # * Remove file check on render. Call openEditor synchronously # # * Use pushState only if user is on the initial screen. Mount history listener in constructor # # * Simplify openEditor condition # # * Update early return condition # # * Rolling abstractions back into the main component # The commit message GoogleChromeLabs#5 will be skipped: # 1.3.0 # The commit message GoogleChromeLabs#6 will be skipped: # Add renovate.json # The commit message GoogleChromeLabs#7 will be skipped: # Merge pull request GoogleChromeLabs#373 from GoogleChromeLabs/renovate/configure # # Configure Renovate # The commit message GoogleChromeLabs#8 will be skipped: # Pin dependencies # The commit message GoogleChromeLabs#9 will be skipped: # Merge pull request GoogleChromeLabs#374 from GoogleChromeLabs/renovate/pin-dependencies # # Pin dependencies # The commit message GoogleChromeLabs#10 will be skipped: # Update dependency mini-css-extract-plugin to v0.5.0 # The commit message GoogleChromeLabs#11 will be skipped: # Merge pull request GoogleChromeLabs#380 from GoogleChromeLabs/renovate/mini-css-extract-plugin-0.x # # Update dependency mini-css-extract-plugin to v0.5.0 # The commit message GoogleChromeLabs#12 will be skipped: # Update dependency @types/node to v10.12.14 # The commit message GoogleChromeLabs#13 will be skipped: # Merge pull request GoogleChromeLabs#376 from GoogleChromeLabs/renovate/node-10.x # # Update dependency @types/node to v10.12.14 # The commit message GoogleChromeLabs#14 will be skipped: # Update dependency @types/node to v10.12.15 # The commit message GoogleChromeLabs#15 will be skipped: # Merge pull request GoogleChromeLabs#384 from GoogleChromeLabs/renovate/node-10.x # # Update dependency @types/node to v10.12.15 # The commit message GoogleChromeLabs#16 will be skipped: # Update dependency comlink to v3.1.1 # The commit message GoogleChromeLabs#17 will be skipped: # Merge pull request GoogleChromeLabs#377 from GoogleChromeLabs/renovate/comlink-3.x # # Update dependency comlink to v3.1.1 # The commit message GoogleChromeLabs#18 will be skipped: # Update dependency @types/webassembly-js-api to v0.0.2 # The commit message GoogleChromeLabs#19 will be skipped: # Merge pull request GoogleChromeLabs#375 from GoogleChromeLabs/renovate/webassembly-js-api-0.x # # Update dependency @types/webassembly-js-api to v0.0.2 # The commit message GoogleChromeLabs#20 will be skipped: # Update dependency critters-webpack-plugin to v2.1.1 # The commit message GoogleChromeLabs#21 will be skipped: # Merge pull request GoogleChromeLabs#378 from GoogleChromeLabs/renovate/critters-webpack-plugin-2.x # # Update dependency critters-webpack-plugin to v2.1.1 # The commit message GoogleChromeLabs#22 will be skipped: # Update dependency husky to v1.2.1 # The commit message GoogleChromeLabs#23 will be skipped: # Merge pull request GoogleChromeLabs#379 from GoogleChromeLabs/renovate/husky-1.x # # Update dependency husky to v1.2.1 # The commit message GoogleChromeLabs#24 will be skipped: # Update dependency preact to v8.4.2 # The commit message GoogleChromeLabs#25 will be skipped: # Merge pull request GoogleChromeLabs#381 from GoogleChromeLabs/renovate/preact-8.x # # Update dependency preact to v8.4.2 # The commit message GoogleChromeLabs#26 will be skipped: # Update dependency ts-loader to v5.3.1 # The commit message GoogleChromeLabs#27 will be skipped: # Merge pull request GoogleChromeLabs#382 from GoogleChromeLabs/renovate/ts-loader-5.x # # Update dependency ts-loader to v5.3.1 # The commit message GoogleChromeLabs#28 will be skipped: # Update dependency tslint-config-airbnb to v5.11.1 # The commit message GoogleChromeLabs#29 will be skipped: # Merge pull request GoogleChromeLabs#383 from GoogleChromeLabs/renovate/tslint-config-airbnb-5.x # # Update dependency tslint-config-airbnb to v5.11.1 # The commit message GoogleChromeLabs#30 will be skipped: # Update dependency webpack to v4.27.1 # The commit message GoogleChromeLabs#31 will be skipped: # Merge pull request GoogleChromeLabs#386 from GoogleChromeLabs/renovate/webpack-4.x # # Update dependency webpack to v4.27.1 # The commit message GoogleChromeLabs#32 will be skipped: # Update dependency raw-loader to v1 # The commit message GoogleChromeLabs#33 will be skipped: # Merge pull request GoogleChromeLabs#388 from GoogleChromeLabs/renovate/raw-loader-1.x # # Update dependency raw-loader to v1 # The commit message GoogleChromeLabs#34 will be skipped: # Update dependency worker-plugin to v3 # The commit message GoogleChromeLabs#35 will be skipped: # Merge pull request GoogleChromeLabs#390 from GoogleChromeLabs/renovate/worker-plugin-3.x # # Update dependency worker-plugin to v3 # The commit message GoogleChromeLabs#36 will be skipped: # Fixing sharp & preprocess settings # The commit message GoogleChromeLabs#37 will be skipped: # Using use_argb conditionally # The commit message GoogleChromeLabs#38 will be skipped: # Merge pull request GoogleChromeLabs#393 from GoogleChromeLabs/webp-sharp-fix # # Fixing sharp & preprocess settings. Fixes GoogleChromeLabs#392. # The commit message GoogleChromeLabs#39 will be skipped: # Debouncing input. Fixes GoogleChromeLabs#277 (GoogleChromeLabs#394) # # * Debouncing input # # * Clarifying comment # # * More comments and clarifications # The commit message GoogleChromeLabs#40 will be skipped: # Update dependency typescript to v3.2.2 # The commit message GoogleChromeLabs#41 will be skipped: # Fix typings for TypeScript v3.2 # The commit message GoogleChromeLabs#42 will be skipped: # Merge pull request GoogleChromeLabs#385 from GoogleChromeLabs/renovate/typescript-3.x # # Update dependency typescript to v3.2.2 # The commit message GoogleChromeLabs#43 will be skipped: # Preventing zoom in iOS Safari. (GoogleChromeLabs#395) # # The commit message GoogleChromeLabs#44 will be skipped: # Update README.md # # closes GoogleChromeLabs#367 # updating incorrect URL # The commit message GoogleChromeLabs#45 will be skipped: # Merge pull request GoogleChromeLabs#396 from GoogleChromeLabs/kosamari-patch-2 # # Update README.md for OptiPNG # The commit message GoogleChromeLabs#46 will be skipped: # 1.3.1 # The commit message GoogleChromeLabs#47 will be skipped: # Update dependency tslint to v5.12.0 # The commit message GoogleChromeLabs#48 will be skipped: # Merge pull request GoogleChromeLabs#398 from GoogleChromeLabs/renovate/tslint-5.x # # Update dependency tslint to v5.12.0 # The commit message GoogleChromeLabs#49 will be skipped: # Update dependency husky to v1.3.0 # The commit message GoogleChromeLabs#50 will be skipped: # Merge pull request GoogleChromeLabs#399 from GoogleChromeLabs/renovate/husky-1.x # # Update dependency husky to v1.3.0 # The commit message GoogleChromeLabs#51 will be skipped: # Update dependency @types/node to v10.12.17 # The commit message GoogleChromeLabs#52 will be skipped: # Merge pull request GoogleChromeLabs#400 from GoogleChromeLabs/renovate/node-10.x # # Update dependency @types/node to v10.12.17 # The commit message GoogleChromeLabs#53 will be skipped: # Update dependency webpack to v4.28.0 # The commit message GoogleChromeLabs#54 will be skipped: # Merge pull request GoogleChromeLabs#402 from GoogleChromeLabs/renovate/webpack-4.x # # Update dependency webpack to v4.28.0 # The commit message GoogleChromeLabs#55 will be skipped: # Update dependency @types/node to v10.12.18 # The commit message GoogleChromeLabs#56 will be skipped: # Merge pull request GoogleChromeLabs#403 from GoogleChromeLabs/renovate/node-10.x # # Update dependency @types/node to v10.12.18 # The commit message GoogleChromeLabs#57 will be skipped: # Update dependency file-loader to v3 # The commit message GoogleChromeLabs#58 will be skipped: # Merge pull request GoogleChromeLabs#404 from GoogleChromeLabs/renovate/file-loader-3.x # # Update dependency file-loader to v3 # The commit message GoogleChromeLabs#59 will be skipped: # Update dependency ts-loader to v5.3.2 # The commit message GoogleChromeLabs#60 will be skipped: # Merge pull request GoogleChromeLabs#406 from GoogleChromeLabs/renovate/ts-loader-5.x # # Update dependency ts-loader to v5.3.2 # The commit message GoogleChromeLabs#61 will be skipped: # Update dependency webpack-dev-server to v3.1.11 # The commit message GoogleChromeLabs#62 will be skipped: # Merge pull request GoogleChromeLabs#407 from GoogleChromeLabs/renovate/webpack-dev-server-3.x # # Update dependency webpack-dev-server to v3.1.11 # The commit message GoogleChromeLabs#63 will be skipped: # Update dependency webpack-dev-server to v3.1.12 # The commit message GoogleChromeLabs#64 will be skipped: # Merge pull request GoogleChromeLabs#408 from GoogleChromeLabs/renovate/webpack-dev-server-3.x # # Update dependency webpack-dev-server to v3.1.12 # The commit message GoogleChromeLabs#65 will be skipped: # Update dependency terser-webpack-plugin to v1.2.0 # The commit message GoogleChromeLabs#66 will be skipped: # Merge pull request GoogleChromeLabs#409 from GoogleChromeLabs/renovate/terser-webpack-plugin-1.x # # Update dependency terser-webpack-plugin to v1.2.0 # The commit message GoogleChromeLabs#67 will be skipped: # Update dependency webpack-dev-server to v3.1.13 # The commit message GoogleChromeLabs#68 will be skipped: # Merge pull request GoogleChromeLabs#410 from GoogleChromeLabs/renovate/webpack-dev-server-3.x # # Update dependency webpack-dev-server to v3.1.13 # The commit message GoogleChromeLabs#69 will be skipped: # Update dependency webpack-dev-server to v3.1.14 # The commit message GoogleChromeLabs#70 will be skipped: # Merge pull request GoogleChromeLabs#411 from GoogleChromeLabs/renovate/webpack-dev-server-3.x # # Update dependency webpack-dev-server to v3.1.14 # The commit message GoogleChromeLabs#71 will be skipped: # Update dependency loader-utils to v1.2.0 # The commit message GoogleChromeLabs#72 will be skipped: # Merge pull request GoogleChromeLabs#412 from GoogleChromeLabs/renovate/loader-utils-1.x # # Update dependency loader-utils to v1.2.0 # The commit message GoogleChromeLabs#73 will be skipped: # Update dependency terser-webpack-plugin to v1.2.1 # The commit message GoogleChromeLabs#74 will be skipped: # Merge pull request GoogleChromeLabs#414 from GoogleChromeLabs/renovate/terser-webpack-plugin-1.x # # Update dependency terser-webpack-plugin to v1.2.1 # The commit message GoogleChromeLabs#75 will be skipped: # Update dependency husky to v1.3.1 # The commit message GoogleChromeLabs#76 will be skipped: # Merge pull request GoogleChromeLabs#418 from GoogleChromeLabs/renovate/husky-1.x # # Update dependency husky to v1.3.1 # The commit message GoogleChromeLabs#77 will be skipped: # Update dependency webpack-cli to v3.2.0 # The commit message GoogleChromeLabs#78 will be skipped: # Merge pull request GoogleChromeLabs#421 from GoogleChromeLabs/renovate/webpack-cli-3.x # # Update dependency webpack-cli to v3.2.0 # The commit message GoogleChromeLabs#79 will be skipped: # Update dependency @webpack-cli/serve to v0.1.3 # The commit message GoogleChromeLabs#80 will be skipped: # Merge pull request GoogleChromeLabs#420 from GoogleChromeLabs/renovate/webpack-cli-serve-0.x # # Update dependency @webpack-cli/serve to v0.1.3 # The commit message GoogleChromeLabs#81 will be skipped: # Update dependency critters-webpack-plugin to v2.1.2 # The commit message GoogleChromeLabs#82 will be skipped: # Merge pull request GoogleChromeLabs#415 from GoogleChromeLabs/renovate/critters-webpack-plugin-2.x # # Update dependency critters-webpack-plugin to v2.1.2 # The commit message GoogleChromeLabs#83 will be skipped: # Update dependency ts-loader to v5.3.3 # The commit message GoogleChromeLabs#84 will be skipped: # Merge pull request GoogleChromeLabs#423 from GoogleChromeLabs/renovate/ts-loader-5.x # # Update dependency ts-loader to v5.3.3 # The commit message GoogleChromeLabs#85 will be skipped: # Update dependency critters-webpack-plugin to v2.1.3 # The commit message GoogleChromeLabs#86 will be skipped: # Merge pull request GoogleChromeLabs#422 from GoogleChromeLabs/renovate/critters-webpack-plugin-2.x # # Update dependency critters-webpack-plugin to v2.1.3 # The commit message GoogleChromeLabs#87 will be skipped: # Update dependency webpack-cli to v3.2.1 # The commit message GoogleChromeLabs#88 will be skipped: # Merge pull request GoogleChromeLabs#424 from GoogleChromeLabs/renovate/webpack-cli-3.x # # Update dependency webpack-cli to v3.2.1 # The commit message GoogleChromeLabs#89 will be skipped: # Update dependency tslint to v5.12.1 # The commit message GoogleChromeLabs#90 will be skipped: # Merge pull request GoogleChromeLabs#427 from GoogleChromeLabs/renovate/tslint-5.x # # Update dependency tslint to v5.12.1 # The commit message GoogleChromeLabs#91 will be skipped: # Update dependency typescript to v3.2.4 # The commit message GoogleChromeLabs#92 will be skipped: # Merge pull request GoogleChromeLabs#431 from GoogleChromeLabs/renovate/typescript-3.x # # Update dependency typescript to v3.2.4 # The commit message GoogleChromeLabs#93 will be skipped: # Update dependency critters-webpack-plugin to v2.2.0 # The commit message GoogleChromeLabs#94 will be skipped: # Merge pull request GoogleChromeLabs#432 from GoogleChromeLabs/renovate/critters-webpack-plugin-2.x # # Update dependency critters-webpack-plugin to v2.2.0 # The commit message GoogleChromeLabs#95 will be skipped: # Update dependency clean-webpack-plugin to v1.0.1 # The commit message GoogleChromeLabs#96 will be skipped: # Merge pull request GoogleChromeLabs#434 from GoogleChromeLabs/renovate/clean-webpack-plugin-1.x # # Update dependency clean-webpack-plugin to v1.0.1 # The commit message GoogleChromeLabs#97 will be skipped: # Update dependency progress-bar-webpack-plugin to v1.12.0 # The commit message GoogleChromeLabs#98 will be skipped: # Merge pull request GoogleChromeLabs#435 from GoogleChromeLabs/renovate/progress-bar-webpack-plugin-1.x # # Update dependency progress-bar-webpack-plugin to v1.12.0 # The commit message GoogleChromeLabs#99 will be skipped: # Add rotate user timing # The commit message GoogleChromeLabs#100 will be skipped: # Use Uint32Array to copy an entire pixel per op # The commit message GoogleChromeLabs#101 will be skipped: # Revert "Add rotate user timing" # # This reverts commit 887db67. # The commit message GoogleChromeLabs#102 will be skipped: # Remove unused bpp # The commit message GoogleChromeLabs#103 will be skipped: # Merge pull request GoogleChromeLabs#436 from GoogleChromeLabs/optimize-rotate # # Optimize rotate # The commit message GoogleChromeLabs#104 will be skipped: # Update dependency @types/node to v10.12.19 # The commit message GoogleChromeLabs#105 will be skipped: # Merge pull request GoogleChromeLabs#441 from GoogleChromeLabs/renovate/node-10.x # # Update dependency @types/node to v10.12.19 # The commit message GoogleChromeLabs#106 will be skipped: # Update dependency progress-bar-webpack-plugin to v1.12.1 # The commit message GoogleChromeLabs#107 will be skipped: # Merge pull request GoogleChromeLabs#442 from GoogleChromeLabs/renovate/progress-bar-webpack-plugin-1.x # # Update dependency progress-bar-webpack-plugin to v1.12.1 # The commit message GoogleChromeLabs#108 will be skipped: # Update dependency @types/node to v10.12.20 # The commit message GoogleChromeLabs#109 will be skipped: # Merge pull request GoogleChromeLabs#443 from GoogleChromeLabs/renovate/node-10.x # # Update dependency @types/node to v10.12.20 # The commit message GoogleChromeLabs#110 will be skipped: # Update dependency @types/node to v10.12.21 # The commit message GoogleChromeLabs#111 will be skipped: # Merge pull request GoogleChromeLabs#445 from GoogleChromeLabs/renovate/node-10.x # # Update dependency @types/node to v10.12.21 # The commit message GoogleChromeLabs#112 will be skipped: # This fixes GoogleChromeLabs#446 and sometimes it's best not to ask too many questions. (GoogleChromeLabs#447) # # The commit message GoogleChromeLabs#113 will be skipped: # Update dependency terser-webpack-plugin to v1.2.2 # The commit message GoogleChromeLabs#114 will be skipped: # Merge pull request GoogleChromeLabs#448 from GoogleChromeLabs/renovate/terser-webpack-plugin-1.x # # Update dependency terser-webpack-plugin to v1.2.2 # The commit message GoogleChromeLabs#115 will be skipped: # # This is a combination of 20 commits. # # This is the 1st commit message: # Merge from upstream/master branch # # # This is the commit message GoogleChromeLabs#2: # # Update zoom and positioning behaviours # # # This is the commit message GoogleChromeLabs#3: # # Merge branch 'master' into update-zoom-interaction # # # This is the commit message GoogleChromeLabs#4: # # Merge branch 'master' into update-zoom-interaction # # # This is the commit message GoogleChromeLabs#5: # # Merge branch 'master' into update-zoom-interaction # # # This is the commit message GoogleChromeLabs#6: # # Merge branch 'master' into update-zoom-interaction # # # This is the commit message GoogleChromeLabs#7: # # Merge branch 'master' into update-zoom-interaction # # # This is the commit message GoogleChromeLabs#8: # # Merge branch 'master' into update-zoom-interaction # # # This is the commit message GoogleChromeLabs#9: # # Merge branch 'master' into update-zoom-interaction # # # This is the commit message GoogleChromeLabs#10: # # Merge branch 'master' into update-zoom-interaction # # # This is the commit message GoogleChromeLabs#11: # # Merge from remote branch # # # This is the commit message GoogleChromeLabs#12: # # Merge from upstream/master # # # This is the commit message GoogleChromeLabs#13: # # Lazy-load the intersection-observer polyfill and optionally control wheel event # # # This is the commit message GoogleChromeLabs#14: # # Fix threshold handling issue # # # This is the commit message GoogleChromeLabs#15: # # merge remote-tracking branch 'upstream/master' into update-zoom-interaction # # # This is the commit message GoogleChromeLabs#16: # # merge remote-tracking branch 'upstream/master' into update-zoom-interaction # # # This is the commit message GoogleChromeLabs#17: # # Update double click listener and position reset behaviour # # # This is the commit message GoogleChromeLabs#18: # # Change back the indentations # # # This is the commit message GoogleChromeLabs#19: # # Update double click listener and position reset behaviour # # # This is the commit message GoogleChromeLabs#20: # # Change back the indentations # The commit message GoogleChromeLabs#116 will be skipped: # Merge from upstream/master branch # The commit message GoogleChromeLabs#117 will be skipped: # Update zoom and positioning behaviours # The commit message GoogleChromeLabs#118 will be skipped: # Merge branch 'master' into update-zoom-interaction # The commit message GoogleChromeLabs#119 will be skipped: # Merge branch 'master' into update-zoom-interaction # The commit message GoogleChromeLabs#120 will be skipped: # Merge branch 'master' into update-zoom-interaction # The commit message GoogleChromeLabs#121 will be skipped: # Merge branch 'master' into update-zoom-interaction # The commit message GoogleChromeLabs#122 will be skipped: # Merge branch 'master' into update-zoom-interaction # The commit message GoogleChromeLabs#123 will be skipped: # Merge branch 'master' into update-zoom-interaction # The commit message GoogleChromeLabs#124 will be skipped: # Merge branch 'master' into update-zoom-interaction # The commit message GoogleChromeLabs#125 will be skipped: # Merge branch 'master' into update-zoom-interaction # The commit message GoogleChromeLabs#126 will be skipped: # Merge from remote branch # The commit message GoogleChromeLabs#127 will be skipped: # Update dependency webpack-cli to v3.2.3 # The commit message GoogleChromeLabs#128 will be skipped: # Merge pull request GoogleChromeLabs#449 from GoogleChromeLabs/renovate/webpack-cli-3.x # # Update dependency webpack-cli to v3.2.3 # The commit message GoogleChromeLabs#129 will be skipped: # Update libwebp to 1.0.2 (GoogleChromeLabs#439) # # * Update package.json # # * Update package.json # # * Update README.md # # * Update README.md # # * Use cmake for libwebp # # * Minimize libwebp # The commit message GoogleChromeLabs#130 will be skipped: # Update dependency chokidar to v2.1.0 # The commit message GoogleChromeLabs#131 will be skipped: # Merge pull request GoogleChromeLabs#451 from GoogleChromeLabs/renovate/chokidar-2.x # # Update dependency chokidar to v2.1.0 # The commit message GoogleChromeLabs#132 will be skipped: # Update dependency loader-utils to v1.2.3 # The commit message GoogleChromeLabs#133 will be skipped: # Merge pull request GoogleChromeLabs#413 from GoogleChromeLabs/renovate/loader-utils-1.x # # Update dependency loader-utils to v1.2.3 # The commit message GoogleChromeLabs#134 will be skipped: # Update dependency @types/node to v10.12.23 # The commit message GoogleChromeLabs#135 will be skipped: # Merge pull request GoogleChromeLabs#453 from GoogleChromeLabs/renovate/node-10.x # # Update dependency @types/node to v10.12.23 # The commit message GoogleChromeLabs#136 will be skipped: # Merge from upstream/master # The commit message GoogleChromeLabs#137 will be skipped: # Lazy-load the intersection-observer polyfill and optionally control wheel event # The commit message GoogleChromeLabs#138 will be skipped: # Fix threshold handling issue # The commit message GoogleChromeLabs#139 will be skipped: # Adding CI step to compare build size to previous master build. (GoogleChromeLabs#450) # # The commit message GoogleChromeLabs#140 will be skipped: # no one must know I did this, or that it got through review. # The commit message GoogleChromeLabs#141 will be skipped: # Pin dependencies (GoogleChromeLabs#456) # # The commit message GoogleChromeLabs#142 will be skipped: # Switching to 1.4x rather than 140% # The commit message GoogleChromeLabs#143 will be skipped: # Rotate implementation in Rust # The commit message GoogleChromeLabs#144 will be skipped: # Reuse rotate instance and calculate pages correctly # The commit message GoogleChromeLabs#145 will be skipped: # Update wasm build # The commit message GoogleChromeLabs#146 will be skipped: # Merge pull request GoogleChromeLabs#438 from GoogleChromeLabs/rust-rotate # # Rotate implementation in Rust # The commit message GoogleChromeLabs#147 will be skipped: # Fix buffer size/offset calculations in rotate/processor.ts # The commit message GoogleChromeLabs#148 will be skipped: # Merge pull request GoogleChromeLabs#458 from jviide/rust-rotate # # Fix buffer offset/size calculations in rotate/processor.ts # The commit message GoogleChromeLabs#149 will be skipped: # 1.3.2 # The commit message GoogleChromeLabs#150 will be skipped: # Update dependency webpack-bundle-analyzer to v3.0.4 # The commit message GoogleChromeLabs#151 will be skipped: # Merge pull request GoogleChromeLabs#459 from GoogleChromeLabs/renovate/webpack-bundle-analyzer-3.x # # Update dependency webpack-bundle-analyzer to v3.0.4 # The commit message GoogleChromeLabs#152 will be skipped: # Update dependency @types/node to v10.12.25 # The commit message GoogleChromeLabs#153 will be skipped: # Merge pull request GoogleChromeLabs#455 from GoogleChromeLabs/renovate/node-10.x # # Update dependency @types/node to v10.12.25 # The commit message GoogleChromeLabs#154 will be skipped: # Update dependency chokidar to v2.1.1 # The commit message GoogleChromeLabs#155 will be skipped: # Merge pull request GoogleChromeLabs#457 from GoogleChromeLabs/renovate/chokidar-2.x # # Update dependency chokidar to v2.1.1 # The commit message GoogleChromeLabs#156 will be skipped: # Update dependency @types/node to v10.12.26 # The commit message GoogleChromeLabs#157 will be skipped: # Merge pull request GoogleChromeLabs#461 from GoogleChromeLabs/renovate/node-10.x # # Update dependency @types/node to v10.12.26 # The commit message GoogleChromeLabs#158 will be skipped: # Updating package lock to fix Netlify # The commit message GoogleChromeLabs#159 will be skipped: # Make Rust rotate code smaller (GoogleChromeLabs#462) # # * Make Rust rotate code smaller # # * Back on the rust happy path # The commit message GoogleChromeLabs#160 will be skipped: # 1.3.3 # The commit message GoogleChromeLabs#161 will be skipped: # Update dependency chokidar to v2.1.2 # The commit message GoogleChromeLabs#162 will be skipped: # Merge pull request GoogleChromeLabs#467 from GoogleChromeLabs/renovate/chokidar-2.x # # Update dependency chokidar to v2.1.2 # The commit message GoogleChromeLabs#163 will be skipped: # merge remote-tracking branch 'upstream/master' into update-zoom-interaction # The commit message GoogleChromeLabs#164 will be skipped: # Update double click listener and position reset behaviour # The commit message GoogleChromeLabs#165 will be skipped: # Change back the indentations # The commit message GoogleChromeLabs#166 will be skipped: # Update double click listener and position reset behaviour # The commit message GoogleChromeLabs#167 will be skipped: # Change back the indentations

developit added 3 commits April 2, 2018 22:49

tabs -> spaces

2d02562

Initial version of webpack-inline-critical-css-plugin

7bf2ba4

Remove commented-out code.

20757d9

mathiasbynens reviewed Apr 3, 2018

View reviewed changes

jakearchibald reviewed Apr 3, 2018

View reviewed changes

developit added 2 commits April 3, 2018 08:52

let -> const

8e6a48b

Add prefer-const eslint rule

82d33ea

jakearchibald reviewed Apr 3, 2018

View reviewed changes

Don't strip :hover, :focus or :active rules.

34c4724

surma requested changes Apr 3, 2018

View reviewed changes

mathiasbynens reviewed Apr 3, 2018

View reviewed changes

developit added 3 commits April 3, 2018 10:00

Use modern JS features, add lots of comments.

306fece

add note about cssnano not being of much use

f49bcba

developit added 8 commits April 3, 2018 16:56

Use util.promisify

e145029

Remove cssnano-powered minify option, add compress option (defaults t…

b15ed20

…o `true`)

Hoist embedLinkedStylesheet() onto the class

e1e452e

Add more explanatory comments

da616a3

Instead of replacing empty rules with comments, remove them.

e9d91ab

Allow specifying a function/regex URL filter for external stylesheets

fa8c932

Switch nwmatcher from thinking we're a DocumentFragment to thinking w…

023367e

…e're a proper Document.

Switch to recursive getElementsByTagName implementation.

3f55698

surma approved these changes Apr 4, 2018

View reviewed changes

developit added 2 commits April 5, 2018 11:44

switch to eslint-config-standard

387f4cf

Add option to make async leave a rel="preload" in the header and appe…

919a259

…nd a <link rel="stylesheet"> to the end of body.

developit mentioned this pull request Apr 17, 2018

async/await for critters #16

Closed

developit changed the base branch from app-skeleton to master April 17, 2018 18:12

developit merged commit 2078b57 into master Apr 17, 2018

alisaitbilgi pushed a commit to alisaitbilgi/squoosh that referenced this pull request Feb 19, 2019

Merge pull request GoogleChromeLabs#12 from GoogleChromeLabs/css-inli…

02081c3

…ning CSS Inlining


		sheet = css.stringify(ast, { compress: this.options.compress!==false });

		return done.then(() => {

CSS Inlining #12

CSS Inlining #12

Conversation

developit commented Apr 3, 2018 • edited Loading

mathiasbynens Apr 3, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

developit Apr 3, 2018 • edited Loading

Choose a reason for hiding this comment

mathiasbynens Apr 3, 2018 • edited by developit Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mathiasbynens Apr 3, 2018 • edited by developit Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jakearchibald commented Apr 3, 2018

developit commented Apr 3, 2018

Choose a reason for hiding this comment

developit Apr 3, 2018 • edited Loading

Choose a reason for hiding this comment

surma Apr 3, 2018 • edited by developit Loading

Choose a reason for hiding this comment

surma left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

surma Apr 3, 2018 • edited by developit Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

developit Apr 3, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

developit Apr 3, 2018 • edited Loading

Choose a reason for hiding this comment

surma Apr 3, 2018 • edited Loading

Choose a reason for hiding this comment

developit Apr 3, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

developit Apr 3, 2018 • edited Loading

Choose a reason for hiding this comment

surma Apr 3, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

surma Apr 3, 2018 • edited by developit Loading

Choose a reason for hiding this comment

surma Apr 3, 2018 • edited by developit Loading

Choose a reason for hiding this comment

surma commented Apr 3, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

surma commented Apr 3, 2018

surma left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

surma commented Apr 4, 2018

developit commented Apr 5, 2018

developit commented Apr 3, 2018 •

edited

Loading

mathiasbynens Apr 3, 2018 •

edited

Loading

developit Apr 3, 2018 •

edited

Loading

mathiasbynens Apr 3, 2018 •

edited by developit

Loading

mathiasbynens Apr 3, 2018 •

edited by developit

Loading

developit Apr 3, 2018 •

edited

Loading

surma Apr 3, 2018 •

edited by developit

Loading

surma Apr 3, 2018 •

edited by developit

Loading

developit Apr 3, 2018 •

edited

Loading

developit Apr 3, 2018 •

edited

Loading

surma Apr 3, 2018 •

edited

Loading

developit Apr 3, 2018 •

edited

Loading

developit Apr 3, 2018 •

edited

Loading

surma Apr 3, 2018 •

edited

Loading

surma Apr 3, 2018 •

edited by developit

Loading

surma Apr 3, 2018 •

edited by developit

Loading