feat: add support for shorthands (#544)

microsoft · Apr 30, 2024 · 0f2eb5e · 0f2eb5e
1 parent b4ed7ac
commit 0f2eb5e
Show file tree

Hide file tree

Showing 21 changed files with 499 additions and 272 deletions.
diff --git a/change/@griffel-core-e0308772-28cf-4b37-a54f-cd4d2d060e74.json b/change/@griffel-core-e0308772-28cf-4b37-a54f-cd4d2d060e74.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: add support for shorthands",
+  "packageName": "@griffel/core",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@griffel-style-types-4007bc48-23b8-40b1-82d8-1c92cbdc0ceb.json b/change/@griffel-style-types-4007bc48-23b8-40b1-82d8-1c92cbdc0ceb.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: add support for shorthands",
+  "packageName": "@griffel/style-types",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/e2e/typescript/src/assets/fixture.ts b/e2e/typescript/src/assets/fixture.ts
@@ -166,18 +166,6 @@ assertType({
   },
 });
 
-// Banned shorthand properties
-//
-
-assertType({
-  // @ts-expect-error "padding" is banned
-  padding: 0,
-});
-assertType({
-  // @ts-expect-error "borderLeft" is banned
-  borderLeft: '5px',
-});
-
 // Invalid values
 //
 
