From 28de5be6cc19ba20cb65fd431620c5a5d5608204 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Mon, 8 Nov 2021 12:17:42 +0100 Subject: [PATCH 1/7] fix: update types to disable shorthands --- ...-e07c8cfd-109b-4600-a22d-c417d0ec63e5.json | 7 + packages/make-styles/etc/make-styles.api.md | 6 +- packages/make-styles/package.json | 1 - packages/make-styles/src/mergeClasses.test.ts | 16 +- .../src/resolveStyleRulesForSlots.test.ts | 12 +- .../runtime/createCSSVariablesProxy.test.ts | 32 ++-- .../src/runtime/expandShorthand.test.ts | 54 ------- .../src/runtime/expandShorthand.ts | 36 ----- .../src/runtime/resolveStyleRules.test.ts | 93 ------------ .../src/runtime/resolveStyleRules.ts | 5 +- packages/make-styles/src/types.test.ts | 137 ++++++++++++++++++ packages/make-styles/src/types.ts | 81 ++++++++++- 12 files changed, 251 insertions(+), 229 deletions(-) create mode 100644 change/@fluentui-make-styles-e07c8cfd-109b-4600-a22d-c417d0ec63e5.json delete mode 100644 packages/make-styles/src/runtime/expandShorthand.test.ts delete mode 100644 packages/make-styles/src/runtime/expandShorthand.ts create mode 100644 packages/make-styles/src/types.test.ts diff --git a/change/@fluentui-make-styles-e07c8cfd-109b-4600-a22d-c417d0ec63e5.json b/change/@fluentui-make-styles-e07c8cfd-109b-4600-a22d-c417d0ec63e5.json new file mode 100644 index 00000000000000..fb4dd6eb17cd54 --- /dev/null +++ b/change/@fluentui-make-styles-e07c8cfd-109b-4600-a22d-c417d0ec63e5.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "block usage of CSS shorthands in typings, remove CSS shorthands expansion", + "packageName": "@fluentui/make-styles", + "email": "olfedias@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/make-styles/etc/make-styles.api.md b/packages/make-styles/etc/make-styles.api.md index 59c29b5fec18eb..a6891db2045ddb 100644 --- a/packages/make-styles/etc/make-styles.api.md +++ b/packages/make-styles/etc/make-styles.api.md @@ -93,10 +93,10 @@ export type MakeStaticStylesStyle = { // @public (undocumented) export function makeStyles(stylesBySlots: StylesBySlots, unstable_cssPriority?: number): (options: MakeStylesOptions) => Record; -// Warning: (ae-forgotten-export) The symbol "MakeStylesCSSObjectCustom" needs to be exported by the entry point index.d.ts +// Warning: (ae-forgotten-export) The symbol "MakeStylesCSSObjectCustomL1" needs to be exported by the entry point index.d.ts // // @public (undocumented) -export type MakeStylesAnimation = Record<'from' | 'to' | string, MakeStylesCSSObjectCustom>; +export type MakeStylesAnimation = Record<'from' | 'to' | string, MakeStylesCSSObjectCustomL1>; // @public (undocumented) export interface MakeStylesOptions { @@ -121,7 +121,7 @@ export interface MakeStylesRenderer { // Warning: (ae-forgotten-export) The symbol "MakeStylesStrictCSSObject" needs to be exported by the entry point index.d.ts // // @public (undocumented) -export type MakeStylesStyle = MakeStylesStrictCSSObject | MakeStylesCSSObjectCustom; +export type MakeStylesStyle = MakeStylesStrictCSSObject | MakeStylesCSSObjectCustomL1; // @public (undocumented) export type MakeStylesStyleFunctionRule = (tokens: Tokens) => MakeStylesStyle; diff --git a/packages/make-styles/package.json b/packages/make-styles/package.json index 3d32cf4c2e9640..744db4f17a4ecf 100644 --- a/packages/make-styles/package.json +++ b/packages/make-styles/package.json @@ -30,7 +30,6 @@ "dependencies": { "@emotion/hash": "^0.8.0", "csstype": "^2.6.7", - "inline-style-expand-shorthand": "^1.2.0", "rtl-css-js": "^1.14.5", "stylis": "^4.0.6", "tslib": "^2.1.0" diff --git a/packages/make-styles/src/mergeClasses.test.ts b/packages/make-styles/src/mergeClasses.test.ts index a4044d1bfc0a72..7e6471689915dd 100644 --- a/packages/make-styles/src/mergeClasses.test.ts +++ b/packages/make-styles/src/mergeClasses.test.ts @@ -38,10 +38,10 @@ describe('mergeClasses', () => { block: { display: 'block' }, flex: { display: 'flex' }, grid: { display: 'grid' }, - padding: { padding: '5px' }, + padding: { paddingLeft: '5px' }, })(options); - const resultClassName = makeStyles({ root: { display: 'grid', padding: '5px' } })(options).root; + const resultClassName = makeStyles({ root: { display: 'grid', paddingLeft: '5px' } })(options).root; expect(mergeClasses(classes.block, classes.flex, classes.grid, classes.padding)).toBe(resultClassName); }); @@ -70,15 +70,15 @@ describe('mergeClasses', () => { const sequence1 = mergeClasses('ui-button', className1, className2); const className3 = makeStyles({ root: { display: 'grid' } })(options).root; - const className4 = makeStyles({ root: { padding: '5px' } })(options).root; + const className4 = makeStyles({ root: { paddingLeft: '5px' } })(options).root; const className5 = makeStyles({ root: { marginTop: '5px' } })(options).root; const sequence2 = mergeClasses('ui-flex', className3, className4); const sequence3 = mergeClasses(sequence1, sequence2, className5); expect(sequence1).toBe(`ui-button ${className2}`); - expect(sequence2).toBe('ui-flex ___wz3cad0 f13qh94s f1sbtcvk fwiuce9 fdghr9 f15vdbe4'); - expect(sequence3).toBe('ui-button ui-flex ___gpv7qo0 f13qh94s f1sbtcvk fwiuce9 fdghr9 f15vdbe4 f1rqyxcv'); + expect(sequence2).toBe('ui-flex ___nsiv7r0 f13qh94s f15vdbe4'); + expect(sequence3).toBe('ui-button ui-flex ___ma4nwa0 f13qh94s f15vdbe4 f1rqyxcv'); }); it('warns if an unregistered sequence was passed', () => { @@ -118,8 +118,8 @@ describe('mergeClasses', () => { describe('"dir" option', () => { it('performs deduplication for RTL classes', () => { const computeClasses = makeStyles({ - start: { borderLeft: '5px' }, - end: { borderRight: '5px' }, + start: { borderRightWidth: '5px' }, + end: { borderRightWidth: '5px' }, }); const rtlClasses1 = computeClasses({ ...options, dir: 'rtl' }); @@ -129,7 +129,7 @@ describe('mergeClasses', () => { expect(mergeClasses(rtlClasses1.start, rtlClasses2.start)).toBe(rtlClasses2.start); expect(mergeClasses(rtlClasses1.start, rtlClasses2.start, rtlClasses1.end, rtlClasses2.end)).toBe( - '___1soy3ld f93e62u fo2qazs', + '___o93f2j0 fo2qazs', ); }); diff --git a/packages/make-styles/src/resolveStyleRulesForSlots.test.ts b/packages/make-styles/src/resolveStyleRulesForSlots.test.ts index 5286bc0544f85c..76f6de47d05fef 100644 --- a/packages/make-styles/src/resolveStyleRulesForSlots.test.ts +++ b/packages/make-styles/src/resolveStyleRulesForSlots.test.ts @@ -4,28 +4,28 @@ import { StylesBySlots } from './types'; describe('resolveStyleRulesForSlots', () => { it('returns classnames and CSS rules to apply', () => { const stylesBySlots: StylesBySlots<'root' | 'icon', never> = { - root: { color: 'red', background: 'pink' }, - icon: { color: 'blue', background: 'lightblue' }, + root: { color: 'red', backgroundColor: 'pink' }, + icon: { color: 'blue', backgroundColor: 'lightblue' }, }; expect(resolveStyleRulesForSlots(stylesBySlots, 0)).toMatchInlineSnapshot(` Array [ Object { "icon": Object { - "ayd6f0": "fmqh8ev", + "De3pzq": "f1ta0kgp", "sj55zd": "f163i14w", }, "root": Object { - "ayd6f0": "fwix7fp", + "De3pzq": "fnf68zh", "sj55zd": "fe3e8s9", }, }, Object { "d": Array [ ".fe3e8s9{color:red;}", - ".fwix7fp{background:pink;}", + ".fnf68zh{background-color:pink;}", ".f163i14w{color:blue;}", - ".fmqh8ev{background:lightblue;}", + ".f1ta0kgp{background-color:lightblue;}", ], }, ] diff --git a/packages/make-styles/src/runtime/createCSSVariablesProxy.test.ts b/packages/make-styles/src/runtime/createCSSVariablesProxy.test.ts index 97fc263f836066..4c720dffa9c82e 100644 --- a/packages/make-styles/src/runtime/createCSSVariablesProxy.test.ts +++ b/packages/make-styles/src/runtime/createCSSVariablesProxy.test.ts @@ -1,5 +1,4 @@ import { createCSSVariablesProxy, isProxy, resolveProxyValues } from './createCSSVariablesProxy'; -import { expand } from 'inline-style-expand-shorthand'; describe('createCSSVariablesProxy', () => { it('should be able to identify as a proxy', () => { @@ -17,26 +16,21 @@ describe('createCSSVariablesProxy', () => { it('should be able to expand objects containing proxies as properties', () => { const proxy = createCSSVariablesProxy() as { to: { string: object } }; expect(Array.isArray(proxy)).toEqual(false); - const expanded = expand( - resolveProxyValues({ - padding: proxy.to.string, - animationName: { - from: { - transform: proxy.to.string, - }, - to: { - transform: proxy.to.string, - }, + const expanded = resolveProxyValues({ + padding: proxy.to.string, + animationName: { + from: { + transform: proxy.to.string, + }, + to: { + transform: proxy.to.string, }, - animationIterationCount: proxy.to.string, - animationDuration: proxy.to.string, - }), - ); + }, + animationIterationCount: proxy.to.string, + animationDuration: proxy.to.string, + }); expect(expanded).toEqual({ - paddingTop: 'var(--to-string)', - paddingRight: 'var(--to-string)', - paddingBottom: 'var(--to-string)', - paddingLeft: 'var(--to-string)', + padding: 'var(--to-string)', animationName: { from: { transform: 'var(--to-string)', diff --git a/packages/make-styles/src/runtime/expandShorthand.test.ts b/packages/make-styles/src/runtime/expandShorthand.test.ts deleted file mode 100644 index 81d5dfea80b7af..00000000000000 --- a/packages/make-styles/src/runtime/expandShorthand.test.ts +++ /dev/null @@ -1,54 +0,0 @@ -import { expandShorthand } from './expandShorthand'; - -describe('expandShorthand', () => { - it('should expand a mix of shorthands and longhands based on order', () => { - expect(expandShorthand({ marginLeft: '10px', margin: '5px' })).toMatchInlineSnapshot(` - Object { - "marginBottom": "5px", - "marginLeft": "5px", - "marginRight": "5px", - "marginTop": "5px", - } - `); - expect(expandShorthand({ margin: '5px', marginLeft: '10px' })).toMatchInlineSnapshot(` - Object { - "marginBottom": "5px", - "marginLeft": "10px", - "marginRight": "5px", - "marginTop": "5px", - } - `); - expect(expandShorthand({ marginRight: '10px', margin: '5px', marginLeft: '10px' })).toMatchInlineSnapshot(` - Object { - "marginBottom": "5px", - "marginLeft": "10px", - "marginRight": "5px", - "marginTop": "5px", - } - `); - }); - - it('"undefined" is ignored', () => { - expect(expandShorthand({ margin: '5px', marginLeft: undefined })).toMatchInlineSnapshot(` - Object { - "marginBottom": "5px", - "marginLeft": "5px", - "marginRight": "5px", - "marginTop": "5px", - } - `); - }); - - it('should expand nested objects', () => { - expect(expandShorthand({ ':hover': { padding: '10px' } })).toMatchInlineSnapshot(` - Object { - ":hover": Object { - "paddingBottom": "10px", - "paddingLeft": "10px", - "paddingRight": "10px", - "paddingTop": "10px", - }, - } - `); - }); -}); diff --git a/packages/make-styles/src/runtime/expandShorthand.ts b/packages/make-styles/src/runtime/expandShorthand.ts deleted file mode 100644 index f8b8cc88ac58bc..00000000000000 --- a/packages/make-styles/src/runtime/expandShorthand.ts +++ /dev/null @@ -1,36 +0,0 @@ -import { expandProperty } from 'inline-style-expand-shorthand'; -import { MakeStylesStyle } from '../types'; - -/** - * A function that expands longhand properties ("margin", "padding") to their shorthand versions ("margin-left", etc.). - * Follows CSS-like order in expansion i.e. last defined property wins. - */ -export function expandShorthand(style: MakeStylesStyle, result: MakeStylesStyle = {}): MakeStylesStyle { - // eslint-disable-next-line guard-for-in - for (const property in style) { - const value = style[property as keyof MakeStylesStyle]; - - if (typeof value === 'string' || typeof value === 'number') { - const expansion = expandProperty(property, value); - - if (expansion) { - Object.assign(result, expansion); - } else { - // Cast to any to avoid "error TS2590: Expression produces a union type that is too complex to represent" - // eslint-disable-next-line @typescript-eslint/no-explicit-any - (result as any)[property as keyof MakeStylesStyle] = value; - // result[property as keyof MakeStylesStyle] = value; - } - // eslint-disable-next-line eqeqeq - } else if (value == null) { - // should skip - } else if (Array.isArray(value)) { - result[property as 'animationName'] = value; - } else if (typeof value === 'object') { - // eslint-disable-next-line @typescript-eslint/no-explicit-any - (result as any)[property as keyof MakeStylesStyle] = expandShorthand(value as MakeStylesStyle); - } - } - - return result; -} diff --git a/packages/make-styles/src/runtime/resolveStyleRules.test.ts b/packages/make-styles/src/runtime/resolveStyleRules.test.ts index 758f22192fa312..b175b2d2af6ca8 100644 --- a/packages/make-styles/src/runtime/resolveStyleRules.test.ts +++ b/packages/make-styles/src/runtime/resolveStyleRules.test.ts @@ -117,99 +117,6 @@ describe('resolveStyleRules', () => { `); }); - it('performs expansion of shorthands', () => { - expect(resolveStyleRules({ outline: '1px' })).toMatchInlineSnapshot(` - .fpvhumw { - outline-width: 1px; - } - `); - expect(resolveStyleRules({ padding: '5px' })).toMatchInlineSnapshot(` - .f1sbtcvk { - padding-top: 5px; - } - .fwiuce9 { - padding-right: 5px; - } - .f15vdbe4 { - padding-left: 5px; - } - .fdghr9 { - padding-bottom: 5px; - } - .f15vdbe4 { - padding-left: 5px; - } - .fwiuce9 { - padding-right: 5px; - } - `); - }); - - it('performs expansion of shorthands on nested objects', () => { - expect(resolveStyleRules({ outline: '1px', ':hover': { outline: '5px' } })).toMatchInlineSnapshot(` - .fpvhumw { - outline-width: 1px; - } - .fmcm1e3:hover { - outline-width: 5px; - } - `); - }); - - it('shorthands and longhands work like in CSS', () => { - expect( - resolveStyleRules({ - margin: '5px', - marginLeft: '10px', - }), - ).toMatchInlineSnapshot(` - .f1rqyxcv { - margin-top: 5px; - } - .fq02s40 { - margin-right: 5px; - } - .f1f7bkv5 { - margin-left: 5px; - } - .f475ppk { - margin-bottom: 5px; - } - .f1oou7ox { - margin-left: 10px; - } - .f1pxv85q { - margin-right: 10px; - } - `); - - expect( - resolveStyleRules({ - marginLeft: '10px', - margin: '5px', - }), - ).toMatchInlineSnapshot(` - .f1f7bkv5 { - margin-left: 5px; - } - .fq02s40 { - margin-right: 5px; - } - .f1rqyxcv { - margin-top: 5px; - } - .fq02s40 { - margin-right: 5px; - } - .f1f7bkv5 { - margin-left: 5px; - } - .f475ppk { - margin-bottom: 5px; - } - `); - }); - it('performs vendor prefixing', () => { expect(resolveStyleRules({ display: 'flex' })).toMatchInlineSnapshot(` .f22iagw { diff --git a/packages/make-styles/src/runtime/resolveStyleRules.ts b/packages/make-styles/src/runtime/resolveStyleRules.ts index 06a26df53a551b..b834497cd7ea14 100644 --- a/packages/make-styles/src/runtime/resolveStyleRules.ts +++ b/packages/make-styles/src/runtime/resolveStyleRules.ts @@ -5,7 +5,6 @@ import { HASH_PREFIX } from '../constants'; import { MakeStylesStyle, CSSClassesMap, CSSRulesByBucket, StyleBucketName, MakeStylesAnimation } from '../types'; import { compileCSS, CompileCSSOptions } from './compileCSS'; import { compileKeyframeRule, compileKeyframesCSS } from './compileKeyframeCSS'; -import { expandShorthand } from './expandShorthand'; import { generateCombinedQuery } from './utils/generateCombinedMediaQuery'; import { isMediaQuerySelector } from './utils/isMediaQuerySelector'; import { isNestedSelector } from './utils/isNestedSelector'; @@ -212,8 +211,8 @@ export function resolveStyleRules( styles: MakeStylesStyle, unstable_cssPriority: number = 0, ): [CSSClassesMap, CSSRulesByBucket] { - // expandShorthand() and resolveProxyValues() are recursive functions and should be evaluated once for a style object - const expandedStyles: MakeStylesStyle = expandShorthand(resolveProxyValues(styles)); + // resolveProxyValues() is recursive function and should be evaluated once for a style object + const expandedStyles: MakeStylesStyle = resolveProxyValues(styles); return resolveStyleRulesInner(expandedStyles, unstable_cssPriority); } diff --git a/packages/make-styles/src/types.test.ts b/packages/make-styles/src/types.test.ts new file mode 100644 index 00000000000000..cb418f7aaa8e6a --- /dev/null +++ b/packages/make-styles/src/types.test.ts @@ -0,0 +1,137 @@ +import { MakeStylesStyle } from './types'; + +function assertType(style: MakeStylesStyle): MakeStylesStyle { + return style; +} + +describe('types tests', () => { + it('passing fixtures', () => { + // Basic styles + // + + assertType({ flexShrink: 0 }); + assertType({ flexShrink: 1 }); + + assertType({ color: 'beige' }); + assertType({ paddingLeft: '5px' }); + + assertType({ '--color': 'red' }); + + // Strict selector defined via "CSS.Pseudos" + // + + assertType({ + ':hover': { flexShrink: 0 }, + ':focus': { flexShrink: 'initial' }, + }); + + assertType({ + ':hover': { color: 'beige' }, + ':focus': { paddingLeft: '5px' }, + }); + + assertType({ + ':hover': { '--color': 'red' }, + }); + + // Custom selectors + // + + assertType({ + ':hover:focus': { flexShrink: 0 as const }, + ':hover:active': { flexShrink: 'initial' }, + }); + + assertType({ + '.bar': { color: 'beige' }, + '.foo': { paddingLeft: '5px' }, + }); + + assertType({ + '.bar': { '--color': 'red' }, + }); + + // Nested custom selectors + // + + assertType({ + '.foo': { + '.bar': { flexShrink: 0 as const }, + '.baz': { flexShrink: 'initial' }, + }, + '.bar': { + '.baz': { color: 'beige' }, + '.qux': { paddingLeft: '5px' }, + }, + '.baz': { + '.qux': { + '--color': 'red', + }, + }, + }); + }); + + it('fixtures that should fail', () => { + // Banned shorthand properties + // + + // @ts-expect-error "padding" is banned + assertType({ padding: 0 }); + // @ts-expect-error "borderLeft" is banned + assertType({ borderLeft: '5px' }); + + // Invalid values + // + + // @ts-expect-error "1" is invalid value for "flexShrink" + assertType({ flexShrink: '1' }); + // @ts-expect-error "paddingLeft" cannot be numeric value + assertType({ paddingLeft: 5 }); + // @ts-expect-error "0" is invalid value for "color" + assertType({ color: 0 }); + + // Strict selectors + // + + assertType({ + ':hover': { + // @ts-expect-error "1" is invalid value for "flexShrink" + flexShrink: '1', + // @ts-expect-error "padding" is banned + padding: 0, + // @ts-expect-error "paddingLeft" cannot be numeric value + paddingLeft: 5, + }, + }); + + // Custom selectors + // + + assertType({ + ':hover:focus': { + // @ts-expect-error "1" is invalid value for "flexShrink" + flexShrink: '1', + // @ts-expect-error "padding" is banned + padding: 0, + // @ts-expect-error "paddingLeft" cannot be numeric value + paddingLeft: 5, + }, + }); + + // Nested custom selectors + // + + assertType({ + '.foo': { + '.baz': { + // @ts-expect-error "1" is invalid value for "flexShrink" + flexShrink: '1', + // @ts-expect-error "padding" is banned + padding: 0, + // @ts-expect-error "paddingLeft" cannot be numeric value + paddingLeft: 5, + }, + }, + }); + }); +}); diff --git a/packages/make-styles/src/types.ts b/packages/make-styles/src/types.ts index ff10976bb404d0..21f45242e2180a 100644 --- a/packages/make-styles/src/types.ts +++ b/packages/make-styles/src/types.ts @@ -2,22 +2,91 @@ import * as CSS from 'csstype'; export type MakeStylesCSSValue = string | 0; +type MakeStylesUnsupportedCSSProperties = { + // We don't support expansion of CSS shorthands + animation?: never; + background?: never; + border?: never; + borderBlock?: never; + borderBlockEnd?: never; + borderBlockStart?: never; + borderBottom?: never; + borderColor?: never; + borderImage?: never; + borderInline?: never; + borderInlineEnd?: never; + borderInlineStart?: never; + borderLeft?: never; + borderRadius?: never; + borderRight?: never; + borderStyle?: never; + borderTop?: never; + borderWidth?: never; + columnRule?: never; + flex?: never; + flexFlow?: never; + font?: never; + gap?: never; + grid?: never; + gridArea?: never; + gridColumn?: never; + gridGap?: never; + gridRow?: never; + gridTemplate?: never; + listStyle?: never; + margin?: never; + mask?: never; + maskBorder?: never; + offset?: never; + outline?: never; + overflow?: never; + padding?: never; + placeItems?: never; + placeSelf?: never; + textDecoration?: never; + textEmphasis?: never; + transition?: never; +}; type MakeStylesCSSProperties = Omit< CSS.Properties, // We have custom definition for "animationName" 'animationName' ->; +> & + MakeStylesUnsupportedCSSProperties; export type MakeStylesStrictCSSObject = MakeStylesCSSProperties & MakeStylesCSSPseudos & { animationName?: MakeStylesAnimation | MakeStylesAnimation[] | CSS.AnimationProperty }; -type MakeStylesCSSObjectCustom = { - [Property: string]: MakeStylesStyle | string | 0; +type MakeStylesCSSPseudos = { + [Property in CSS.Pseudos]?: + | (MakeStylesStrictCSSObject & { content?: string }) + | (MakeStylesCSSObjectCustomL1 & { content?: string }); }; -type MakeStylesCSSPseudos = { [Property in CSS.Pseudos]?: MakeStylesStrictCSSObject & { content?: string } }; -export type MakeStylesAnimation = Record<'from' | 'to' | string, MakeStylesCSSObjectCustom>; -export type MakeStylesStyle = MakeStylesStrictCSSObject | MakeStylesCSSObjectCustom; +// +// "MakeStylesCSSObjectCustom*" is a workaround to avoid circular references in types that are breaking TS <4. +// Once we will support "typesVersions" (types downleleving) or update our requirements for TS this should be +// updated or removed. +// + +type MakeStylesCSSObjectCustomL1 = { + [Property: string]: MakeStylesCSSValue | undefined | MakeStylesCSSObjectCustomL2; +} & MakeStylesStrictCSSObject; +type MakeStylesCSSObjectCustomL2 = { + [Property: string]: MakeStylesCSSValue | undefined | MakeStylesCSSObjectCustomL3; +} & MakeStylesStrictCSSObject; +type MakeStylesCSSObjectCustomL3 = { + [Property: string]: MakeStylesCSSValue | undefined | MakeStylesCSSObjectCustomL4; +} & MakeStylesStrictCSSObject; +type MakeStylesCSSObjectCustomL4 = { + [Property: string]: MakeStylesCSSValue | undefined | MakeStylesCSSObjectCustomL5; +} & MakeStylesStrictCSSObject; +type MakeStylesCSSObjectCustomL5 = { + [Property: string]: MakeStylesCSSValue | undefined; +} & MakeStylesStrictCSSObject; + +export type MakeStylesAnimation = Record<'from' | 'to' | string, MakeStylesCSSObjectCustomL1>; +export type MakeStylesStyle = MakeStylesStrictCSSObject | MakeStylesCSSObjectCustomL1; export type MakeStylesStyleFunctionRule = (tokens: Tokens) => MakeStylesStyle; export type MakeStylesStyleRule = MakeStylesStyle | MakeStylesStyleFunctionRule; From f7faa25bbd1ad617ebf767f6cd799871409bc9ee Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Tue, 14 Dec 2021 14:00:31 +0100 Subject: [PATCH 2/7] address PR review comments --- packages/make-styles/src/mergeClasses.test.ts | 4 ++-- .../src/runtime/createCSSVariablesProxy.test.ts | 2 +- packages/make-styles/src/runtime/resolveStyleRules.ts | 9 +++++---- 3 files changed, 8 insertions(+), 7 deletions(-) diff --git a/packages/make-styles/src/mergeClasses.test.ts b/packages/make-styles/src/mergeClasses.test.ts index 7e6471689915dd..528d8d5d32820b 100644 --- a/packages/make-styles/src/mergeClasses.test.ts +++ b/packages/make-styles/src/mergeClasses.test.ts @@ -118,7 +118,7 @@ describe('mergeClasses', () => { describe('"dir" option', () => { it('performs deduplication for RTL classes', () => { const computeClasses = makeStyles({ - start: { borderRightWidth: '5px' }, + start: { borderLeftWidth: '5px', borderRightWidth: '5px' }, end: { borderRightWidth: '5px' }, }); @@ -129,7 +129,7 @@ describe('mergeClasses', () => { expect(mergeClasses(rtlClasses1.start, rtlClasses2.start)).toBe(rtlClasses2.start); expect(mergeClasses(rtlClasses1.start, rtlClasses2.start, rtlClasses1.end, rtlClasses2.end)).toBe( - '___o93f2j0 fo2qazs', + '___1soy3ld f93e62u fo2qazs', ); }); diff --git a/packages/make-styles/src/runtime/createCSSVariablesProxy.test.ts b/packages/make-styles/src/runtime/createCSSVariablesProxy.test.ts index 4c720dffa9c82e..d2078ce229d5c9 100644 --- a/packages/make-styles/src/runtime/createCSSVariablesProxy.test.ts +++ b/packages/make-styles/src/runtime/createCSSVariablesProxy.test.ts @@ -13,7 +13,7 @@ describe('createCSSVariablesProxy', () => { const proxy = createCSSVariablesProxy('prefix') as { to: { string: object } }; expect(proxy.to.string.toString()).toStrictEqual('var(--prefix-to-string)'); }); - it('should be able to expand objects containing proxies as properties', () => { + it('should be able to resolve objects containing proxies as properties', () => { const proxy = createCSSVariablesProxy() as { to: { string: object } }; expect(Array.isArray(proxy)).toEqual(false); const expanded = resolveProxyValues({ diff --git a/packages/make-styles/src/runtime/resolveStyleRules.ts b/packages/make-styles/src/runtime/resolveStyleRules.ts index b834497cd7ea14..906becb2890790 100644 --- a/packages/make-styles/src/runtime/resolveStyleRules.ts +++ b/packages/make-styles/src/runtime/resolveStyleRules.ts @@ -211,8 +211,9 @@ export function resolveStyleRules( styles: MakeStylesStyle, unstable_cssPriority: number = 0, ): [CSSClassesMap, CSSRulesByBucket] { - // resolveProxyValues() is recursive function and should be evaluated once for a style object - const expandedStyles: MakeStylesStyle = resolveProxyValues(styles); - - return resolveStyleRulesInner(expandedStyles, unstable_cssPriority); + return resolveStyleRulesInner( + // resolveProxyValues() is recursive function and should be evaluated once for a style object + resolveProxyValues(styles), + unstable_cssPriority, + ); } From 26aeadb4b224546bc151af7f6d2aaf892b9e2681 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Tue, 14 Dec 2021 14:20:03 +0100 Subject: [PATCH 3/7] fix useTabStyles.ts --- packages/react-tabs/src/components/Tab/useTabStyles.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-tabs/src/components/Tab/useTabStyles.ts b/packages/react-tabs/src/components/Tab/useTabStyles.ts index 301b57344b3550..e70b50287891e4 100644 --- a/packages/react-tabs/src/components/Tab/useTabStyles.ts +++ b/packages/react-tabs/src/components/Tab/useTabStyles.ts @@ -27,7 +27,7 @@ const useRootStyles = makeStyles({ backgroundColor: 'none', ...shorthands.borderColor('none'), ...shorthands.borderRadius(theme.borderRadiusMedium), - borderWidth: theme.strokeWidthThin, + ...shorthands.borderWidth(theme.strokeWidthThin), columnGap: pendingTheme.gap.medium, cursor: 'pointer', display: 'flex', @@ -65,7 +65,7 @@ const useFocusStyles = makeStyles({ base: createCustomFocusIndicatorStyle(theme => ({ ...shorthands.borderColor('transparent'), outlineWidth: theme.strokeWidthThick, - outlineColor: 'tranparent', + outlineColor: 'transparent', outlineStyle: 'solid', boxShadow: ` ${theme.shadow4}, From 6d9f33be09326e8735d41a2ff6bfa510190350a0 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Tue, 14 Dec 2021 14:33:30 +0100 Subject: [PATCH 4/7] fix stories --- .../react-tabs/src/stories/TabListAppearance.stories.tsx | 6 +++--- packages/react-tabs/src/stories/TabListDefault.stories.tsx | 6 +++--- .../react-tabs/src/stories/TabListSizeMedium.stories.tsx | 6 +++--- .../react-tabs/src/stories/TabListSizeSmall.stories.tsx | 6 +++--- packages/react-tabs/src/stories/TabListVertical.stories.tsx | 6 +++--- packages/react-tabs/src/stories/TabListWithIcon.stories.tsx | 6 +++--- 6 files changed, 18 insertions(+), 18 deletions(-) diff --git a/packages/react-tabs/src/stories/TabListAppearance.stories.tsx b/packages/react-tabs/src/stories/TabListAppearance.stories.tsx index ffe951bca6ecc1..085fa06da2e009 100644 --- a/packages/react-tabs/src/stories/TabListAppearance.stories.tsx +++ b/packages/react-tabs/src/stories/TabListAppearance.stories.tsx @@ -1,6 +1,6 @@ -import { makeStyles } from '@fluentui/react-make-styles'; +import { makeStyles, shorthands } from '@fluentui/react-make-styles'; import * as React from 'react'; -import { Tab, TabList, TabProps } from '../index'; // codesandbox-dependency: @fluentui/react-tabs ^9.0.0-beta +import { Tab, TabList, TabProps } from '../index'; const useStyles = makeStyles({ root: { @@ -8,7 +8,7 @@ const useStyles = makeStyles({ display: 'flex', flexDirection: 'column', justifyContent: 'flex-start', - padding: '50px 20px', + ...shorthands.padding('50px', '20px'), rowGap: '20px', }, }); diff --git a/packages/react-tabs/src/stories/TabListDefault.stories.tsx b/packages/react-tabs/src/stories/TabListDefault.stories.tsx index 4243c5e2a2b11d..46decfde4354b0 100644 --- a/packages/react-tabs/src/stories/TabListDefault.stories.tsx +++ b/packages/react-tabs/src/stories/TabListDefault.stories.tsx @@ -1,6 +1,6 @@ -import { makeStyles } from '@fluentui/react-make-styles'; +import { makeStyles, shorthands } from '@fluentui/react-make-styles'; import * as React from 'react'; -import { Tab, TabList, TabProps } from '../index'; // codesandbox-dependency: @fluentui/react-tabs ^9.0.0-beta +import { Tab, TabList, TabProps } from '../index'; const useStyles = makeStyles({ root: { @@ -8,7 +8,7 @@ const useStyles = makeStyles({ display: 'flex', flexDirection: 'column', justifyContent: 'flex-start', - padding: '50px 20px', + ...shorthands.padding('50px', '20px'), rowGap: '20px', }, }); diff --git a/packages/react-tabs/src/stories/TabListSizeMedium.stories.tsx b/packages/react-tabs/src/stories/TabListSizeMedium.stories.tsx index e490b601fd9986..5219e9d93c2011 100644 --- a/packages/react-tabs/src/stories/TabListSizeMedium.stories.tsx +++ b/packages/react-tabs/src/stories/TabListSizeMedium.stories.tsx @@ -1,7 +1,7 @@ import { CalendarMonth24Regular } from '@fluentui/react-icons'; -import { makeStyles } from '@fluentui/react-make-styles'; +import { makeStyles, shorthands } from '@fluentui/react-make-styles'; import * as React from 'react'; -import { Tab, TabList, TabProps } from '../index'; // codesandbox-dependency: @fluentui/react-tabs ^9.0.0-beta +import { Tab, TabList, TabProps } from '../index'; const useStyles = makeStyles({ root: { @@ -9,7 +9,7 @@ const useStyles = makeStyles({ display: 'flex', flexDirection: 'column', justifyContent: 'flex-start', - padding: '50px 20px', + ...shorthands.padding('50px', '20px'), rowGap: '20px', }, }); diff --git a/packages/react-tabs/src/stories/TabListSizeSmall.stories.tsx b/packages/react-tabs/src/stories/TabListSizeSmall.stories.tsx index 291220921c498d..2665fa36baeacf 100644 --- a/packages/react-tabs/src/stories/TabListSizeSmall.stories.tsx +++ b/packages/react-tabs/src/stories/TabListSizeSmall.stories.tsx @@ -1,7 +1,7 @@ import { CalendarMonth24Regular } from '@fluentui/react-icons'; -import { makeStyles } from '@fluentui/react-make-styles'; +import { makeStyles, shorthands } from '@fluentui/react-make-styles'; import * as React from 'react'; -import { Tab, TabList, TabProps } from '../index'; // codesandbox-dependency: @fluentui/react-tabs ^9.0.0-beta +import { Tab, TabList, TabProps } from '../index'; const useStyles = makeStyles({ root: { @@ -9,7 +9,7 @@ const useStyles = makeStyles({ display: 'flex', flexDirection: 'column', justifyContent: 'flex-start', - padding: '50px 20px', + ...shorthands.padding('50px', '20px'), rowGap: '20px', }, }); diff --git a/packages/react-tabs/src/stories/TabListVertical.stories.tsx b/packages/react-tabs/src/stories/TabListVertical.stories.tsx index b9e56e41148c76..1534a4385d2eb6 100644 --- a/packages/react-tabs/src/stories/TabListVertical.stories.tsx +++ b/packages/react-tabs/src/stories/TabListVertical.stories.tsx @@ -1,6 +1,6 @@ -import { makeStyles } from '@fluentui/react-make-styles'; +import { makeStyles, shorthands } from '@fluentui/react-make-styles'; import * as React from 'react'; -import { Tab, TabList, TabProps } from '../index'; // codesandbox-dependency: @fluentui/react-tabs ^9.0.0-beta +import { Tab, TabList, TabProps } from '../index'; const useStyles = makeStyles({ root: { @@ -8,7 +8,7 @@ const useStyles = makeStyles({ display: 'flex', flexDirection: 'column', justifyContent: 'flex-start', - padding: '50px 20px', + ...shorthands.padding('50px', '20px'), rowGap: '20px', }, }); diff --git a/packages/react-tabs/src/stories/TabListWithIcon.stories.tsx b/packages/react-tabs/src/stories/TabListWithIcon.stories.tsx index ae363d0b03dbf0..0b44000d65bebe 100644 --- a/packages/react-tabs/src/stories/TabListWithIcon.stories.tsx +++ b/packages/react-tabs/src/stories/TabListWithIcon.stories.tsx @@ -1,6 +1,6 @@ -import { makeStyles } from '@fluentui/react-make-styles'; +import { makeStyles, shorthands } from '@fluentui/react-make-styles'; import * as React from 'react'; -import { Tab, TabList, TabProps } from '../index'; // codesandbox-dependency: @fluentui/react-tabs ^9.0.0-beta +import { Tab, TabList, TabProps } from '../index'; import { CalendarMonth24Regular } from '@fluentui/react-icons'; const useStyles = makeStyles({ @@ -9,7 +9,7 @@ const useStyles = makeStyles({ display: 'flex', flexDirection: 'column', justifyContent: 'flex-start', - padding: '50px 20px', + ...shorthands.padding('50px', '20px'), rowGap: '20px', }, }); From 4e143f7d2fd0cc4bdd40db3e4479b0d5163c02f8 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Tue, 14 Dec 2021 14:48:35 +0100 Subject: [PATCH 5/7] fix styles for checkbox --- .../react-checkbox/src/components/Checkbox/useCheckboxStyles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts b/packages/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts index 78c53f3c6cf8b6..23f7b8d842eba0 100644 --- a/packages/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts +++ b/packages/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts @@ -154,7 +154,7 @@ const useIndicatorStyles = makeStyles({ unchecked: { '& > *': { - opacity: 0, + opacity: '0', }, }, }); From 574e80fadd6b4ab1bdf721e67be0eba0bae9524d Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Thu, 16 Dec 2021 10:59:19 +0100 Subject: [PATCH 6/7] do not use padding in tests --- .../make-styles/src/runtime/createCSSVariablesProxy.test.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/make-styles/src/runtime/createCSSVariablesProxy.test.ts b/packages/make-styles/src/runtime/createCSSVariablesProxy.test.ts index d2078ce229d5c9..b1ca94e94fbf93 100644 --- a/packages/make-styles/src/runtime/createCSSVariablesProxy.test.ts +++ b/packages/make-styles/src/runtime/createCSSVariablesProxy.test.ts @@ -17,7 +17,7 @@ describe('createCSSVariablesProxy', () => { const proxy = createCSSVariablesProxy() as { to: { string: object } }; expect(Array.isArray(proxy)).toEqual(false); const expanded = resolveProxyValues({ - padding: proxy.to.string, + paddingLeft: proxy.to.string, animationName: { from: { transform: proxy.to.string, @@ -30,7 +30,7 @@ describe('createCSSVariablesProxy', () => { animationDuration: proxy.to.string, }); expect(expanded).toEqual({ - padding: 'var(--to-string)', + paddingLeft: 'var(--to-string)', animationName: { from: { transform: 'var(--to-string)', From 1010d91e3a7869cfc191d005839ae7207c478047 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Thu, 16 Dec 2021 11:10:29 +0100 Subject: [PATCH 7/7] Change files --- ...eact-checkbox-67d54c7f-6bd3-4b75-9b96-63682f3c6f90.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-checkbox-67d54c7f-6bd3-4b75-9b96-63682f3c6f90.json diff --git a/change/@fluentui-react-checkbox-67d54c7f-6bd3-4b75-9b96-63682f3c6f90.json b/change/@fluentui-react-checkbox-67d54c7f-6bd3-4b75-9b96-63682f3c6f90.json new file mode 100644 index 00000000000000..5cb678cf7a9701 --- /dev/null +++ b/change/@fluentui-react-checkbox-67d54c7f-6bd3-4b75-9b96-63682f3c6f90.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "fix: update styles to match typings", + "packageName": "@fluentui/react-checkbox", + "email": "olfedias@microsoft.com", + "dependentChangeType": "patch" +}