ships CSS-in-JS as part of each Web Component's dep graph (GoogleChrome#2245)

* Ships CSS-in-JS as part of each Web Component's dep graph.

* fix unresolved behavior on header

Author: samthor

build.js

@@ -22,6 +22,7 @@ const path = require("path");
 const log = require("fancy-log");
 const rollupPluginNodeResolve = require("rollup-plugin-node-resolve");
 const rollupPluginCJS = require("rollup-plugin-commonjs");
+const rollupPluginPostCSS = require("rollup-plugin-postcss");
 const rollupPluginVirtual = require("rollup-plugin-virtual");
 const rollupPluginReplace = require("rollup-plugin-replace");
 const rollup = require("rollup");
@@ -96,6 +97,16 @@ async function buildCacheManifest() {
 async function build() {
   const generated = [];
 
+  const postcssConfig = {};
+  if (isProd) {
+    // nb. Only require() autoprefixer when used.
+    const autoprefixer = require("autoprefixer");
+    postcssConfig.plugins = [autoprefixer];
+
+    // uses cssnano vs. our regular CSS usees sass' builtin compression
+    postcssConfig.minimize = true;
+  }
+
   // Rollup bootstrap to generate graph of source needs. This eventually uses
   // dynamic import to bring in code required for each page (see router.js).
   // Does not hash "bootstrap.js" entrypoint, but hashes all generated chunks,
@@ -106,6 +117,7 @@ async function build() {
       rollupPluginVirtual({
         webdev_config: `export default ${JSON.stringify(bootstrapConfig)};`,
       }),
+      rollupPluginPostCSS(postcssConfig),
       ...defaultPlugins,
     ],
   });

compile-css.js

@@ -15,14 +15,13 @@
  */
 
 require("dotenv").config();
+const isProd = process.env.ELEVENTY_ENV === "prod";
 
 const fs = require("fs");
 const path = require("path");
 const mkdirp = require("mkdirp");
 const log = require("fancy-log");
 
-const isProd = process.env.ELEVENTY_ENV === "prod";
-
 const sassEngine = (function() {
   try {
     // node-sass is faster, but regularly fails to install correctly (native bindings)

src/lib/components/Codelab/index.js

@@ -5,6 +5,7 @@
 
 import {html} from "lit-element";
 import {BaseElement} from "../BaseElement";
+import "./_styles.scss";
 
 /**
  * Render codelab instructions and Glitch

src/lib/components/CopyCode/styles.scss renamed to src/lib/components/CopyCode/_styles.scss

@@ -3,6 +3,7 @@
  */
 
 import {BaseElement} from "../BaseElement";
+import "./_styles.scss";
 
 /**
  * Renders code block that can easily be copied.

src/lib/components/CopyCode/index.js

@@ -16,21 +16,31 @@
 
 /**
  * @fileoverview A responsive header that can trigger a side-nav.
+ *
+ * This does not inherit from BaseStateElement as it is not a LitElement.
  */
 
 import {store} from "../../store";
 import {expandSideNav} from "../../actions";
 
 class Header extends HTMLElement {
+  constructor() {
+    super();
+
+    this.onStateChanged = this.onStateChanged.bind(this);
+  }
+
   connectedCallback() {
     this.hamburgerBtn = this.querySelector(".web-header__hamburger-btn");
+    this.hamburgerBtn.classList.remove("unresolved");
     this.hamburgerBtn.addEventListener("click", expandSideNav);
 
-    this.onStateChanged = this.onStateChanged.bind(this);
     store.subscribe(this.onStateChanged);
   }
 
   disconnectedCallback() {
+    this.hamburgerBtn.removeEventListener("click", expandSideNav);
+
     store.unsubscribe(this.onStateChanged);
   }
 

src/lib/components/Header/index.js

@@ -4,6 +4,7 @@
 
 import {html} from "lit-element";
 import {BaseElement} from "../BaseElement";
+import "./_styles.scss";
 
 /**
  * @extends {BaseElement}

src/lib/components/LighthouseGauge/index.js

@@ -11,6 +11,7 @@ import {
   sortOnWeights,
   getAuditReferenceDocLink,
 } from "../../lighthouse";
+import "./_styles.scss";
 
 const NUM_AUDITS_TO_SHOW = 10;
 

src/lib/components/LighthouseScoresAudits/index.js

@@ -1,5 +1,7 @@
+@import '../../../styles/settings/colors';
 @import '../../../styles/settings/dimensions';
 @import '../../../styles/tools/breakpoints';
+@import '../../../styles/tools/mixins';
 
 
 web-lighthouse-scores-meta {

src/lib/components/LighthouseScoresMeta/_styles.scss

@@ -5,6 +5,7 @@
 import {html} from "lit-element";
 import {BaseElement} from "../BaseElement";
 import {LH_HOST} from "../../lighthouse-service";
+import "./_styles.scss";
 
 /* eslint-disable require-jsdoc */
 class LighthouseScoresMeta extends BaseElement {