feat: add makeStaticStyles AOT/CSS extraction support

change/@griffel-babel-preset-74562825-5479-4fc4-a589-df0a244ee73b.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: add makeStaticStyles AOT/CSS extraction support",
+  "packageName": "@griffel/babel-preset",
+  "email": "hochelmartin@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@griffel-core-4657ec9a-0702-463c-acea-6ddfbb95ad1e.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: add makeStaticStyles AOT/CSS extraction support",
+  "packageName": "@griffel/core",
+  "email": "hochelmartin@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@griffel-react-c2e3d63b-8b49-4c67-95f4-8c27e6af5f50.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: add makeStaticStyles AOT/CSS extraction support",
+  "packageName": "@griffel/react",
+  "email": "hochelmartin@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@griffel-webpack-extraction-plugin-81e6b586-e23c-48ca-9349-7010f4583dd3.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "feat: add makeStaticStyles AOT/CSS extraction support",
+  "packageName": "@griffel/webpack-extraction-plugin",
+  "email": "hochelmartin@gmail.com",
+  "dependentChangeType": "patch"
+}

packages/babel-preset/__fixtures__/static-styles-array/code.ts

@@ -0,0 +1,10 @@
+import { makeStaticStyles } from '@griffel/react';
+
+export const useStaticStyles = makeStaticStyles([
+  {
+    body: {
+      background: 'red',
+    },
+  },
+  'html { margin: 0; }',
+]);

packages/babel-preset/__fixtures__/static-styles-array/output.ts

@@ -0,0 +1,4 @@
+import { __staticStyles } from '@griffel/react';
+export const useStaticStyles = __staticStyles({
+  d: ['body{background:red;}', 'html{margin:0;}'],
+});

packages/babel-preset/__fixtures__/static-styles-string/code.ts

@@ -0,0 +1,3 @@
+import { makeStaticStyles } from '@griffel/react';
+
+export const useStaticStyles = makeStaticStyles('body { background: red; }');

packages/babel-preset/__fixtures__/static-styles-string/output.ts

@@ -0,0 +1,4 @@
+import { __staticStyles } from '@griffel/react';
+export const useStaticStyles = __staticStyles({
+  d: ['body{background:red;}'],
+});

packages/babel-preset/__fixtures__/static-styles/code.ts

@@ -0,0 +1,7 @@
+import { makeStaticStyles } from '@griffel/react';
+
+export const useStaticStyles = makeStaticStyles({
+  body: {
+    background: 'red',
+  },
+});

packages/babel-preset/__fixtures__/static-styles/output.ts

@@ -0,0 +1,4 @@
+import { __staticStyles } from '@griffel/react';
+export const useStaticStyles = __staticStyles({
+  d: ['body{background:red;}'],
+});

packages/babel-preset/src/assets/replaceAssetsWithImports.ts

