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 new file mode 100644 index 00000000000000..0701ab14e6f6d8 --- /dev/null +++ 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": "olfedias@microsoft.com", + "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 new file mode 100644 index 00000000000000..e474fa365371d9 --- /dev/null +++ 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": "olfedias@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/babel-make-styles/src/plugin.ts b/packages/babel-make-styles/src/plugin.ts index 0f972fdb116950..8d43d73335fefb 100644 --- a/packages/babel-make-styles/src/plugin.ts +++ b/packages/babel-make-styles/src/plugin.ts @@ -587,7 +587,7 @@ export const plugin = declare, PluginObj = 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 index 4e5735005e8d52..e9ca1da1573555 100644 --- 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(stylesBySlots: StylesBySlots, unstable_cssPriority?: number): (options: MakeStylesOptions) => Record; +export function makeStyles(stylesBySlots: StylesBySlots): (options: MakeStylesOptions) => Record; // 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(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(stylesBySlots: StylesBySlots, unstable_cssPriority: number): [CSSClassesMapBySlot, CSSRulesByBucket]; +export function resolveStyleRulesForSlots(stylesBySlots: StylesBySlots): [CSSClassesMapBySlot, 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 index 3da563558bb41c..078572e27b9b4d 100644 --- 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( - stylesBySlots: StylesBySlots, - unstable_cssPriority: number = 0, -) { +export function makeStyles(stylesBySlots: StylesBySlots) { const insertionCache: Record = {}; let classesMapBySlot: CSSClassesMapBySlot | null = null; @@ -18,7 +15,7 @@ export function makeStyles( 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 index 528d8d5d32820b..0bf045335a627d 100644 --- 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 index 15a6cbd463c1f9..420629ee918aba 100644 --- 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 index 198a15cd5c3b86..eb2d7b54f77da5 100644 --- a/packages/make-styles/src/resolveStyleRulesForSlots.ts +++ b/packages/make-styles/src/resolveStyleRulesForSlots.ts @@ -5,13 +5,11 @@ 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( stylesBySlots: StylesBySlots, - unstable_cssPriority: number, ): [CSSClassesMapBySlot, CSSRulesByBucket] { const classesMapBySlot = {} as CSSClassesMapBySlot; const cssRules: CSSRulesByBucket = {}; @@ -19,7 +17,7 @@ export function resolveStyleRulesForSlots( // 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 index 57605623fa430f..47a977b74956ca 100644 --- 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 = { 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 index 4a3226a6df5c4b..79c73d5880b030 100644 --- 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 index b175b2d2af6ca8..868c70b00fad41 100644 --- 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(); - - 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 index 906becb2890790..9d51a769627928 100644 --- 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 | 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 index 4ce302b96dbc50..c2cf3694f81333 100644 --- 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; }