fix(eslint-plugin): update the list of unsupported shorthands

microsoft · May 21, 2024 · 88da398 · 88da398
1 parent 1a56464
commit 88da398
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 129 deletions.
diff --git a/change/@griffel-eslint-plugin-e3969867-4939-4590-a9fb-ed27e89342d1.json b/change/@griffel-eslint-plugin-e3969867-4939-4590-a9fb-ed27e89342d1.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix(eslint-plugin): update the list of unsupported shorthands",
+  "packageName": "@griffel/eslint-plugin",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/eslint-plugin/src/rules/no-shorthands.test.ts b/packages/eslint-plugin/src/rules/no-shorthands.test.ts
@@ -56,123 +56,75 @@ export const useStyles = makeStaticStyles({
 import { makeStyles } from '@griffel/react';
 
 export const useStyles = makeStyles({
-  root: { background: 'red' },
-});
-`,
-      errors: [{ messageId: 'shorthandFound' }],
-    },
-    {
-      name: 'CSS shorthand in a selector',
-      code: `
-import { makeStyles } from '@griffel/react';
-
-export const useStyles = makeStyles({
-  root: {
-    ':hover': { background: 'red' }
-  },
-});
-`,
-      errors: [{ messageId: 'shorthandFound' }],
-    },
-    {
-      name: 'border shorthand',
-      code: `
-import { makeStyles } from '@griffel/react';
-
-export const useStyles = makeStyles({
-  root: { border: '1px solid rgb(0 0 0)' },
-  icon: { borderLeft: '1px solid' },
+  root: { borderWidth: '2px' },
 });
 `,
       output: `
 import { makeStyles } from '@griffel/react';
 
 export const useStyles = makeStyles({
-  root: { ...shorthands.border('1px', 'solid', 'rgb(0 0 0)') },
-  icon: { ...shorthands.borderLeft('1px', 'solid') },
-});
-`,
-      errors: [{ messageId: 'shorthandFound' }, { messageId: 'shorthandFound' }],
-    },
-    {
-      name: 'border shorthand with template string',
-      code: `
-import { makeStyles } from '@griffel/react';
-
-export const useStyles = makeStyles({
-  root: { borderRight: ${'`1px solid ${tokens.colorNeutralStroke1}`'} },
-});
-`,
-      output: `
-import { makeStyles } from '@griffel/react';
-
-export const useStyles = makeStyles({
-  root: { ...shorthands.borderRight(${'`1px`, `solid`, `${tokens.colorNeutralStroke1}`'}) },
+  root: { ...shorthands.borderWidth('2px') },
 });
 `,
       errors: [{ messageId: 'shorthandFound' }],
     },
     {
-      name: 'flex shorthand',
+      name: 'CSS shorthand in a selector',
       code: `
 import { makeStyles } from '@griffel/react';
 
 export const useStyles = makeStyles({
-  root: { flex: '1 2 30px' },
-  icon: { flex: 0 },
-  content: { flex: '1 !important' },
+  root: {
+    ':hover': { borderWidth: '2px' }
+  },
 });
 `,
       output: `
 import { makeStyles } from '@griffel/react';
 
 export const useStyles = makeStyles({
-  root: { ...shorthands.flex('1', '2', '30px') },
-  icon: { ...shorthands.flex('0') },
-  content: { ...shorthands.flex('1 !important') },
+  root: {
+    ':hover': { ...shorthands.borderWidth('2px') }
+  },
 });
 `,
-      errors: [{ messageId: 'shorthandFound' }, { messageId: 'shorthandFound' }, { messageId: 'shorthandFound' }],
+      errors: [{ messageId: 'shorthandFound' }],
     },
     {
-      name: 'margin shorthand',
+      name: 'borderColor shorthand',
       code: `
 import { makeStyles } from '@griffel/react';
 
 export const useStyles = makeStyles({
-  root: { margin: '1em var(--margin-x) 30px' },
-  icon: { margin: 20 },
+  root: { borderColor: 'rgb(0 0 0)' },
 });
 `,
       output: `
 import { makeStyles } from '@griffel/react';
 
 export const useStyles = makeStyles({
-  root: { ...shorthands.margin('1em', 'var(--margin-x)', '30px') },
-  icon: { ...shorthands.margin('20px') },
+  root: { ...shorthands.borderColor('rgb(0 0 0)') },
 });
 `,
-      errors: [{ messageId: 'shorthandFound' }, { messageId: 'shorthandFound' }],
+      errors: [{ messageId: 'shorthandFound' }],
     },
     {
-      name: 'grid-area shorthand',
+      name: 'borderColor shorthand with template string',
       code: `
 import { makeStyles } from '@griffel/react';
 
 export const useStyles = makeStyles({
-  root: { gridArea: 'box' },
-  icon: { gridArea: '1 icon / span 2' },
+  root: { borderColor: ${'`${tokens.colorNeutralStroke1}`'} },
 });
 `,
       output: `
 import { makeStyles } from '@griffel/react';
 
 export const useStyles = makeStyles({
-  root: { ...shorthands.gridArea('box') },
-  icon: { ...shorthands.gridArea('1 icon', 'span 2') },
+  root: { ...shorthands.borderColor(${'`${tokens.colorNeutralStroke1}`'}) },
 });
 `,
-      errors: [{ messageId: 'shorthandFound' }, { messageId: 'shorthandFound' }],
+      errors: [{ messageId: 'shorthandFound' }],
     },
   ],
 });
diff --git a/packages/eslint-plugin/src/utils/shorthandToArguments.ts b/packages/eslint-plugin/src/utils/shorthandToArguments.ts
@@ -81,76 +81,19 @@ export function buildShorthandSplitter(options: ShorthandSplitterOptions = {}) {
 
 // This collection is a map simply for faster access when checking if a CSS property is unsupported
 // @griffel/core has the same definition, but ESLint plugin should not depend on it
-export const UNSUPPORTED_CSS_PROPERTIES: Record<keyof CSS.StandardShorthandProperties, true> = {
+export const UNSUPPORTED_CSS_PROPERTIES: Partial<Record<keyof CSS.StandardShorthandProperties, true>> = {
   all: true,
-  animation: true,
-  animationRange: true,
-  background: true,
-  backgroundPosition: true,
-  border: true,
+  borderColor: true,
+  borderStyle: true,
+  borderWidth: true,
+
   borderBlock: true,
   borderBlockEnd: true,
   borderBlockStart: true,
-  borderBottom: true,
-  borderColor: true,
-  borderImage: true,
   borderInline: true,
   borderInlineEnd: true,
   borderInlineStart: true,
-  borderLeft: true,
-  borderRadius: true,
-  borderRight: true,
-  borderStyle: true,
-  borderTop: true,
-  borderWidth: true,
-  caret: true,
-  columns: true,
-  columnRule: true,
-  containIntrinsicSize: true,
-  container: true,
-  flex: true,
-  flexFlow: true,
-  font: true,
-  gap: true,
-  grid: true,
-  gridArea: true,
-  gridColumn: true,
-  gridRow: true,
-  gridTemplate: true,
-  inset: true,
-  insetBlock: true,
-  insetInline: true,
-  lineClamp: true,
-  listStyle: true,
-  margin: true,
-  marginBlock: true,
-  marginInline: true,
-  mask: true,
-  maskBorder: true,
-  motion: true,
-  offset: true,
-  outline: true,
-  overflow: true,
-  overscrollBehavior: true,
-  padding: true,
-  paddingBlock: true,
-  paddingInline: true,
-  placeItems: true,
-  placeContent: true,
-  placeSelf: true,
-  scrollMargin: true,
-  scrollMarginBlock: true,
-  scrollMarginInline: true,
-  scrollPadding: true,
-  scrollPaddingBlock: true,
-  scrollPaddingInline: true,
-  scrollSnapMargin: true,
-  scrollTimeline: true,
-  textDecoration: true,
-  textEmphasis: true,
-  transition: true,
-  viewTimeline: true,
-};
+} as const;
 
 const pxSplitter = buildShorthandSplitter({ numberUnit: 'px' });