Add serialize CSS utilities (#623)

Co-authored-by: Michael Taranto <[email protected]>

Author: mattcompiles

.changeset/friendly-turkeys-play.md

@@ -1,4 +1,5 @@
 ---
+'@vanilla-extract/esbuild-plugin': patch
 '@vanilla-extract/integration': patch
 '@vanilla-extract/webpack-plugin': patch
 ---

.changeset/large-fans-appear.md

@@ -0,0 +1,7 @@
+---
+'@vanilla-extract/integration': major
+---
+
+BREAKING CHANGE
+
+`getSourceFromVirtualCssFile` is now async.

.changeset/nasty-pillows-chew.md

@@ -0,0 +1,9 @@
+---
+'@vanilla-extract/integration': major
+---
+
+Add `serializeCss` and `deserializeCss` utilities.
+
+BREAKING CHANGE
+
+Remove `base64Source` from `serializeVirtualCssPath`. Use the new `serializeCss` and `deserializeCss` functions if required.

packages/esbuild-plugin/src/index.ts

@@ -43,7 +43,7 @@ export function vanillaExtractPlugin({
       build.onLoad(
         { filter: /.*/, namespace: vanillaCssNamespace },
         async ({ path }) => {
-          let { source } = getSourceFromVirtualCssFile(path);
+          let { source } = await getSourceFromVirtualCssFile(path);
 
           if (typeof processCss === 'function') {
             source = await processCss(source);

packages/integration/src/index.ts

@@ -8,6 +8,8 @@ export { getPackageInfo } from './packageInfo';
 export { compile, vanillaExtractFilescopePlugin } from './compile';
 export { hash } from './hash';
 export { addFileScope } from './addFileScope';
+export { serializeCss, deserializeCss } from './serialize';
+
 export * from './filters';
 
 export type { IdentifierOption } from './processVanillaFile';

packages/integration/src/processVanillaFile.ts

@@ -5,8 +5,9 @@ import evalCode from 'eval';
 import { stringify } from 'javascript-stringify';
 import isPlainObject from 'lodash/isPlainObject';
 import outdent from 'outdent';
+
 import { hash } from './hash';
-import zlib from 'zlib';
+import { serializeCss } from './serialize';
 
 const originalNodeEnv = process.env.NODE_ENV;
 
@@ -35,7 +36,6 @@ interface ProcessVanillaFileOptions {
   identOption?: IdentifierOption;
   serializeVirtualCssPath?: (file: {
     fileName: string;
-    base64Source: string;
     fileScope: FileScope;
     source: string;
   }) => string | Promise<string>;
@@ -110,9 +110,6 @@ export async function processVanillaFile({
       cssObjs: fileScopeCss,
     }).join('\n');
 
-    const compressedCSS = zlib.gzipSync(css);
-    const base64Source = compressedCSS.toString('base64');
-
     const fileName = `${
       fileScope.packageName
         ? `${fileScope.packageName}/${fileScope.filePath}`
@@ -124,7 +121,6 @@ export async function processVanillaFile({
     if (serializeVirtualCssPath) {
       const serializedResult = serializeVirtualCssPath({
         fileName,
-        base64Source,
         fileScope,
         source: css,
       });
@@ -135,7 +131,9 @@ export async function processVanillaFile({
         virtualCssFilePath = await serializedResult;
       }
     } else {
-      virtualCssFilePath = `import '${fileName}?source=${base64Source}';`;
+      const serializedCss = await serializeCss(css);
+
+      virtualCssFilePath = `import '${fileName}?source=${serializedCss}';`;
     }
 
     cssImports.push(virtualCssFilePath);

packages/integration/src/serialize.ts

@@ -0,0 +1,31 @@
+import { gzip, gunzip } from 'zlib';
+import { promisify } from 'util';
+
+const zip = promisify(gzip);
+const unzip = promisify(gunzip);
+
+// The byte threshold for applying compression, below which compressing would out-weigh its value.
+const compressionThreshold = 1000;
+const compressionFlag = '#';
+
+export async function serializeCss(source: string) {
+  if (source.length > compressionThreshold) {
+    const compressedSource = await zip(source);
+
+    return compressionFlag + compressedSource.toString('base64');
+  }
+
+  return Buffer.from(source, 'utf-8').toString('base64');
+}
+
+export async function deserializeCss(source: string) {
+  if (source.indexOf(compressionFlag) > -1) {
+    const decompressedSource = await unzip(
+      Buffer.from(source.replace(compressionFlag, ''), 'base64'),
+    );
+
+    return decompressedSource.toString('utf-8');
+  }
+
+  return Buffer.from(source, 'base64').toString('utf-8');
+}

packages/integration/src/virtualFile.ts

@@ -1,18 +1,16 @@
-import zlib from 'zlib';
+import { deserializeCss } from './serialize';
 
-export function getSourceFromVirtualCssFile(id: string) {
+export async 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'),
-  );
+  const source = await deserializeCss(match.groups.source);
 
   return {
     fileName: match.groups.fileName,
-    source: decompressedSource.toString('utf-8'),
+    source,
   };
 }

packages/webpack-plugin/package.json

@@ -18,24 +18,24 @@
       "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"
+    "./virtualFileLoader": {
+      "module": "./virtualFileLoader/dist/vanilla-extract-webpack-plugin-virtualFileLoader.esm.js",
+      "default": "./virtualFileLoader/dist/vanilla-extract-webpack-plugin-virtualFileLoader.cjs.js"
     }
   },
   "preconstruct": {
     "entrypoints": [
       "index.ts",
       "loader.ts",
       "extracted.js",
-      "virtual.ts"
+      "virtualFileLoader.ts"
     ]
   },
   "files": [
     "/dist",
     "/loader",
     "/extracted",
-    "/virtual"
+    "/virtualFileLoader"
   ],
   "repository": {
     "type": "git",

packages/webpack-plugin/src/loader.ts

@@ -6,14 +6,18 @@ import {
   processVanillaFile,
   addFileScope,
   PackageInfo,
+  serializeCss,
 } from '@vanilla-extract/integration';
 
 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'),
+  path.join(
+    path.dirname(require.resolve('../../package.json')),
+    'virtualFileLoader',
+  ),
 );
 
 const emptyCssExtractionFile = require.resolve(
@@ -76,9 +80,10 @@ export function pitch(this: LoaderContext) {
         filePath: this.resourcePath,
         identOption:
           identifiers ?? (this.mode === 'production' ? 'short' : 'debug'),
-        serializeVirtualCssPath: ({ fileName, base64Source }) => {
+        serializeVirtualCssPath: async ({ fileName, source }) => {
+          const serializedCss = await serializeCss(source);
           const virtualResourceLoader = `${virtualLoader}?${JSON.stringify({
-            source: base64Source,
+            source: serializedCss,
           })}`;
 
           const request = loaderUtils.stringifyRequest(