makeStyles: do not use shorthand expansion

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"
+}

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"
+}

packages/make-styles/etc/make-styles.api.md

@@ -93,10 +93,10 @@ export type MakeStaticStylesStyle = {
 // @public (undocumented)
 export function makeStyles<Slots extends string | number, Tokens>(stylesBySlots: StylesBySlots<Slots, Tokens>, unstable_cssPriority?: number): (options: MakeStylesOptions) => Record<Slots, string>;
 
-// 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: Tokens) => MakeStylesStyle;

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"

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: { borderLeftWidth: '5px', borderRightWidth: '5px' },
+        end: { borderRightWidth: '5px' },
       });
 
       const rtlClasses1 = computeClasses({ ...options, dir: 'rtl' });

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;}",
           ],
         },
       ]

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', () => {
@@ -14,28 +13,23 @@ 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 = expand(
-      resolveProxyValues({
-        padding: proxy.to.string,
-        animationName: {
-          from: {
-            transform: proxy.to.string,
-          },
-          to: {
-            transform: proxy.to.string,
-          },
+    const expanded = resolveProxyValues({
+      paddingLeft: 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)',
       animationName: {
         from: {

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 {

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,9 @@ 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));
-
-  return resolveStyleRulesInner(expandedStyles, unstable_cssPriority);
+  return resolveStyleRulesInner(
+    // resolveProxyValues() is recursive function and should be evaluated once for a style object
+    resolveProxyValues(styles),
+    unstable_cssPriority,
+  );
 }