diff --git a/packages/@stylexjs/eslint-plugin/__tests__/stylex-valid-shorthands-test.js b/packages/@stylexjs/eslint-plugin/__tests__/stylex-valid-shorthands-test.js index f99408ba1..24ef8eef3 100644 --- a/packages/@stylexjs/eslint-plugin/__tests__/stylex-valid-shorthands-test.js +++ b/packages/@stylexjs/eslint-plugin/__tests__/stylex-valid-shorthands-test.js @@ -473,6 +473,17 @@ eslintTester.run('stylex-valid-shorthands', rule.default, { }) `, }, + // grid-area: single-value custom-ident + { + code: ` + import * as stylex from '@stylexjs/stylex'; + const styles = stylex.create({ + main: { + gridArea: 'header', + }, + }) + `, + }, // Already-longhand grid properties { code: ` @@ -1532,34 +1543,6 @@ eslintTester.run('stylex-valid-shorthands', rule.default, { }, ], }, - // grid-area: custom-ident expands to 4 longhands - { - code: ` - import * as stylex from '@stylexjs/stylex'; - const styles = stylex.create({ - main: { - gridArea: 'header', - }, - }); - `, - output: ` - import * as stylex from '@stylexjs/stylex'; - const styles = stylex.create({ - main: { - gridColumnEnd: 'header', - gridColumnStart: 'header', - gridRowEnd: 'header', - gridRowStart: 'header', - }, - }); - `, - errors: [ - { - message: - 'Property shorthands using multiple values like "gridArea: header" are not supported in StyleX. Separate into individual properties.', - }, - ], - }, // grid-area: custom-ident with 2 slash-separated parts { code: ` diff --git a/packages/@stylexjs/eslint-plugin/src/stylex-valid-shorthands.js b/packages/@stylexjs/eslint-plugin/src/stylex-valid-shorthands.js index 95a3ea010..685ce0065 100644 --- a/packages/@stylexjs/eslint-plugin/src/stylex-valid-shorthands.js +++ b/packages/@stylexjs/eslint-plugin/src/stylex-valid-shorthands.js @@ -187,7 +187,7 @@ const stylexValidShorthands = { return; } - if (key === 'flex' && isSingleToken(String(v))) { + if ((key === 'flex' || key === 'gridArea') && isSingleToken(String(v))) { return; }