diff --git a/packages/@stylexjs/babel-plugin/__tests__/transform-stylex-defineConsts-test.js b/packages/@stylexjs/babel-plugin/__tests__/transform-stylex-defineConsts-test.js index 98dc77152..62aece407 100644 --- a/packages/@stylexjs/babel-plugin/__tests__/transform-stylex-defineConsts-test.js +++ b/packages/@stylexjs/babel-plugin/__tests__/transform-stylex-defineConsts-test.js @@ -266,6 +266,49 @@ describe('@stylexjs/babel-plugin', () => { ] `); }); + + test('constant names: -- prefix preserves user-authored name', () => { + const { code, metadata } = transform(` + import * as stylex from '@stylexjs/stylex'; + export const sizes = stylex.defineConsts({ + '--small': '8px', + '--large': '24px', + }); + `); + + expect(code).toMatchInlineSnapshot(` + "import * as stylex from '@stylexjs/stylex'; + export const sizes = { + "--small": "8px", + "--large": "24px" + };" + `); + + expect(metadata.stylex).toMatchInlineSnapshot(` + [ + [ + "small", + { + "constKey": "small", + "constVal": "8px", + "ltr": "", + "rtl": null, + }, + 0, + ], + [ + "large", + { + "constKey": "large", + "constVal": "24px", + "ltr": "", + "rtl": null, + }, + 0, + ], + ] + `); + }); }); describe('[transform] stylex.defineConsts() in stylex.create() ', () => { diff --git a/packages/@stylexjs/babel-plugin/__tests__/validation-stylex-defineConsts-test.js b/packages/@stylexjs/babel-plugin/__tests__/validation-stylex-defineConsts-test.js index e868ebb48..72204f3c7 100644 --- a/packages/@stylexjs/babel-plugin/__tests__/validation-stylex-defineConsts-test.js +++ b/packages/@stylexjs/babel-plugin/__tests__/validation-stylex-defineConsts-test.js @@ -162,7 +162,7 @@ describe('@stylexjs/babel-plugin', () => { /* Properties */ - test('invalid key: starts with "--"', () => { + test('valid key: starts with "--"', () => { expect(() => transform(` import * as stylex from '@stylexjs/stylex'; @@ -170,7 +170,7 @@ describe('@stylexjs/babel-plugin', () => { '--small': '8px' }); `), - ).toThrow(messages.INVALID_CONST_KEY); + ).not.toThrow(); }); test('invalid key: non-static', () => { diff --git a/packages/@stylexjs/babel-plugin/src/shared/messages.js b/packages/@stylexjs/babel-plugin/src/shared/messages.js index 157baaa43..6d776113b 100644 --- a/packages/@stylexjs/babel-plugin/src/shared/messages.js +++ b/packages/@stylexjs/babel-plugin/src/shared/messages.js @@ -35,8 +35,6 @@ export const ILLEGAL_PROP_VALUE = export const ILLEGAL_PROP_ARRAY_VALUE = 'A style array value can only contain strings or numbers.'; export const ILLEGAL_NAMESPACE_VALUE = 'A StyleX namespace must be an object.'; -export const INVALID_CONST_KEY = - 'Keys in defineConsts() cannot start with "--".'; export const INVALID_PSEUDO = 'Invalid pseudo selector, not on the whitelist.'; export const INVALID_PSEUDO_OR_AT_RULE = 'Invalid pseudo or at-rule.'; export const INVALID_MEDIA_QUERY_SYNTAX = 'Invalid media query syntax.'; diff --git a/packages/@stylexjs/babel-plugin/src/shared/stylex-define-consts.js b/packages/@stylexjs/babel-plugin/src/shared/stylex-define-consts.js index 13451bab8..bf1e312db 100644 --- a/packages/@stylexjs/babel-plugin/src/shared/stylex-define-consts.js +++ b/packages/@stylexjs/babel-plugin/src/shared/stylex-define-consts.js @@ -11,8 +11,6 @@ import type { InjectableConstStyle, StyleXOptions } from './common-types'; import type { ConstsConfig } from './stylex-consts-utils'; import { defaultOptions } from './utils/default-options'; -import * as messages from './messages'; - import createHash from './hash'; export default function styleXDefineConsts( @@ -31,16 +29,13 @@ export default function styleXDefineConsts( const injectableStyles: { [string]: InjectableConstStyle } = {}; for (const [key, value] of Object.entries(constants)) { - if (key.startsWith('--')) { - throw new Error(messages.INVALID_CONST_KEY); - } - const varSafeKey = ( key[0] >= '0' && key[0] <= '9' ? `_${key}` : key ).replace(/[^a-zA-Z0-9]/g, '_'); - const constKey = - debug && enableDebugClassNames + const constKey = key.startsWith('--') + ? key.slice(2) + : debug && enableDebugClassNames ? `${varSafeKey}-${classNamePrefix}${createHash(`${exportId}.${key}`)}` : `${classNamePrefix}${createHash(`${exportId}.${key}`)}`;