Compress CSS resources to keep the virtual size down (#621)

Author: nayaabkhan

.changeset/friendly-turkeys-play.md

@@ -0,0 +1,6 @@
+---
+'@vanilla-extract/integration': patch
+'@vanilla-extract/webpack-plugin': patch
+---
+
+Improve build performance when creating large CSS files

packages/integration/src/processVanillaFile.ts

@@ -6,6 +6,7 @@ import { stringify } from 'javascript-stringify';
 import isPlainObject from 'lodash/isPlainObject';
 import outdent from 'outdent';
 import { hash } from './hash';
+import zlib from 'zlib';
 
 const originalNodeEnv = process.env.NODE_ENV;
 
@@ -109,7 +110,9 @@ export async function processVanillaFile({
       cssObjs: fileScopeCss,
     }).join('\n');
 
-    const base64Source = Buffer.from(css, 'utf-8').toString('base64');
+    const compressedCSS = zlib.gzipSync(css);
+    const base64Source = compressedCSS.toString('base64');
+
     const fileName = `${
       fileScope.packageName
         ? `${fileScope.packageName}/${fileScope.filePath}`

packages/integration/src/virtualFile.ts

@@ -1,12 +1,18 @@
+import zlib from 'zlib';
+
 export function getSourceFromVirtualCssFile(id: string) {
   const match = id.match(/^(?<fileName>.*)\?source=(?<source>.*)$/) ?? [];
 
   if (!match || !match.groups) {
     throw new Error('No source in vanilla CSS file');
   }
 
+  const decompressedSource = zlib.gunzipSync(
+    Buffer.from(match.groups.source, 'base64'),
+  );
+
   return {
     fileName: match.groups.fileName,
-    source: Buffer.from(match.groups.source, 'base64').toString('utf-8'),
+    source: decompressedSource.toString('utf-8'),
   };
 }

packages/webpack-plugin/package.json

@@ -17,19 +17,25 @@
     "./extracted": {
       "module": "./extracted/dist/vanilla-extract-webpack-plugin-extracted.esm.js",
       "default": "./extracted/dist/vanilla-extract-webpack-plugin-extracted.cjs.js"
+    },
+    "./virtual": {
+      "module": "./virtual/dist/vanilla-extract-webpack-plugin-virtual.esm.js",
+      "default": "./virtual/dist/vanilla-extract-webpack-plugin-virtual.cjs.js"
     }
   },
   "preconstruct": {
     "entrypoints": [
       "index.ts",
       "loader.ts",
-      "extracted.js"
+      "extracted.js",
+      "virtual.ts"
     ]
   },
   "files": [
     "/dist",
     "/loader",
-    "/extracted"
+    "/extracted",
+    "/virtual"
   ],
   "repository": {
     "type": "git",
@@ -45,8 +51,7 @@
     "@vanilla-extract/integration": "^2.0.1",
     "chalk": "^4.1.1",
     "debug": "^4.3.1",
-    "loader-utils": "^2.0.0",
-    "virtual-resource-loader": "^1.0.0"
+    "loader-utils": "^2.0.0"
   },
   "devDependencies": {
     "@types/debug": "^4.1.5",

packages/webpack-plugin/src/loader.ts

@@ -12,6 +12,10 @@ import type { LoaderContext } from './types';
 import { debug, formatResourcePath } from './logger';
 import { ChildCompiler } from './compiler';
 
+const virtualLoader = require.resolve(
+  path.join(path.dirname(require.resolve('../../package.json')), 'virtual'),
+);
+
 const emptyCssExtractionFile = require.resolve(
   path.join(path.dirname(require.resolve('../../package.json')), 'extracted'),
 );
@@ -73,9 +77,9 @@ export function pitch(this: LoaderContext) {
         identOption:
           identifiers ?? (this.mode === 'production' ? 'short' : 'debug'),
         serializeVirtualCssPath: ({ fileName, base64Source }) => {
-          const virtualResourceLoader = `${require.resolve(
-            'virtual-resource-loader',
-          )}?${JSON.stringify({ source: base64Source })}`;
+          const virtualResourceLoader = `${virtualLoader}?${JSON.stringify({
+            source: base64Source,
+          })}`;
 
           const request = loaderUtils.stringifyRequest(
             this,

packages/webpack-plugin/src/virtual.ts

@@ -0,0 +1,11 @@
+// @ts-expect-error
+import { getOptions } from 'loader-utils';
+import zlib from 'zlib';
+
+export default function (this: any) {
+  const { source } = getOptions(this);
+
+  const decompressedSource = zlib.gunzipSync(Buffer.from(source, 'base64'));
+
+  return decompressedSource.toString('utf-8');
+}

packages/webpack-plugin/virtual/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/vanilla-extract-webpack-plugin-virtual.cjs.js",
+  "module": "dist/vanilla-extract-webpack-plugin-virtual.esm.js"
+}