breaking: remove "unstable_cssPriority" from makeStyles() (#21263)

* breaking: remove "unstable_cssPriority" from makeStyles() * Change files * update API * adopt API changes from makeStyles * Change files * remove wrapping functions * update changelog entry
microsoft · Jan 13, 2022 · fc9a2a4 · fc9a2a4
1 parent 5a51c79
commit fc9a2a4
Show file tree

Hide file tree

Showing 13 changed files with 39 additions and 144 deletions.
diff --git a/change/@fluentui-babel-make-styles-9be0a866-541e-411f-9491-255721765189.json b/change/@fluentui-babel-make-styles-9be0a866-541e-411f-9491-255721765189.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "makeStyles: remove \"unstable_cssPriority\"",
+  "packageName": "@fluentui/babel-make-styles",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-make-styles-aa90f6a3-90d7-4f45-b4aa-7b19ac176643.json b/change/@fluentui-make-styles-aa90f6a3-90d7-4f45-b4aa-7b19ac176643.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "breaking: remove \"unstable_cssPriority\" from makeStyles()",
+  "packageName": "@fluentui/make-styles",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/babel-make-styles/src/plugin.ts b/packages/babel-make-styles/src/plugin.ts
@@ -587,7 +587,7 @@ export const plugin = declare<Partial<BabelPluginOptions>, PluginObj<BabelPlugin
             }
 
             const stylesBySlots: Record<string /* slot */, MakeStylesStyle> = evaluationResult.value;
-            const [classnamesMapping, cssRules] = resolveStyleRulesForSlots(stylesBySlots, 0);
+            const [classnamesMapping, cssRules] = resolveStyleRulesForSlots(stylesBySlots);
 
             // TODO: find a better way to replace arguments
             callExpressionPath.node.arguments = [astify(classnamesMapping), astify(dedupeCSSRules(cssRules))];

diff --git a/packages/make-styles/etc/make-styles.api.md b/packages/make-styles/etc/make-styles.api.md
@@ -91,7 +91,7 @@ export type MakeStaticStylesStyle = {
 // Warning: (ae-forgotten-export) The symbol "StylesBySlots" needs to be exported by the entry point index.d.ts
 //
 // @public (undocumented)
-export function makeStyles<Slots extends string | number>(stylesBySlots: StylesBySlots<Slots>, unstable_cssPriority?: number): (options: MakeStylesOptions) => Record<Slots, string>;
+export function makeStyles<Slots extends string | number>(stylesBySlots: StylesBySlots<Slots>): (options: MakeStylesOptions) => Record<Slots, string>;
 
 // Warning: (ae-forgotten-export) The symbol "MakeStylesCSSObjectCustomL1" needs to be exported by the entry point index.d.ts
 //
@@ -137,10 +137,10 @@ export function resolveProxyValues<T>(value: T): T;
 // Warning: (ae-internal-missing-underscore) The name "resolveStyleRules" should be prefixed with an underscore because the declaration is marked as @internal
 //
 // @internal
-export function resolveStyleRules(styles: MakeStylesStyle, unstable_cssPriority?: number): [CSSClassesMap, CSSRulesByBucket];
+export function resolveStyleRules(styles: MakeStylesStyle, pseudo?: string, media?: string, support?: string, cssClassesMap?: CSSClassesMap, cssRulesByBucket?: CSSRulesByBucket, rtlValue?: string): [CSSClassesMap, CSSRulesByBucket];
 
 // @public
-export function resolveStyleRulesForSlots<Slots extends string | number>(stylesBySlots: StylesBySlots<Slots>, unstable_cssPriority: number): [CSSClassesMapBySlot<Slots>, CSSRulesByBucket];
+export function resolveStyleRulesForSlots<Slots extends string | number>(stylesBySlots: StylesBySlots<Slots>): [CSSClassesMapBySlot<Slots>, CSSRulesByBucket];
 
 // Warning: (ae-internal-missing-underscore) The name "SEQUENCE_HASH_LENGTH" should be prefixed with an underscore because the declaration is marked as @internal
 //

diff --git a/packages/make-styles/src/makeStyles.ts b/packages/make-styles/src/makeStyles.ts
@@ -2,10 +2,7 @@ import { reduceToClassNameForSlots } from './runtime/reduceToClassNameForSlots';
 import { resolveStyleRulesForSlots } from './resolveStyleRulesForSlots';
 import { CSSClassesMapBySlot, CSSRulesByBucket, MakeStylesOptions, StylesBySlots } from './types';
 
-export function makeStyles<Slots extends string | number>(
-  stylesBySlots: StylesBySlots<Slots>,
-  unstable_cssPriority: number = 0,
-) {
+export function makeStyles<Slots extends string | number>(stylesBySlots: StylesBySlots<Slots>) {
   const insertionCache: Record<string, boolean> = {};
 
   let classesMapBySlot: CSSClassesMapBySlot<Slots> | null = null;
@@ -18,7 +15,7 @@ export function makeStyles<Slots extends string | number>(
     const { dir, renderer } = options;
 
     if (classesMapBySlot === null) {
-      [classesMapBySlot, cssRules] = resolveStyleRulesForSlots(stylesBySlots, unstable_cssPriority);
+      [classesMapBySlot, cssRules] = resolveStyleRulesForSlots(stylesBySlots);
     }
 
     const isLTR = dir === 'ltr';

diff --git a/packages/make-styles/src/mergeClasses.test.ts b/packages/make-styles/src/mergeClasses.test.ts
@@ -159,14 +159,4 @@ describe('mergeClasses', () => {
       expect(mergeClasses(rtlClassName1, rtlClassName2)).toBe('___w1tqsn0 fe3e8s9 f81rol6');
     });
   });
-
-  describe('unstable functionality', () => {
-    it('deduplicates classes with mixed priority', () => {
-      // Classnames with numeric suffix has increased specificity
-      const className1 = makeStyles({ root: { display: 'grid' } })(options).root;
-      const className2 = makeStyles({ root: { display: 'flex' } }, 1)(options).root;
-
-      expect(mergeClasses(className1, className2)).toBe(className2);
-    });
-  });
 });