@@ -43,7 +43,8 @@ export function replaceAssetsWithImports(
       acc += tokens[i];
 
       if (tokens[i] === 'url') {
-        const url = tokens[i + 1].slice(1, -1);
+        // Strip outer parentheses and optional CSS string quotes from url() values
+        const url = stripUrlTokenWrapper(tokens[i + 1]);
 
         if (isAssetUrl(url)) {
           // Handle `filter: url(./a.svg#id)`
@@ -89,3 +90,11 @@ export function replaceAssetsWithImports(
     );
   }
 }
+
+/**
+ * Strips outer parentheses and optional CSS string quotes from a url() token value.
+ * @example `(url.png)` → `url.png`, `('url.png')` → `url.png`
+ */
+function stripUrlTokenWrapper(token: string): string {
+  return token.replace(/^\(["']?|["']?\)$/g, '');
+}

packages/babel-preset/src/schema.ts

@@ -24,6 +24,9 @@ export const configSchema: JSONSchema7 = {
           importName: {
             type: 'string',
           },
+          staticImportName: {
+            type: 'string',
+          },
         },
       },
     },

packages/babel-preset/src/transformPlugin.test.ts

@@ -207,6 +207,25 @@ pluginTester({
       outputFixture: path.resolve(fixturesDir, 'reset-styles-at-rules', 'output.ts'),
     },
 
+    // Static styles
+    //
+    //
+    {
+      title: 'static: object styles',
+      fixture: path.resolve(fixturesDir, 'static-styles', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'static-styles', 'output.ts'),
+    },
+    {
+      title: 'static: string styles',
+      fixture: path.resolve(fixturesDir, 'static-styles-string', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'static-styles-string', 'output.ts'),
+    },
+    {
+      title: 'static: array of mixed styles',
+      fixture: path.resolve(fixturesDir, 'static-styles-array', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'static-styles-array', 'output.ts'),
+    },
+
     // Imports
     //
     //
@@ -353,6 +372,7 @@ describe('babel preset', () => {
           },
         },
         cssResetEntries: Object {},
+        cssStaticEntries: Object {},
       }
     `);
   });
@@ -378,6 +398,7 @@ describe('babel preset', () => {
             .r7z97ji{color:red;padding-right:4px;},
           ],
         },
+        cssStaticEntries: Object {},
       }
     `);
   });
@@ -413,6 +434,7 @@ export const useStyles = makeStyles({
           },
         },
         cssResetEntries: Object {},
