Hack together not-inline CSS

2022-02-21 12:40:16 +00:00
2 changed files with 72 additions and 17 deletions
--- a/lib/initial-css-plugin.js
+++ b/lib/initial-css-plugin.js
@@ -11,10 +11,23 @@
 * limitations under the License.
 */
 import { promisify } from 'util';
-
+import { promises as fsp, readFileSync } from 'fs';
 import path from 'path';
 import { posix } from 'path';
 import glob from 'glob';
+import postcss from 'postcss';
+import postCSSNested from 'postcss-nested';
+import postCSSUrl from 'postcss-url';
+import postCSSModules from 'postcss-modules';
+import postCSSSimpleVars from 'postcss-simple-vars';
+import cssNano from 'cssnano';
+import {
+  parse as parsePath,
+  resolve as resolvePath,
+  dirname,
+  normalize as nomalizePath,
+  sep as pathSep,
+} from 'path';

 const globP = promisify(glob);

@@ -30,26 +43,72 @@ export default function initialCssPlugin() {
    async load(id) {
      if (id !== initialCssModule) return;

-      const matches = await globP('shared/prerendered-app/**/*.css', {
-        nodir: true,
-        cwd: path.join(process.cwd(), 'src'),
-      });
+      const matches = (
+        await globP('shared/prerendered-app/**/*.css', {
+          nodir: true,
+          cwd: path.join(process.cwd(), 'src'),
+          absolute: true,
+        })
+      ).map((cssPath) =>
+        // glob() returns windows paths with a forward slash. Normalise it:
+        path.normalize(cssPath),
+      );

      // Sort the matches so the parentmost items appear first.
      // This is a bit of a hack, but it means the util stuff appears in the cascade first.
      const sortedMatches = matches
        .map((match) => path.normalize(match).split(path.sep))
        .sort((a, b) => a.length - b.length)
-        .map((match) => posix.join(...match));
+        .map((match) => '/' + posix.join(...match));

-      const imports = sortedMatches
-        .map((id, i) => `import css${i} from 'css:${id}';\n`)
-        .join('');
+      const cssSources = await Promise.all(
+        sortedMatches.map(async (path) => {
+          this.addWatchFile(path);
+          const file = await fsp.readFile(path);

-      return (
-        imports +
-        `export default ${sortedMatches.map((_, i) => `css${i}`).join(' + ')};`
+          const cssResult = await postcss([
+            postCSSNested,
+            postCSSSimpleVars(),
+            postCSSModules({
+              root: '',
+            }),
+            postCSSUrl({
+              url: ({ relativePath, url }) => {
+                if (/^((https?|data):|#)/.test(url)) return url;
+                const parsedPath = parsePath(relativePath);
+                const source = readFileSync(
+                  resolvePath(dirname(path), relativePath),
+                );
+                const fileId = this.emitFile({
+                  type: 'asset',
+                  name: parsedPath.base,
+                  source,
+                });
+                const hash = createHash('md5');
+                hash.update(source);
+                const md5 = hash.digest('hex');
+                hashToId.set(md5, fileId);
+                return `/fake/path/to/asset/${md5}/`;
+              },
+            }),
+            cssNano,
+          ]).process(file, {
+            from: path,
+          });
+
+          return cssResult.css;
+        }),
      );
+
+      const css = cssSources.join('\n');
+
+      const fileId = this.emitFile({
+        type: 'asset',
+        source: css,
+        name: 'initial.css',
+      });
+
+      return `export default import.meta.ROLLUP_FILE_URL_${fileId};`;
    },
  };
 }
--- a/src/static-build/pages/index/index.tsx
+++ b/src/static-build/pages/index/index.tsx
@@ -64,11 +64,7 @@ const Index: FunctionalComponent<Props> = () => (
      <style
        dangerouslySetInnerHTML={{ __html: escapeStyleScriptContent(baseCss) }}
      />
-      <style
-        dangerouslySetInnerHTML={{
-          __html: escapeStyleScriptContent(initialCss),
-        }}
-      />
+      <link rel="stylesheet" href={initialCss} />
    </head>
    <body>
      <div id="app">