@@ -271,8 +259,6 @@ assertType({
   ':hover': {
     // @ts-expect-error "1" is invalid value for "overflowX"
     overflowX: '1',
-    // @ts-expect-error "padding" is banned
-    padding: 0,
     // @ts-expect-error "paddingLeft" cannot be numeric value
     paddingLeft: 5,
   },
@@ -295,13 +281,6 @@ assertType({
   },
 });
 
-assertType({
-  ':hover:focus': {
-    // @ts-expect-error "padding" is banned
-    padding: 0,
-  },
-});
-
 assertType({
   ':hover:focus': {
     // @ts-expect-error "5" is an invalid value for paddingLeft
@@ -312,8 +291,6 @@ assertType({
 assertType({
   ':hover:focus': {
     overflowX: 'scroll',
-    // @ts-expect-error "padding" is banned
-    padding: 0,
     // @ts-expect-error "5" is an invalid value for paddingLeft
     paddingLeft: 5,
   },
@@ -342,8 +319,6 @@ assertType({
     '.baz': {
       // @ts-expect-error outline-box is an invalid value for box-sizing
       overflowX: '1',
-      // @ts-expect-error "padding" is banned
-      padding: 0,
       // @ts-expect-error "5" is an invalid value for paddingLeft
       paddingLeft: 5,
     },

diff --git a/e2e/typescript/src/assets/legacy/fixture.ts b/e2e/typescript/src/assets/legacy/fixture.ts
@@ -114,18 +114,6 @@ assertType({
   },
 });
 
-// Banned shorthand properties
-//
-
-assertType({
-  // @ts-expect-error "padding" is banned
-  padding: 0,
-});
-assertType({
-  // @ts-expect-error "borderLeft" is banned
-  borderLeft: '5px',
-});
-
 // Invalid values
 //
 
@@ -213,8 +201,6 @@ assertType({
   ':hover': {
     // @ts-expect-error "1" is invalid value for "overflowX"
     overflowX: '1',
-    // @ts-expect-error "padding" is banned
-    padding: 0,
     // @ts-expect-error "paddingLeft" cannot be numeric value
     paddingLeft: 5,
   },
@@ -237,13 +223,6 @@ assertType({
   },
 });
 
-assertType({
-  // @ts-expect-error "padding" is banned
-  ':hover:focus': {
-    padding: 0,
-  },
-});
-
 assertType({
   // @ts-expect-error "paddingLeft" cannot be numeric value
   ':hover:focus': {

diff --git a/packages/babel-preset/__fixtures__/object-shorthands/code.ts b/packages/babel-preset/__fixtures__/object-shorthands/code.ts
@@ -0,0 +1,8 @@
+import { makeStyles } from '@griffel/react';
+
+export const useStyles = makeStyles({
+  root: {
+    borderRight: `5px solid red /* @noflip */`,
+    borderBottom: `5px solid red`,
+  },
+});
diff --git a/packages/babel-preset/__fixtures__/object-shorthands/output.ts b/packages/babel-preset/__fixtures__/object-shorthands/output.ts
@@ -0,0 +1,31 @@
+import { __styles } from '@griffel/react';
+export const useStyles = __styles(
+  {
+    root: {
+      h3c5rm: 0,
+      vrafjx: 0,
+      Bekrc4i: 0,
+      u1mtju: 'fq3r367',
+      B9xav0g: 0,
+      oivjwe: 0,
+      Bn0qgzm: 0,
+      Bgfg5da: 'f171p8tk',
+    },
+  },
+  {
+    d: [
+      [
+        '.fq3r367{border-right:5px solid red;}',
+        {
+          p: -1,
+        },
+      ],
+      [
+        '.f171p8tk{border-bottom:5px solid red;}',
+        {
+          p: -1,
+        },
+      ],
+    ],
+  },
+);
diff --git a/packages/babel-preset/__fixtures__/unsupported-css-properties/fixture.ts b/packages/babel-preset/__fixtures__/unsupported-css-properties/fixture.ts
@@ -5,18 +5,12 @@ export const useStyles = makeStyles({
   // resulting output should be empty anyway
   root: {
     // @ts-expect-error unsupported css properties should be stripped
-    background: 'value',
+    all: 'initial',
     // @ts-expect-error unsupported css properties should be stripped
-    border: 'value',
+    borderColor: 'value',
     // @ts-expect-error unsupported css properties should be stripped
-    borderRadius: 'value',
+    borderStyle: 'value',
     // @ts-expect-error unsupported css properties should be stripped
-    gap: 'value',
-    // @ts-expect-error unsupported css properties should be stripped
-    grid: 'value',
-    // @ts-expect-error unsupported css properties should be stripped
-    margin: 'value',
-    // @ts-expect-error unsupported css properties should be stripped
-    padding: 'value',
+    borderWidth: 'value',
   },
 });
diff --git a/packages/babel-preset/src/transformPlugin.test.ts b/packages/babel-preset/src/transformPlugin.test.ts
@@ -65,6 +65,11 @@ pluginTester({
       fixture: path.resolve(fixturesDir, 'keyframes', 'code.ts'),
       outputFixture: path.resolve(fixturesDir, 'keyframes', 'output.ts'),
     },
+    {
+      title: 'syntax: CSS shorthands',
+      fixture: path.resolve(fixturesDir, 'object-shorthands', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'object-shorthands', 'output.ts'),
+    },
     {
       title: 'syntax: reset (null values)',
       fixture: path.resolve(fixturesDir, 'object-reset', 'code.ts'),

diff --git a/packages/core/src/constants.ts b/packages/core/src/constants.ts
@@ -67,73 +67,16 @@ export const LOOKUP_DIR_INDEX = 1;
 /** @internal */
 export const UNSUPPORTED_CSS_PROPERTIES: Record<keyof GriffelStylesUnsupportedCSSProperties, 1> = {
   all: 1,
-  animation: 1,
-  animationRange: 1,
-  background: 1,
-  backgroundPosition: 1,
-  border: 1,
+  borderColor: 1,
+  borderStyle: 1,
+  borderWidth: 1,
+
   borderBlock: 1,
   borderBlockEnd: 1,
   borderBlockStart: 1,
-  borderBottom: 1,
-  borderColor: 1,
-  borderImage: 1,
   borderInline: 1,
   borderInlineEnd: 1,
   borderInlineStart: 1,
-  borderLeft: 1,
-  borderRadius: 1,
-  borderRight: 1,
-  borderStyle: 1,
-  borderTop: 1,
-  borderWidth: 1,
-  caret: 1,
-  columns: 1,
-  columnRule: 1,
-  containIntrinsicSize: 1,
-  container: 1,
-  flex: 1,
-  flexFlow: 1,
-  font: 1,
-  gap: 1,
-  grid: 1,
-  gridArea: 1,
-  gridColumn: 1,
-  gridRow: 1,
-  gridTemplate: 1,
-  inset: 1,
-  insetBlock: 1,
-  insetInline: 1,
-  lineClamp: 1,
-  listStyle: 1,
-  margin: 1,
-  marginBlock: 1,
-  marginInline: 1,
-  mask: 1,
-  maskBorder: 1,
-  motion: 1,
-  offset: 1,
-  outline: 1,
-  overflow: 1,
-  overscrollBehavior: 1,
-  padding: 1,
-  paddingBlock: 1,
-  paddingInline: 1,
-  placeItems: 1,
-  placeContent: 1,
-  placeSelf: 1,
-  scrollMargin: 1,
-  scrollMarginBlock: 1,
-  scrollMarginInline: 1,
-  scrollPadding: 1,
-  scrollPaddingBlock: 1,
-  scrollPaddingInline: 1,
-  scrollSnapMargin: 1,
-  scrollTimeline: 1,
-  textDecoration: 1,
-  textEmphasis: 1,
-  transition: 1,
-  viewTimeline: 1,
 } as const;
 
 /**

diff --git a/packages/core/src/makeStyles.test.ts b/packages/core/src/makeStyles.test.ts
@@ -66,6 +66,32 @@ describe('makeStyles', () => {
     `);
   });
 
+  it('works with CSS shorthands', () => {
+    const computeClasses = makeStyles({
+      root: {
+        backgroundColor: 'red',
+        border: '3px solid black',
+        padding: '10px',
+      },
+    });
+
+    expect(computeClasses({ dir: 'ltr', renderer }).root).toMatchInlineSnapshot(`"___1vg1v8m f3xbvq9 f4wmytw fbhmu18"`);
+    expect(renderer).toMatchInlineSnapshot(`
+      /** bucket "d" {"data-priority":"0"} **/
+      .f3xbvq9 {
+        background-color: red;
+      }
+      /** bucket "d" {"data-priority":"-2"} **/
+      .f4wmytw {
+        border: 3px solid black;
+      }
+      /** bucket "d" {"data-priority":"-1"} **/
+      .fbhmu18 {
+        padding: 10px;
+      }
+    `);
+  });
+
   it('handles RTL for styles', () => {
     const computeClasses = makeStyles({
       root: {