✨ inline/load css to style element

vanilla-extract-css · Jul 25, 2023 · 3beb1a3 · 3beb1a3
1 parent 40d7e72
commit 3beb1a3
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 3 deletions.
diff --git a/packages/esbuild-plugin-next/src/index.ts b/packages/esbuild-plugin-next/src/index.ts
@@ -11,19 +11,28 @@ import type { Plugin } from 'esbuild';
 
 const vanillaCssNamespace = 'vanilla-extract-css-ns';
 
+async function hashString(str: string) {
+  const encoder = new TextEncoder();
+  const data = encoder.encode(str);
+  const hash = await crypto.subtle.digest('SHA-256', data);
+  return hash;
+}
+
 interface VanillaExtractPluginOptions {
   outputCss?: boolean;
   runtime?: boolean;
   processCss?: (css: string) => Promise<string>;
   identifiers?: IdentifierOption;
   compilerVitePlugins?: CreateCompilerOptions['vitePlugins'];
+  useStyleLoader?: boolean;
 }
 export function vanillaExtractPlugin({
   outputCss = true,
   runtime = false,
   processCss,
   identifiers: identOption,
   compilerVitePlugins: vitePlugins,
+  useStyleLoader,
 }: VanillaExtractPluginOptions = {}): Plugin {
   if (runtime) {
     // If using runtime CSS then just apply fileScopes and debug IDs to code
@@ -60,11 +69,35 @@ export function vanillaExtractPlugin({
           if (typeof processCss === 'function') {
             css = await processCss(css);
           }
+          const resolveDir = dirname(filePath);
+
+          if (useStyleLoader) {
+            // replace slashes with dashes to make it a valid CSS identifier
+            const elementId = `vanilla-extract-${
+              build.initialOptions.minify
+                ? await hashString(filePath)
+                : filePath.replace(/\//g, '__')
+            }`;
+            const contents = `
+              if (document.getElementById('${elementId}') === null) {
+                const element = document.createElement('style');
+                element.id = '${elementId}';
+                element.textContent = \`${css}\`;
+                document.head.append(element);
+              }
+              export default {};
+              `;
+            return {
+              contents,
+              loader: 'js',
+              resolveDir,
+            };
+          }
 
           return {
             contents: css,
             loader: 'css',
-            resolveDir: dirname(filePath),
+            resolveDir,
           };
         },
       );

diff --git a/packages/esbuild-plugin/src/index.ts b/packages/esbuild-plugin/src/index.ts
@@ -14,6 +14,13 @@ import type { Plugin } from 'esbuild';
 
 const vanillaCssNamespace = 'vanilla-extract-css-ns';
 
+async function hashString(str: string) {
+  const encoder = new TextEncoder();
+  const data = encoder.encode(str);
+  const hash = await crypto.subtle.digest('SHA-256', data);
+  return hash;
+}
+
 interface VanillaExtractPluginOptions {
   outputCss?: boolean;
   /**
@@ -24,6 +31,7 @@ interface VanillaExtractPluginOptions {
   processCss?: (css: string) => Promise<string>;
   identifiers?: IdentifierOption;
   esbuildOptions?: CompileOptions['esbuildOptions'];
+  useStyleLoader?: boolean;
 }
 export function vanillaExtractPlugin({
   outputCss,
@@ -32,6 +40,7 @@ export function vanillaExtractPlugin({
   processCss,
   identifiers,
   esbuildOptions,
+  useStyleLoader,
 }: VanillaExtractPluginOptions = {}): Plugin {
   if (runtime) {
     // If using runtime CSS then just apply fileScopes and debug IDs to code
@@ -58,9 +67,31 @@ export function vanillaExtractPlugin({
           }
 
           const rootDir = build.initialOptions.absWorkingDir ?? process.cwd();
+          const filePath = join(rootDir, fileName);
+          const resolveDir = dirname(filePath);
 
-          const resolveDir = dirname(join(rootDir, fileName));
-
+          // If using style-loader then we need to return a JS file that inserts the CSS into the DOM
+          if (useStyleLoader) {
+            const elementId = `vanilla-extract-${
+              build.initialOptions.minify
+                ? await hashString(fileName)
+                : fileName.replace(/[^a-zA-Z0-9-_]/g, '-')
+            }`;
+            const contents = `
+              if (document.getElementById('${elementId}') === null) {
+                const element = document.createElement('style');
+                element.id = '${elementId}';
+                element.textContent = \`${source}\`;
+                document.head.append(element);
+              }
+              export default {};
+              `;
+            return {
+              contents,
+              loader: 'js',
+              resolveDir,
+            };
+          }
           return {
             contents: source,
             loader: 'css',