diff --git a/packages/make-styles/src/resolveStyleRulesForSlots.test.ts b/packages/make-styles/src/resolveStyleRulesForSlots.test.ts
@@ -8,7 +8,7 @@ describe('resolveStyleRulesForSlots', () => {
       icon: { color: 'blue', backgroundColor: 'lightblue' },
     };
 
-    expect(resolveStyleRulesForSlots(stylesBySlots, 0)).toMatchInlineSnapshot(`
+    expect(resolveStyleRulesForSlots(stylesBySlots)).toMatchInlineSnapshot(`
       Array [
         Object {
           "icon": Object {

diff --git a/packages/make-styles/src/resolveStyleRulesForSlots.ts b/packages/make-styles/src/resolveStyleRulesForSlots.ts
@@ -5,21 +5,19 @@ import { CSSClassesMapBySlot, CSSRulesByBucket, MakeStylesStyle, StyleBucketName
  * 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 unstable_cssPriority - Defines priority for selectors of generated CSS rules
  *
  * @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>,
-  unstable_cssPriority: number,
 ): [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: MakeStylesStyle = stylesBySlots[slotName];
-    const [cssClassMap, cssRulesByBucket] = resolveStyleRules(slotStyles, unstable_cssPriority);
+    const [cssClassMap, cssRulesByBucket] = resolveStyleRules(slotStyles);
 
     classesMapBySlot[slotName] = cssClassMap;
 

diff --git a/packages/make-styles/src/runtime/compileCSS.test.ts b/packages/make-styles/src/runtime/compileCSS.test.ts
@@ -1,16 +1,11 @@
 import { compileCSS, CompileCSSOptions, normalizePseudoSelector } from './compileCSS';
 
-const defaultOptions: Pick<
-  CompileCSSOptions,
-  'rtlClassName' | 'className' | 'media' | 'pseudo' | 'support' | 'unstable_cssPriority'
-> = {
+const defaultOptions: Pick<CompileCSSOptions, 'rtlClassName' | 'className' | 'media' | 'pseudo' | 'support'> = {
   className: 'foo',
   rtlClassName: 'rtl-foo',
   media: '',
   pseudo: '',
   support: '',
-
-  unstable_cssPriority: 0,
 };
 
 describe('compileCSS', () => {

diff --git a/packages/make-styles/src/runtime/compileCSS.ts b/packages/make-styles/src/runtime/compileCSS.ts
@@ -12,7 +12,6 @@ export interface CompileCSSOptions {
 
   property: string;
   value: number | string;
-  unstable_cssPriority: number;
 
   rtlClassName?: string;
   rtlProperty?: string;
@@ -21,10 +20,6 @@ export interface CompileCSSOptions {
 
 const PSEUDO_SELECTOR_REGEX = /,( *[^ &])/g;
 
-function repeatSelector(selector: string, times: number) {
-  return new Array(times + 2).join(selector);
-}
-
 /**
  * Normalizes pseudo selectors to always contain &, requires to work properly with comma-separated selectors.
  *
@@ -65,27 +60,16 @@ export function compileCSSRules(cssRules: string): string[] {
 }
 
 export function compileCSS(options: CompileCSSOptions): [string /* ltr definition */, string? /* rtl definition */] {
-  const {
-    className,
-    media,
-    pseudo,
-    support,
-    property,
-    rtlClassName,
-    rtlProperty,
-    rtlValue,
-    value,
-    unstable_cssPriority,
-  } = options;
-
-  const classNameSelector = repeatSelector(`.${className}`, unstable_cssPriority);
+  const { className, media, pseudo, support, property, rtlClassName, rtlProperty, rtlValue, value } = options;
+
+  const classNameSelector = `.${className}`;
   const cssDeclaration = `{ ${hyphenateProperty(property)}: ${value}; }`;
 
   let rtlClassNameSelector: string | null = null;
   let rtlCSSDeclaration: string | null = null;
 
   if (rtlProperty && rtlClassName) {
-    rtlClassNameSelector = repeatSelector(`.${rtlClassName}`, unstable_cssPriority);
+    rtlClassNameSelector = `.${rtlClassName}`;
     rtlCSSDeclaration = `{ ${hyphenateProperty(rtlProperty)}: ${rtlValue}; }`;
   }
 

diff --git a/packages/make-styles/src/runtime/resolveStyleRules.test.ts b/packages/make-styles/src/runtime/resolveStyleRules.test.ts
@@ -617,59 +617,4 @@ describe('resolveStyleRules', () => {
       });
     });
   });
-
-  describe('experimental', () => {
-    it('allows to increase specificity', () => {
-      expect(resolveStyleRules({ color: 'red' }, 1)).toMatchInlineSnapshot(`
-        .fe3e8s91.fe3e8s91 {
-          color: red;
-        }
-      `);
-      expect(resolveStyleRules({ color: 'red' }, 2)).toMatchInlineSnapshot(`
-        .fe3e8s92.fe3e8s92.fe3e8s92 {
-          color: red;
-        }
-      `);
-    });
-
-    it('allows to increase for media queries', () => {
-      expect(
-        resolveStyleRules(
-          {
-            '@media screen and (max-width: 992px)': {
-              color: 'red',
-            },
-          },
-          1,
-        ),
-      ).toMatchInlineSnapshot(`
-        @media screen and (max-width: 992px) {
-          .f1ojdyje1.f1ojdyje1 {
-            color: red;
-          }
-        }
-      `);
-    });
-
-    it('allows to increase for RTL', () => {
-      expect(resolveStyleRules({ left: '5px' }, 1)).toMatchInlineSnapshot(`
-        .f5b3q4t1.f5b3q4t1 {
-          left: 5px;
-        }
-        .flgfsvn1.flgfsvn1 {
-          right: 5px;
-        }
-      `);
-    });
-
-    it('generates unique classnames with different specificity', () => {
-      const classnamesSet = new Set<string>();
-
-      classnamesSet.add(getFirstClassName(resolveStyleRules({ color: 'red' })));
-      classnamesSet.add(getFirstClassName(resolveStyleRules({ color: 'red' }, 1)));
-      classnamesSet.add(getFirstClassName(resolveStyleRules({ color: 'red' }, 2)));
-
-      expect(classnamesSet.size).toBe(3);
-    });
-  });
 });
diff --git a/packages/make-styles/src/runtime/resolveStyleRules.ts b/packages/make-styles/src/runtime/resolveStyleRules.ts
@@ -13,7 +13,6 @@ import { normalizeNestedProperty } from './utils/normalizeNestedProperty';
 import { isObject } from './utils/isObject';
 import { getStyleBucketName } from './getStyleBucketName';
 import { hashClassName } from './utils/hashClassName';
-import { resolveProxyValues } from './createCSSVariablesProxy';
 import { hashPropertyKey } from './utils/hashPropertyKey';
 
 function pushToClassesMap(
@@ -39,9 +38,13 @@ function pushToCSSRules(
   }
 }
 
-function resolveStyleRulesInner(
+/**
+ * Transforms input styles to classes maps & CSS rules.
+ *
+ * @internal
+ */
+export function resolveStyleRules(
   styles: MakeStylesStyle,
-  unstable_cssPriority: number = 0,
   pseudo = '',
   media = '',
   support = '',
@@ -67,7 +70,6 @@ function resolveStyleRulesInner(
         support,
         pseudo,
         property,
-        unstable_cssPriority,
       });
 
       const rtlDefinition = (rtlValue && { key: property, value: rtlValue }) || convertProperty(property, value);
@@ -80,7 +82,6 @@ function resolveStyleRulesInner(
             pseudo,
             media,
             support,
-            unstable_cssPriority,
           })
         : undefined;
       const rtlCompileOptions: Partial<CompileCSSOptions> | undefined = flippedInRtl
@@ -99,7 +100,6 @@ function resolveStyleRulesInner(
         property,
         support,
         value,
-        unstable_cssPriority,
         ...rtlCompileOptions,
       });
 
@@ -145,9 +145,8 @@ function resolveStyleRulesInner(
         rtlAnimationNames.push(rtlAnimationName);
       }
 
-      resolveStyleRulesInner(
+      resolveStyleRules(
         { animationName: animationNames.join(', ') },
-        unstable_cssPriority,
         pseudo,
         media,
         support,
@@ -157,9 +156,8 @@ function resolveStyleRulesInner(
       );
     } else if (isObject(value)) {
       if (isNestedSelector(property)) {
-        resolveStyleRulesInner(
+        resolveStyleRules(
           value as MakeStylesStyle,
-          unstable_cssPriority,
           pseudo + normalizeNestedProperty(property),
           media,
           support,
@@ -169,9 +167,8 @@ function resolveStyleRulesInner(
       } else if (isMediaQuerySelector(property)) {
         const combinedMediaQuery = generateCombinedQuery(media, property.slice(6).trim());
 
-        resolveStyleRulesInner(
+        resolveStyleRules(
           value as MakeStylesStyle,
-          unstable_cssPriority,
           pseudo,
           combinedMediaQuery,
           support,
@@ -181,9 +178,8 @@ function resolveStyleRulesInner(
       } else if (isSupportQuerySelector(property)) {
         const combinedSupportQuery = generateCombinedQuery(support, property.slice(9).trim());
 
-        resolveStyleRulesInner(
+        resolveStyleRules(
           value as MakeStylesStyle,
-          unstable_cssPriority,
           pseudo,
           media,
           combinedSupportQuery,
@@ -201,19 +197,3 @@ function resolveStyleRulesInner(
 
   return [cssClassesMap, cssRulesByBucket];
 }
-
-/**
- * Transforms input styles to classes maps & CSS rules.
- *
- * @internal
- */
-export function resolveStyleRules(
-  styles: MakeStylesStyle,
-  unstable_cssPriority: number = 0,
-): [CSSClassesMap, CSSRulesByBucket] {
-  return resolveStyleRulesInner(
-    // resolveProxyValues() is recursive function and should be evaluated once for a style object
-    resolveProxyValues(styles),
-    unstable_cssPriority,
-  );
-}
diff --git a/packages/make-styles/src/runtime/utils/hashClassName.ts b/packages/make-styles/src/runtime/utils/hashClassName.ts
@@ -7,19 +7,11 @@ export interface HashedClassNameParts {
   pseudo: string;
   media: string;
   support: string;
-  unstable_cssPriority: number;
 }
 
-export function hashClassName({
-  media,
-  property,
-  pseudo,
-  support,
-  value,
-  unstable_cssPriority,
-}: HashedClassNameParts): string {
+export function hashClassName({ media, property, pseudo, support, value }: HashedClassNameParts): string {
   // Trimming of value is required to generate consistent hashes
   const classNameHash = hashString(pseudo + media + support + property + value.trim());
 
-  return HASH_PREFIX + classNameHash + (unstable_cssPriority === 0 ? '' : unstable_cssPriority);
+  return HASH_PREFIX + classNameHash;
 }