+        cssStaticEntries: Object {},
       }
     `);
   });

packages/babel-preset/src/transformPlugin.ts

@@ -3,18 +3,29 @@ import { types as t } from '@babel/core';
 import { declare } from '@babel/helper-plugin-utils';
 import { Module } from '@linaria/babel-preset';
 import shakerEvaluator from '@linaria/shaker';
-import type { GriffelStyle, CSSRulesByBucket, CSSClassesMapBySlot } from '@griffel/core';
-import { resolveStyleRulesForSlots, resolveResetStyleRules, normalizeCSSBucketEntry } from '@griffel/core';
+import type {
+  GriffelStyle,
+  GriffelStaticStyles,
+  CSSRulesByBucket,
+  CSSBucketEntry,
+  CSSClassesMapBySlot,
+} from '@griffel/core';
+import {
+  resolveStyleRulesForSlots,
+  resolveResetStyleRules,
+  resolveStaticStyleRules,
+  normalizeCSSBucketEntry,
+} from '@griffel/core';
 import * as path from 'path';
 
-import { normalizeStyleRules } from './assets/normalizeStyleRules';
+import { normalizeStyleRule, normalizeStyleRules } from './assets/normalizeStyleRules';
 import { replaceAssetsWithImports } from './assets/replaceAssetsWithImports';
 import { dedupeCSSRules } from './utils/dedupeCSSRules';
 import { evaluatePaths } from './utils/evaluatePaths';
 import type { BabelPluginOptions, BabelPluginMetadata } from './types';
 import { validateOptions } from './validateOptions';
 
-type FunctionKinds = 'makeStyles' | 'makeResetStyles';
+type FunctionKinds = 'makeStyles' | 'makeResetStyles' | 'makeStaticStyles';
 
 type BabelPluginState = PluginPass & {
   importDeclarationPaths?: NodePath<t.ImportDeclaration>[];
@@ -31,6 +42,7 @@ type BabelPluginState = PluginPass & {
   calleePaths?: NodePath<t.Identifier>[];
   cssEntries?: BabelPluginMetadata['cssEntries'];
   cssResetEntries?: BabelPluginMetadata['cssResetEntries'];
+  cssStaticEntries?: BabelPluginMetadata['cssStaticEntries'];
 };
 
 function getDefinitionPathFromCallExpression(
@@ -68,6 +80,10 @@ function getCalleeFunctionKind(
     if (path.referencesImport(module.moduleSource, module.resetImportName || 'makeResetStyles')) {
       return 'makeResetStyles';
     }
+
+    if (path.referencesImport(module.moduleSource, module.staticImportName || 'makeStaticStyles')) {
+      return 'makeStaticStyles';
+    }
   }
 
   return null;
@@ -113,6 +129,23 @@ function buildCSSResetEntriesMetadata(
   });
 }
 
+/**
+ * Extracts CSS rules from evaluated static styles to metadata
+ */
+function buildCSSStaticEntriesMetadata(
+  state: Required<BabelPluginState>,
+  cssRulesByBucket: CSSRulesByBucket,
+  declaratorId: string,
+) {
+  state.cssStaticEntries[declaratorId] ??= [];
+  state.cssStaticEntries[declaratorId] = Object.values(cssRulesByBucket).flatMap(bucketEntries => {
+    return bucketEntries.map(bucketEntry => {
+      const [cssRule] = normalizeCSSBucketEntry(bucketEntry);
+      return cssRule;
+    });
+  });
+}
+
 /**
  * Extracts CSS rules from evaluated styles to metadata
  */
@@ -229,11 +262,13 @@ export const transformPlugin = declare<Partial<BabelPluginOptions>, PluginObj<Ba
       this.calleePaths = [];
       this.cssEntries = {};
       this.cssResetEntries = {};
+      this.cssStaticEntries = {};
 
       if (pluginOptions.generateMetadata) {
         Object.assign(this.file.metadata, {
           cssResetEntries: {},
           cssEntries: {},
+          cssStaticEntries: {},
         } as BabelPluginMetadata);
       }
     },
@@ -353,13 +388,40 @@ export const transformPlugin = declare<Partial<BabelPluginOptions>, PluginObj<Ba
                 ]);
               }
 
+              if (definitionPath.functionKind === 'makeStaticStyles') {
+                const styles: GriffelStaticStyles | GriffelStaticStyles[] = evaluationResult.value;
+                const stylesSet: GriffelStaticStyles[] = Array.isArray(styles) ? styles : [styles];
+                const cssRules = resolveStaticStyleRules(stylesSet);
+
+                // Normalize asset paths in CSS rules so they are relative to projectRoot,
+                // matching the convention used by makeStyles/makeResetStyles via normalizeStyleRules.
+                const normalizedRules: CSSBucketEntry[] = cssRules.map(rule =>
+                  typeof rule === 'string'
+                    ? (normalizeStyleRule(path, pluginOptions.projectRoot, state.filename as string, rule) as string)
+                    : rule,
+                );
+                const cssRulesByBucket: CSSRulesByBucket = { d: normalizedRules };
+
+                if (pluginOptions.generateMetadata) {
+                  buildCSSStaticEntriesMetadata(
+                    state as Required<BabelPluginState>,
+                    cssRulesByBucket,
+                    definitionPath.declaratorId,
+                  );
+                }
+
+                (callExpressionPath.get('arguments.0') as NodePath).remove();
+                callExpressionPath.pushContainer('arguments', [t.valueToNode(cssRulesByBucket)]);
+              }
+
               replaceAssetsWithImports(pluginOptions.projectRoot, state.filename!, programPath, callExpressionPath);
             });
 
             if (pluginOptions.generateMetadata) {
               Object.assign(this.file.metadata, {
                 cssResetEntries: state.cssResetEntries ?? {},
                 cssEntries: state.cssEntries ?? {},
+                cssStaticEntries: state.cssStaticEntries ?? {},
               } as BabelPluginMetadata);
             }
           }
@@ -382,6 +444,8 @@ export const transformPlugin = declare<Partial<BabelPluginOptions>, PluginObj<Ba
                     specifier.replaceWith(t.identifier('__styles'));
                   } else if (importedPath.isIdentifier({ name: module.resetImportName || 'makeResetStyles' })) {
                     specifier.replaceWith(t.identifier('__resetStyles'));
+                  } else if (importedPath.isIdentifier({ name: module.staticImportName || 'makeStaticStyles' })) {
+                    specifier.replaceWith(t.identifier('__staticStyles'));
                   }
                 }
               }
@@ -395,6 +459,11 @@ export const transformPlugin = declare<Partial<BabelPluginOptions>, PluginObj<Ba
                 return;
               }
 
+              if (calleePath.node.name === 'makeStaticStyles') {
+                calleePath.replaceWith(t.identifier('__staticStyles'));
+                return;
+              }
+
               calleePath.replaceWith(t.identifier('__styles'));
             });
           }
@@ -467,6 +536,8 @@ export const transformPlugin = declare<Partial<BabelPluginOptions>, PluginObj<Ba
           functionKind = 'makeStyles';
         } else if (propertyPath.isIdentifier({ name: 'makeResetStyles' })) {
           functionKind = 'makeResetStyles';
+        } else if (propertyPath.isIdentifier({ name: 'makeStaticStyles' })) {
+          functionKind = 'makeStaticStyles';
         }
 
         if (!functionKind) {

packages/babel-preset/src/types.ts

@@ -14,6 +14,7 @@ export type BabelPluginOptions = {
     moduleSource: string;
     importName: string;
     resetImportName?: string;
+    staticImportName?: string;
   }[];
 
   /**
@@ -37,4 +38,5 @@ export type BabelPluginOptions = {
 export type BabelPluginMetadata = {
   cssEntries: Record<string, Record<string, string[]>>;
   cssResetEntries: Record<string, string[]>;
+  cssStaticEntries: Record<string, string[]>;
 };

packages/core/src/__staticCSS.ts

@@ -0,0 +1,11 @@
+/**
+ * A version of makeStaticStyles() that accepts build output as an input and skips all runtime transforms & DOM insertion.
+ *
+ * @internal
+ */
+export function __staticCSS() {
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  function useStaticStyles(): void {}
+
+  return useStaticStyles;
+}

packages/core/src/__staticStyles.ts

@@ -0,0 +1,18 @@
+import { insertionFactory } from './insertionFactory';
+import type { CSSRulesByBucket, GriffelInsertionFactory } from './types';
+import type { MakeStaticStylesOptions } from './makeStaticStyles';
+
+/**
+ * A version of makeStaticStyles() that accepts build output as an input and skips all runtime transforms.
+ *
+ * @internal
+ */
+export function __staticStyles(cssRules: CSSRulesByBucket, factory: GriffelInsertionFactory = insertionFactory) {
+  const insertStyles = factory();
+
+  function useStaticStyles(options: MakeStaticStylesOptions): void {
+    insertStyles(options.renderer, cssRules);
+  }
+
+  return useStaticStyles;
+}

packages/core/src/index.ts

@@ -71,6 +71,8 @@ export { __css } from './__css';
 export { __styles } from './__styles';
 export { __resetCSS } from './__resetCSS';
 export { __resetStyles } from './__resetStyles';
+export { __staticCSS } from './__staticCSS';
+export { __staticStyles } from './__staticStyles';
 
 export { normalizeCSSBucketEntry } from './runtime/utils/normalizeCSSBucketEntry';
 export { styleBucketOrdering, getStyleSheetKey } from './renderer/getStyleSheetForBucket';
@@ -79,6 +81,7 @@ export { getStyleBucketName } from './runtime/getStyleBucketName';
 export { reduceToClassNameForSlots } from './runtime/reduceToClassNameForSlots';
 export { resolveStyleRules } from './runtime/resolveStyleRules';
 export { resolveResetStyleRules } from './runtime/resolveResetStyleRules';
+export { resolveStaticStyleRules } from './runtime/resolveStaticStyleRules';
 
 export * from './constants';
 

packages/react/src/__staticCSS.ts

@@ -0,0 +1,17 @@
+'use client';
+
+import { __staticCSS as vanillaStaticCSS } from '@griffel/core';
+
+/**
+ * A version of makeStaticStyles() that accepts build output as an input and skips all runtime transforms & DOM insertion.
+ *
+ * @internal
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export function __staticCSS() {
+  const getStyles = vanillaStaticCSS();
+
+  return function useStaticStyles(): void {
+    return getStyles();
+  };
+}