diff --git a/change/@griffel-eslint-plugin-e3969867-4939-4590-a9fb-ed27e89342d1.json b/change/@griffel-eslint-plugin-e3969867-4939-4590-a9fb-ed27e89342d1.json new file mode 100644 index 000000000..9185e3eed --- /dev/null +++ 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 index 7d8f819df..8c7b6ffc1 100644 --- 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 index f091ff0a1..fb15aee4e 100644 --- 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 = { +export const UNSUPPORTED_CSS_PROPERTIES: Partial> = { 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' });