diff --git a/packages/@stylexjs/eslint-plugin/__tests__/stylex-valid-styles-test.js b/packages/@stylexjs/eslint-plugin/__tests__/stylex-valid-styles-test.js index 27f4cefbb..4963bf5df 100644 --- a/packages/@stylexjs/eslint-plugin/__tests__/stylex-valid-styles-test.js +++ b/packages/@stylexjs/eslint-plugin/__tests__/stylex-valid-styles-test.js @@ -2424,6 +2424,62 @@ revert`, }, ], }, + { + // A leading comma must not be accepted as a valid length. Regression + // test for the length validators previously using the character class + // `[-,+]`, which accidentally allowed a literal comma prefix. + // `textUnderlineOffset` is length-only (it does not accept arbitrary + // strings), so this exercises the length validators directly. + code: ` + import * as stylex from '@stylexjs/stylex'; + const styles = stylex.create({ + invalidStyle: { + textUnderlineOffset: ',4px', + }, + }); + `, + errors: [ + { + message: `textUnderlineOffset value must be one of: +auto +a number literal or math expression +a number ending in px, mm, in, pc, pt +a number ending in ch, em, ex, ic, rem, vh, vw, vmin, vmax, svh, dvh, lvh, svw, dvw, ldw, cqw, cqh, cqmin, cqmax +A string literal representing a percentage (e.g. 100%) +null +initial +inherit +unset +revert`, + }, + ], + }, + { + // Same as above, for the relative-length validator. + code: ` + import * as stylex from '@stylexjs/stylex'; + const styles = stylex.create({ + invalidStyle: { + textUnderlineOffset: ',4rem', + }, + }); + `, + errors: [ + { + message: `textUnderlineOffset value must be one of: +auto +a number literal or math expression +a number ending in px, mm, in, pc, pt +a number ending in ch, em, ex, ic, rem, vh, vw, vmin, vmax, svh, dvh, lvh, svw, dvw, ldw, cqw, cqh, cqmin, cqmax +A string literal representing a percentage (e.g. 100%) +null +initial +inherit +unset +revert`, + }, + ], + }, { code: ` import * as stylex from '@stylexjs/stylex'; diff --git a/packages/@stylexjs/eslint-plugin/src/rules/isAbsoluteLength.js b/packages/@stylexjs/eslint-plugin/src/rules/isAbsoluteLength.js index e017bbc0f..3d96bc3cc 100644 --- a/packages/@stylexjs/eslint-plugin/src/rules/isAbsoluteLength.js +++ b/packages/@stylexjs/eslint-plugin/src/rules/isAbsoluteLength.js @@ -26,7 +26,7 @@ const isAbsoluteLength: RuleCheck = ( if ( typeof val === 'string' && Array.from(absoluteLengthUnits).some((unit) => - val.match(new RegExp(`^([-,+]?\\d+(\\.\\d+)?${unit})$`)), + val.match(new RegExp(`^([+-]?\\d+(\\.\\d+)?${unit})$`)), ) ) { return undefined; diff --git a/packages/@stylexjs/eslint-plugin/src/rules/isRelativeLength.js b/packages/@stylexjs/eslint-plugin/src/rules/isRelativeLength.js index eacdbf307..ce7c68142 100644 --- a/packages/@stylexjs/eslint-plugin/src/rules/isRelativeLength.js +++ b/packages/@stylexjs/eslint-plugin/src/rules/isRelativeLength.js @@ -49,7 +49,7 @@ const isRelativeLength: RuleCheck = ( if ( typeof val === 'string' && Array.from(relativeLengthUnits).some((unit) => - val.match(new RegExp(`^([-,+]?\\d+(\\.\\d+)?${unit})$`)), + val.match(new RegExp(`^([+-]?\\d+(\\.\\d+)?${unit})$`)), ) ) { return undefined;