feat: add "classNameHashSalt" for AOT (#557)

* feat: add "classNameHashSalt" for AOT * remove unrelated code
microsoft · May 21, 2024 · 1a56464 · 1a56464
1 parent 3cac9f0
commit 1a56464
Show file tree

Hide file tree

Showing 16 changed files with 124 additions and 8 deletions.
diff --git a/change/@griffel-babel-preset-5f01fbba-7bfc-453f-9e5b-60dcdaf7f65f.json b/change/@griffel-babel-preset-5f01fbba-7bfc-453f-9e5b-60dcdaf7f65f.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: add \"classNameHashSalt\" for AOT",
+  "packageName": "@griffel/babel-preset",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@griffel-core-1200d9cd-dfd9-46bd-b88a-6c2a7b30a7e7.json b/change/@griffel-core-1200d9cd-dfd9-46bd-b88a-6c2a7b30a7e7.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: add \"classNameHashSalt\" for AOT",
+  "packageName": "@griffel/core",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/babel-preset/__fixtures__/config-classname-hash-salt/code.ts b/packages/babel-preset/__fixtures__/config-classname-hash-salt/code.ts
@@ -0,0 +1,5 @@
+import { makeStyles } from '@griffel/react';
+
+export const useStyles = makeStyles({
+  root: { color: 'red', paddingLeft: '4px' },
+});
diff --git a/packages/babel-preset/__fixtures__/config-classname-hash-salt/output.ts b/packages/babel-preset/__fixtures__/config-classname-hash-salt/output.ts
@@ -0,0 +1,12 @@
+import { __styles } from '@griffel/react';
+export const useStyles = __styles(
+  {
+    root: {
+      sj55zd: 'feohi3x',
+      uwmqm3: ['f1rwgqon', 'f1tyzn0d'],
+    },
+  },
+  {
+    d: ['.feohi3x{color:red;}', '.f1rwgqon{padding-left:4px;}', '.f1tyzn0d{padding-right:4px;}'],
+  },
+);
diff --git a/packages/babel-preset/src/schema.ts b/packages/babel-preset/src/schema.ts
@@ -6,6 +6,9 @@ export const configSchema: JSONSchema7 = {
 
   type: 'object',
   properties: {
+    classNameHashSalt: {
+      type: 'string',
+    },
     generateMetadata: {
       type: 'boolean',
     },

diff --git a/packages/babel-preset/src/transformPlugin.test.ts b/packages/babel-preset/src/transformPlugin.test.ts
@@ -157,6 +157,14 @@ pluginTester({
     // Configs
     //
     //
+    {
+      title: 'config: classNameHashSalt',
+      fixture: path.resolve(fixturesDir, 'config-classname-hash-salt', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'config-classname-hash-salt', 'output.ts'),
+      pluginOptions: {
+        classNameHashSalt: 'prefix',
+      },
+    },
     {
       title: 'config: babelOptions',
       fixture: path.resolve(fixturesDir, 'config-babel-options', 'code.ts'),

diff --git a/packages/babel-preset/src/transformPlugin.ts b/packages/babel-preset/src/transformPlugin.ts
@@ -200,6 +200,7 @@ export const transformPlugin = declare<Partial<BabelPluginOptions>, PluginObj<Ba
 
   const pluginOptions: Required<BabelPluginOptions> = {
     babelOptions: {},
+    classNameHashSalt: '',
     generateMetadata: false,
     modules: [
       { moduleSource: '@griffel/react', importName: 'makeStyles' },
@@ -296,6 +297,7 @@ export const transformPlugin = declare<Partial<BabelPluginOptions>, PluginObj<Ba
                     state.filename as string,
                     stylesBySlots,
                   ),
+                  options.classNameHashSalt,
                 );
                 const uniqueCSSRules = dedupeCSSRules(cssRulesByBucket);
 
@@ -328,6 +330,7 @@ export const transformPlugin = declare<Partial<BabelPluginOptions>, PluginObj<Ba
                     state.filename as string,
                     styles,
                   ),
+                  options.classNameHashSalt,
                 );
 
                 if (pluginOptions.generateMetadata) {

diff --git a/packages/babel-preset/src/types.ts b/packages/babel-preset/src/types.ts
@@ -2,6 +2,8 @@ import type { TransformOptions } from '@babel/core';
 import type { EvalRule } from '@linaria/babel-preset';
 
 export type BabelPluginOptions = {
+  classNameHashSalt?: string;
+
   /**
    * Returns the evaluated CSS rules in the file result metadata
    * @default false

diff --git a/packages/core/src/resolveStyleRulesForSlots.ts b/packages/core/src/resolveStyleRulesForSlots.ts
@@ -7,19 +7,21 @@ import type { CSSClassesMapBySlot, CSSRulesByBucket, StyleBucketName, StylesBySl
  * Calls resolveStyleRules() for each slot, is also used by build time transform.
  *
  * @param stylesBySlots - An object with makeStyles rules where a key is a slot name
+ * @param classNameHashSalt - A salt for classes hash
  *
  * @return - A tuple with an object classnames mapping where a key is a slot name and an array with CSS rules
  */
 export function resolveStyleRulesForSlots<Slots extends string | number>(
   stylesBySlots: StylesBySlots<Slots>,
+  classNameHashSalt: string = '',
 ): [CSSClassesMapBySlot<Slots>, CSSRulesByBucket] {
   const classesMapBySlot = {} as CSSClassesMapBySlot<Slots>;
   const cssRules: CSSRulesByBucket = {};
 
   // eslint-disable-next-line guard-for-in
   for (const slotName in stylesBySlots) {
     const slotStyles: GriffelStyle = stylesBySlots[slotName];
-    const [cssClassMap, cssRulesByBucket] = resolveStyleRules(slotStyles);
+    const [cssClassMap, cssRulesByBucket] = resolveStyleRules(slotStyles, classNameHashSalt);
 
     classesMapBySlot[slotName] = cssClassMap;
 

diff --git a/packages/core/src/runtime/resolveResetStyleRules.ts b/packages/core/src/runtime/resolveResetStyleRules.ts
@@ -138,10 +138,11 @@ function createStringFromStyles(styles: GriffelResetStyle) {
  */
 export function resolveResetStyleRules(
   styles: GriffelResetStyle,
+  classNameHashSalt: string = '',
 ): [string, string | null, CSSRulesByBucket | string[]] {
   const [ltrRule, rtlRule] = createStringFromStyles(styles);
 
-  const ltrClassName = RESET_HASH_PREFIX + hashString(ltrRule);
+  const ltrClassName = RESET_HASH_PREFIX + hashString(classNameHashSalt + ltrRule);
   const [ltrCSS, ltrCSSAtRules] = compileResetCSSRules(`.${ltrClassName}{${ltrRule}}`);
 
   const hasAtRules = ltrCSSAtRules.length > 0;
@@ -150,7 +151,7 @@ export function resolveResetStyleRules(
     return [ltrClassName, null, hasAtRules ? { r: ltrCSS, s: ltrCSSAtRules } : ltrCSS];
   }
 
-  const rtlClassName = RESET_HASH_PREFIX + hashString(rtlRule);
+  const rtlClassName = RESET_HASH_PREFIX + hashString(classNameHashSalt + rtlRule);
   const [rtlCSS, rtlCSSAtRules] = compileResetCSSRules(`.${rtlClassName}{${rtlRule}}`);
 
   return [

diff --git a/packages/core/src/runtime/resolveStyleRules.ts b/packages/core/src/runtime/resolveStyleRules.ts
@@ -86,6 +86,7 @@ function pushToCSSRules(
  */
 export function resolveStyleRules(
   styles: GriffelStyle,
+  classNameHashSalt: string = '',
   selectors: string[] = [],
   atRules: AtRules = {
     container: '',
@@ -129,14 +130,15 @@ export function resolveStyleRules(
         const shorthandProperties = shorthand[1];
         const shorthandResetStyles = Object.fromEntries(shorthandProperties.map(property => [property, RESET]));
 
-        resolveStyleRules(shorthandResetStyles, selectors, atRules, cssClassesMap, cssRulesByBucket);
+        resolveStyleRules(shorthandResetStyles, classNameHashSalt, selectors, atRules, cssClassesMap, cssRulesByBucket);
       }
 
       // uniq key based on a hash of property & selector, used for merging later
       const key = hashPropertyKey(selector, property, atRules);
       const className = hashClassName(
         {
           value: value.toString(),
+          salt: classNameHashSalt,
           selector,
           property,
         },
@@ -151,6 +153,7 @@ export function resolveStyleRules(
             {
               value: rtlDefinition.value.toString(),
               property: rtlDefinition.key,
+              salt: classNameHashSalt,
               selector,
             },
             atRules,
@@ -228,6 +231,7 @@ export function resolveStyleRules(
 
       resolveStyleRules(
         { animationName: animationNames.join(', ') },
+        classNameHashSalt,
         selectors,
         atRules,
         cssClassesMap,
@@ -252,21 +256,21 @@ export function resolveStyleRules(
         const shorthandProperties = shorthand[1];
         const shorthandResetStyles = Object.fromEntries(shorthandProperties.map(property => [property, RESET]));
 
-        resolveStyleRules(shorthandResetStyles, selectors, atRules, cssClassesMap, cssRulesByBucket);
+        resolveStyleRules(shorthandResetStyles, classNameHashSalt, selectors, atRules, cssClassesMap, cssRulesByBucket);
       }
 
       const key = hashPropertyKey(selector, property, atRules);
       const className = hashClassName(
         {
           value: value.map(v => (v ?? '').toString()).join(';'),
+          salt: classNameHashSalt,
           selector,
           property,
         },
         atRules,
       );
 
       const rtlDefinitions = value.map(v => convertProperty(property, v!));
-
       const rtlPropertyConsistent = !rtlDefinitions.some(v => v.key !== rtlDefinitions[0].key);
 
       if (!rtlPropertyConsistent) {
@@ -284,6 +288,7 @@ export function resolveStyleRules(
         ? hashClassName(
             {
               value: rtlDefinitions.map(v => (v?.value ?? '').toString()).join(';'),
+              salt: classNameHashSalt,
               property: rtlDefinitions[0].key,
               selector,
             },
@@ -324,6 +329,7 @@ export function resolveStyleRules(
       if (isNestedSelector(property)) {
         resolveStyleRules(
           value as GriffelStyle,
+          classNameHashSalt,
           selectors.concat(normalizeNestedProperty(property)),
           atRules,
           cssClassesMap,
@@ -334,6 +340,7 @@ export function resolveStyleRules(
 
         resolveStyleRules(
           value as GriffelStyle,
+          classNameHashSalt,
           selectors,
           { ...atRules, media: combinedMediaQuery },
           cssClassesMap,
@@ -344,6 +351,7 @@ export function resolveStyleRules(
 
         resolveStyleRules(
           value as GriffelStyle,
+          classNameHashSalt,
           selectors,
           { ...atRules, layer: combinedLayerQuery },
           cssClassesMap,
@@ -354,6 +362,7 @@ export function resolveStyleRules(
 
         resolveStyleRules(
           value as GriffelStyle,
+          classNameHashSalt,
           selectors,
           { ...atRules, supports: combinedSupportQuery },
           cssClassesMap,
@@ -367,6 +376,7 @@ export function resolveStyleRules(
 
         resolveStyleRules(
           value as GriffelStyle,
+          classNameHashSalt,
           selectors,
           { ...atRules, container: containerQuery },
           cssClassesMap,

diff --git a/packages/core/src/runtime/utils/hashClassName.test.ts b/packages/core/src/runtime/utils/hashClassName.test.ts
@@ -0,0 +1,31 @@
+import { hashClassName } from './hashClassName';
+
+const defaultOptions = {
+  property: 'color',
+  selector: '',
+  value: 'red',
+
+  salt: '',
+};
+const defaultAtRules = {
+  container: '',
+  media: '',
+  layer: '',
+  supports: '',
+};
+
+describe('hashClassName', () => {
+  it('should hash the className', () => {
+    expect(hashClassName(defaultOptions, defaultAtRules)).toMatchInlineSnapshot(`"fe3e8s9"`);
+  });
+
+  it('should use salt for hash', () => {
+    const withoutSalt = hashClassName(defaultOptions, defaultAtRules);
+    const withSalt = hashClassName({ ...defaultOptions, salt: 'HASH_SALT' }, defaultAtRules);
+
+    expect(withoutSalt).not.toEqual(withSalt);
+
+    expect(withoutSalt).toMatchInlineSnapshot(`"fe3e8s9"`);
+    expect(withSalt).toMatchInlineSnapshot(`"f3mwu0g"`);
+  });
+});
diff --git a/packages/core/src/runtime/utils/hashClassName.ts b/packages/core/src/runtime/utils/hashClassName.ts
@@ -6,14 +6,16 @@ import type { AtRules } from './types';
 interface HashedClassNameParts {
   property: string;
   value: string;
+  salt: string;
   selector: string;
 }
 
-export function hashClassName({ property, selector, value }: HashedClassNameParts, atRules: AtRules): string {
+export function hashClassName({ property, selector, salt, value }: HashedClassNameParts, atRules: AtRules): string {
   return (
     HASH_PREFIX +
     hashString(
-      selector +
+      salt +
+        selector +
         atRules.container +
         atRules.media +
         atRules.layer +

diff --git a/packages/webpack-loader/__fixtures__/config-classname-hash-salt/code.ts b/packages/webpack-loader/__fixtures__/config-classname-hash-salt/code.ts
@@ -0,0 +1,5 @@
+import { makeStyles } from '@griffel/react';
+
+export const styles = makeStyles({
+  root: { color: 'red', paddingLeft: '10px' },
+});
diff --git a/packages/webpack-loader/__fixtures__/config-classname-hash-salt/output.ts b/packages/webpack-loader/__fixtures__/config-classname-hash-salt/output.ts
@@ -0,0 +1,12 @@
+import { __styles } from '@griffel/react';
+export const styles = __styles(
+  {
+    root: {
+      sj55zd: 'f3mwu0g',
+      uwmqm3: ['f1rfztu6', 'f1h66kgv'],
+    },
+  },
+  {
+    d: ['.f3mwu0g{color:red;}', '.f1rfztu6{padding-left:10px;}', '.f1h66kgv{padding-right:10px;}'],
+  },
+);
diff --git a/packages/webpack-loader/src/webpackLoader.test.ts b/packages/webpack-loader/src/webpackLoader.test.ts
@@ -235,6 +235,12 @@ describe('webpackLoader', () => {
   testFixture('empty');
 
   // Integration fixtures for config functionality
+  testFixture('config-classname-hash-salt', {
+    loaderOptions: {
+      classNameHashSalt: 'HASH_SALT',
+    },
+  });
+
   testFixture('config-modules', {
     loaderOptions: {
       modules: [{ moduleSource: 'react-make-styles', importName: 'makeStyles' }],