@stylexjs/babel-plugin 0.11.0 → 0.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/lib/index.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ // Solves the issue: https://github.com/facebook/stylex/issues/889
1
2
  /**
2
3
  * Copyright (c) Meta Platforms, Inc. and affiliates.
3
4
  *
@@ -43,4 +44,4 @@ export type StyleXTransformObj = Readonly<{
43
44
  processStylexRules: typeof processStylexRules;
44
45
  }>;
45
46
  declare const $$EXPORT_DEFAULT_DECLARATION$$: StyleXTransformObj;
46
- export default $$EXPORT_DEFAULT_DECLARATION$$;
47
+ export = $$EXPORT_DEFAULT_DECLARATION$$;
package/lib/index.js CHANGED
@@ -735,6 +735,7 @@ class StateManager {
735
735
  const enableDebugClassNames = logAndDefault(boolean(), options.enableDebugClassNames ?? true, true, 'options.enableDebugClassNames');
736
736
  const enableDebugDataProp = logAndDefault(boolean(), options.enableDebugDataProp ?? true, true, 'options.enableDebugDataProp');
737
737
  const enableDevClassNames = logAndDefault(boolean(), options.enableDevClassNames ?? false, false, 'options.enableDevClassNames');
738
+ const enableMinifiedKeys = logAndDefault(boolean(), options.enableMinifiedKeys ?? true, true, 'options.enableMinifiedKeys');
738
739
  const test = logAndDefault(boolean(), options.test ?? false, false, 'options.test');
739
740
  const configRuntimeInjection = logAndDefault(checkRuntimeInjection, options.runtimeInjection ?? dev, dev, 'options.runtimeInjection');
740
741
  const runtimeInjection = configRuntimeInjection === true ? DEFAULT_INJECT_PATH : configRuntimeInjection === false ? undefined : configRuntimeInjection;
@@ -763,6 +764,7 @@ class StateManager {
763
764
  enableDebugClassNames,
764
765
  enableDebugDataProp,
765
766
  enableDevClassNames,
767
+ enableMinifiedKeys,
766
768
  genConditionalClasses,
767
769
  importSources,
768
770
  rewriteAliases: typeof options.rewriteAliases === 'boolean' ? options.rewriteAliases : false,
@@ -1239,29 +1241,32 @@ function addSourceMapData(obj, babelPath, state) {
1239
1241
  for (const [key, value] of Object.entries(obj)) {
1240
1242
  const currentFile = babelPath.hub.file;
1241
1243
  const sourceMap = currentFile.codeMap;
1242
- const styleNodePath = babelPath.get('arguments.0.properties').find(prop => prop.node.key.name === key);
1243
- if (!styleNodePath) {
1244
- console.warn(`Style node path not found for key: ${key}`);
1245
- continue;
1246
- }
1247
- const generatedLineNumber = styleNodePath.node.loc?.start.line;
1248
- let originalLineNumber = generatedLineNumber;
1249
- if (sourceMap && originalLineNumber) {
1250
- const originalPosition = sourceMap.originalPositionFor({
1251
- line: generatedLineNumber,
1252
- column: styleNodePath.node.loc?.start.column
1253
- });
1254
- if (originalPosition && originalPosition.line !== null) {
1255
- originalLineNumber = originalPosition.line;
1256
- } else {
1257
- console.warn(`Could not determine original line number for key: ${key}`);
1244
+ const styleNodePath = babelPath.get('arguments.0.properties').find(prop => {
1245
+ const k = prop.node.key;
1246
+ return t__namespace.isIdentifier(k) && k.name === key || t__namespace.isStringLiteral(k) && k.value === key || t__namespace.isNumericLiteral(k) && String(k.value) === key;
1247
+ });
1248
+ if (styleNodePath) {
1249
+ const generatedLineNumber = styleNodePath.node.loc?.start.line;
1250
+ let originalLineNumber = generatedLineNumber;
1251
+ if (sourceMap && originalLineNumber) {
1252
+ const originalPosition = sourceMap.originalPositionFor({
1253
+ line: generatedLineNumber,
1254
+ column: styleNodePath.node.loc?.start.column
1255
+ });
1256
+ if (originalPosition && originalPosition.line !== null) {
1257
+ originalLineNumber = originalPosition.line;
1258
+ } else {
1259
+ console.warn(`Could not determine original line number for key: ${key}`);
1260
+ }
1258
1261
  }
1262
+ const shortFilename = createShortFilename(currentFile.opts.filename || '', state);
1263
+ result[key] = {
1264
+ ...value,
1265
+ $$css: shortFilename !== '' && originalLineNumber ? `${shortFilename}:${originalLineNumber}` : true
1266
+ };
1267
+ } else {
1268
+ result[key] = value;
1259
1269
  }
1260
- const shortFilename = createShortFilename(currentFile.opts.filename || '', state);
1261
- result[key] = {
1262
- ...value,
1263
- $$css: shortFilename !== '' && originalLineNumber ? `${shortFilename}:${originalLineNumber}` : true
1264
- };
1265
1270
  }
1266
1271
  return result;
1267
1272
  }
@@ -1401,8 +1406,12 @@ function evaluateThemeRef(fileName, exportName, state) {
1401
1406
  exportName,
1402
1407
  key
1403
1408
  });
1404
- const debug = state.traversalState.options.debug;
1405
- const varName = debug === true ? key + '-' + state.traversalState.options.classNamePrefix + shared.utils.hash(strToHash) : state.traversalState.options.classNamePrefix + shared.utils.hash(strToHash);
1409
+ const {
1410
+ debug,
1411
+ enableDebugClassNames
1412
+ } = state.traversalState.options;
1413
+ const varSafeKey = (key[0] >= '0' && key[0] <= '9' ? `_${key}` : key).replace(/[^a-zA-Z0-9]/g, '_');
1414
+ const varName = debug && enableDebugClassNames ? varSafeKey + '-' + state.traversalState.options.classNamePrefix + shared.utils.hash(strToHash) : state.traversalState.options.classNamePrefix + shared.utils.hash(strToHash);
1406
1415
  if (key === '__themeName__') {
1407
1416
  return varName;
1408
1417
  }
@@ -1674,7 +1683,7 @@ function _evaluate(path, state) {
1674
1683
  deopt: resultDeopt,
1675
1684
  reason: deoptReason,
1676
1685
  value
1677
- } = evaluate(keyPath, state.traversalState, state.functions);
1686
+ } = evaluate(keyPath, state.traversalState, state.functions, state.seen);
1678
1687
  if (!confident) {
1679
1688
  resultDeopt && deopt(resultDeopt, state, deoptReason ?? 'unknown error');
1680
1689
  return;
@@ -1686,7 +1695,7 @@ function _evaluate(path, state) {
1686
1695
  key = keyPath.node.value;
1687
1696
  }
1688
1697
  const valuePath = prop.get('value');
1689
- let value = evaluate(valuePath, state.traversalState, state.functions);
1698
+ let value = evaluate(valuePath, state.traversalState, state.functions, state.seen);
1690
1699
  if (!value.confident) {
1691
1700
  value.deopt && deopt(value.deopt, state, value.reason ?? 'unknown error');
1692
1701
  return;
@@ -1909,12 +1918,13 @@ function evaluate(path, traversalState) {
1909
1918
  identifiers: {},
1910
1919
  memberExpressions: {}
1911
1920
  };
1921
+ let seen = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : new Map();
1912
1922
  const addedImports = importsForState.get(traversalState) ?? new Set();
1913
1923
  importsForState.set(traversalState, addedImports);
1914
1924
  const state = {
1915
1925
  confident: true,
1916
1926
  deoptPath: null,
1917
- seen: new Map(),
1927
+ seen,
1918
1928
  addedImports,
1919
1929
  functions,
1920
1930
  traversalState
@@ -2766,7 +2776,7 @@ function requireMessages () {
2766
2776
  Object.defineProperty(messages, "__esModule", {
2767
2777
  value: true
2768
2778
  });
2769
- messages.UNKNOWN_PROP_KEY = messages.UNKNOWN_NAMESPACE = messages.UNEXPECTED_ARGUMENT = messages.UNBOUND_STYLEX_CALL_VALUE = messages.ONLY_TOP_LEVEL = messages.ONLY_NAMED_PARAMETERS_IN_DYNAMIC_STYLE_FUNCTIONS = messages.NO_PROJECT_ROOT_DIRECTORY = messages.NO_PARENT_PATH = messages.NO_CONDITIONAL_SHORTHAND = messages.NON_STATIC_VALUE = messages.NON_STATIC_KEYFRAME_VALUE = messages.NON_OBJECT_KEYFRAME = messages.NON_OBJECT_FOR_STYLEX_KEYFRAMES_CALL = messages.NON_OBJECT_FOR_STYLEX_CALL = messages.NON_EXPORT_NAMED_DECLARATION = messages.NON_CONTIGUOUS_VARS = messages.LOCAL_ONLY = messages.LINT_UNCLOSED_FUNCTION = messages.INVALID_SPREAD = messages.INVALID_PSEUDO_OR_AT_RULE = messages.INVALID_PSEUDO = messages.ILLEGAL_PROP_VALUE = messages.ILLEGAL_PROP_ARRAY_VALUE = messages.ILLEGAL_NESTED_PSEUDO = messages.ILLEGAL_NAMESPACE_VALUE = messages.ILLEGAL_NAMESPACE_TYPE = messages.ILLEGAL_ARG_LENGTH_FOR_KEYFRAMES = messages.ILLEGAL_ARGUMENT_LENGTH = messages.EXPECTED_FUNCTION_CALL = messages.ESCAPED_STYLEX_VALUE = messages.DUPLICATE_CONDITIONAL = messages.ANONYMOUS_THEME = void 0;
2779
+ messages.UNKNOWN_PROP_KEY = messages.UNKNOWN_NAMESPACE = messages.UNEXPECTED_ARGUMENT = messages.UNBOUND_STYLEX_CALL_VALUE = messages.ONLY_TOP_LEVEL = messages.ONLY_NAMED_PARAMETERS_IN_DYNAMIC_STYLE_FUNCTIONS = messages.NO_PROJECT_ROOT_DIRECTORY = messages.NO_PARENT_PATH = messages.NO_OBJECT_SPREADS = messages.NO_CONDITIONAL_SHORTHAND = messages.NON_STATIC_VALUE = messages.NON_STATIC_KEYFRAME_VALUE = messages.NON_OBJECT_KEYFRAME = messages.NON_OBJECT_FOR_STYLEX_KEYFRAMES_CALL = messages.NON_OBJECT_FOR_STYLEX_CALL = messages.NON_EXPORT_NAMED_DECLARATION = messages.NON_CONTIGUOUS_VARS = messages.LOCAL_ONLY = messages.LINT_UNCLOSED_FUNCTION = messages.INVALID_SPREAD = messages.INVALID_PSEUDO_OR_AT_RULE = messages.INVALID_PSEUDO = messages.ILLEGAL_PROP_VALUE = messages.ILLEGAL_PROP_ARRAY_VALUE = messages.ILLEGAL_NESTED_PSEUDO = messages.ILLEGAL_NAMESPACE_VALUE = messages.ILLEGAL_NAMESPACE_TYPE = messages.ILLEGAL_ARG_LENGTH_FOR_KEYFRAMES = messages.ILLEGAL_ARGUMENT_LENGTH = messages.EXPECTED_FUNCTION_CALL = messages.ESCAPED_STYLEX_VALUE = messages.DUPLICATE_CONDITIONAL = messages.ANONYMOUS_THEME = void 0;
2770
2780
  messages.ILLEGAL_ARGUMENT_LENGTH = 'stylex.create() should have 1 argument.';
2771
2781
  messages.ILLEGAL_ARG_LENGTH_FOR_KEYFRAMES = 'stylex.keyframes() should have 1 argument.';
2772
2782
  messages.NON_STATIC_VALUE = 'Only static values are allowed inside of a stylex.create() call.';
@@ -2799,6 +2809,7 @@ function requireMessages () {
2799
2809
  messages.ANONYMOUS_THEME = 'stylex.createTheme() must be bound to a named constant.';
2800
2810
  messages.ONLY_NAMED_PARAMETERS_IN_DYNAMIC_STYLE_FUNCTIONS = 'Only named parameters are allowed in Dynamic Style functions. Destructuring, spreading or default values are not allowed.';
2801
2811
  messages.NON_CONTIGUOUS_VARS = 'All variables passed to `stylex.firstThatWorks` must be contiguous.';
2812
+ messages.NO_OBJECT_SPREADS = 'Object spreads are not allowed in stylex.create call.';
2802
2813
  return messages;
2803
2814
  }
2804
2815
 
@@ -3757,11 +3768,22 @@ function transformStyleXCreate(path, state) {
3757
3768
  const plainObject = value;
3758
3769
  const injectedInheritStyles = {};
3759
3770
  if (fns != null) {
3760
- const dynamicFnsNames = Object.values(fns)?.map(entry => Object.keys(entry[1])).flat();
3761
- dynamicFnsNames.forEach(fnsName => {
3762
- injectedInheritStyles[fnsName] = {
3771
+ const dynamicFnsNames = Object.values(fns)?.map(entry => Object.entries(entry[1]).map(_ref => {
3772
+ let [variableName, obj] = _ref;
3773
+ return {
3774
+ variableName,
3775
+ path: obj.path
3776
+ };
3777
+ })).flat();
3778
+ dynamicFnsNames.forEach(_ref2 => {
3779
+ let {
3780
+ variableName,
3781
+ path
3782
+ } = _ref2;
3783
+ const isPseudoElement = path.some(p => p.startsWith('::'));
3784
+ injectedInheritStyles[variableName] = {
3763
3785
  priority: 0,
3764
- ltr: `@property ${fnsName} { syntax: "*"; inherits: false;}`,
3786
+ ltr: `@property ${variableName} { syntax: "*";${isPseudoElement ? '' : ' inherits: false;'}}`,
3765
3787
  rtl: null
3766
3788
  };
3767
3789
  });
@@ -3810,8 +3832,8 @@ function transformStyleXCreate(path, state) {
3810
3832
  for (const [className, classPaths] of Object.entries(classPathsPerNamespace[key])) {
3811
3833
  origClassPaths[className] = classPaths.join('_');
3812
3834
  }
3813
- let dynamicStyles = Object.entries(inlineStyles).map(_ref => {
3814
- let [_key, v] = _ref;
3835
+ let dynamicStyles = Object.entries(inlineStyles).map(_ref3 => {
3836
+ let [_key, v] = _ref3;
3815
3837
  return {
3816
3838
  expression: v.originalExpression,
3817
3839
  key: v.path.slice(0, v.path.findIndex(p => !p.startsWith(':') && !p.startsWith('@')) + 1).join('_'),
@@ -3830,10 +3852,10 @@ function transformStyleXCreate(path, state) {
3830
3852
  const objProp = prop;
3831
3853
  const propKey = objProp.key.type === 'Identifier' && !objProp.computed ? objProp.key.name : objProp.key.type === 'StringLiteral' ? objProp.key.value : null;
3832
3854
  if (propKey != null) {
3833
- const dynamicMatch = dynamicStyles.filter(_ref2 => {
3855
+ const dynamicMatch = dynamicStyles.filter(_ref4 => {
3834
3856
  let {
3835
3857
  key
3836
- } = _ref2;
3858
+ } = _ref4;
3837
3859
  return key === propKey;
3838
3860
  });
3839
3861
  if (dynamicMatch.length > 0) {
@@ -3842,26 +3864,26 @@ function transformStyleXCreate(path, state) {
3842
3864
  const classList = value.value.split(' ');
3843
3865
  if (classList.length === 1) {
3844
3866
  const cls = classList[0];
3845
- const expr = dynamicMatch.find(_ref3 => {
3867
+ const expr = dynamicMatch.find(_ref5 => {
3846
3868
  let {
3847
3869
  path
3848
- } = _ref3;
3870
+ } = _ref5;
3849
3871
  return origClassPaths[cls] === path;
3850
3872
  })?.expression;
3851
3873
  if (expr != null) {
3852
3874
  objProp.value = t__namespace.conditionalExpression(t__namespace.binaryExpression('==', expr, t__namespace.nullLiteral()), t__namespace.nullLiteral(), value);
3853
3875
  }
3854
- } else if (classList.some(cls => dynamicMatch.find(_ref4 => {
3876
+ } else if (classList.some(cls => dynamicMatch.find(_ref6 => {
3855
3877
  let {
3856
3878
  path
3857
- } = _ref4;
3879
+ } = _ref6;
3858
3880
  return origClassPaths[cls] === path;
3859
3881
  }))) {
3860
3882
  const exprArray = classList.map((cls, index) => {
3861
- const expr = dynamicMatch.find(_ref5 => {
3883
+ const expr = dynamicMatch.find(_ref7 => {
3862
3884
  let {
3863
3885
  path
3864
- } = _ref5;
3886
+ } = _ref7;
3865
3887
  return origClassPaths[cls] === path;
3866
3888
  })?.expression;
3867
3889
  const suffix = index === classList.length - 1 ? '' : ' ';
@@ -3880,8 +3902,8 @@ function transformStyleXCreate(path, state) {
3880
3902
  }
3881
3903
  return objProp;
3882
3904
  });
3883
- prop.value = t__namespace.arrowFunctionExpression(params, t__namespace.arrayExpression([value, t__namespace.objectExpression(Object.entries(inlineStyles).map(_ref6 => {
3884
- let [key, value] = _ref6;
3905
+ prop.value = t__namespace.arrowFunctionExpression(params, t__namespace.arrayExpression([value, t__namespace.objectExpression(Object.entries(inlineStyles).map(_ref8 => {
3906
+ let [key, value] = _ref8;
3885
3907
  return t__namespace.objectProperty(t__namespace.stringLiteral(key), value.expression);
3886
3908
  }))]));
3887
3909
  }
@@ -3890,11 +3912,11 @@ function transformStyleXCreate(path, state) {
3890
3912
  return prop;
3891
3913
  });
3892
3914
  }
3893
- const listOfStyles = Object.entries(injectedStyles).map(_ref7 => {
3915
+ const listOfStyles = Object.entries(injectedStyles).map(_ref9 => {
3894
3916
  let [key, {
3895
3917
  priority,
3896
3918
  ...rest
3897
- }] = _ref7;
3919
+ }] = _ref9;
3898
3920
  return [key, rest, priority];
3899
3921
  });
3900
3922
  state.registerStyles(listOfStyles, path);
@@ -3916,9 +3938,14 @@ function validateStyleXCreate(path) {
3916
3938
  if (path.node.arguments.length !== 1) {
3917
3939
  throw path.buildCodeFrameError(shared.messages.ILLEGAL_ARGUMENT_LENGTH, SyntaxError);
3918
3940
  }
3919
- if (path.node.arguments[0].type !== 'ObjectExpression') {
3941
+ const arg = path.node.arguments[0];
3942
+ if (arg.type !== 'ObjectExpression') {
3920
3943
  throw path.buildCodeFrameError(shared.messages.NON_OBJECT_FOR_STYLEX_CALL, SyntaxError);
3921
3944
  }
3945
+ const hasSpread = arg.properties.some(prop => t__namespace.isSpreadElement(prop));
3946
+ if (hasSpread) {
3947
+ throw path.buildCodeFrameError(shared.messages.NO_OBJECT_SPREADS, SyntaxError);
3948
+ }
3922
3949
  }
3923
3950
  function findNearestStatementAncestor(path) {
3924
3951
  if (path.isStatement()) {
@@ -3930,15 +3957,15 @@ function findNearestStatementAncestor(path) {
3930
3957
  return findNearestStatementAncestor(path.parentPath);
3931
3958
  }
3932
3959
  function legacyExpandShorthands(dynamicStyles) {
3933
- const expandedKeysToKeyPaths = dynamicStyles.flatMap((_ref8, i) => {
3960
+ const expandedKeysToKeyPaths = dynamicStyles.flatMap((_ref10, i) => {
3934
3961
  let {
3935
3962
  key
3936
- } = _ref8;
3963
+ } = _ref10;
3937
3964
  return flatMapExpandedShorthands([key, 'p' + i], {
3938
3965
  styleResolution: 'legacy-expand-shorthands'
3939
3966
  });
3940
- }).map(_ref9 => {
3941
- let [key, value] = _ref9;
3967
+ }).map(_ref11 => {
3968
+ let [key, value] = _ref11;
3942
3969
  if (typeof value !== 'string') {
3943
3970
  return null;
3944
3971
  }
@@ -8,6 +8,7 @@
8
8
  */
9
9
 
10
10
  import type { NodePath } from '@babel/traverse';
11
+ import * as t from '@babel/types';
11
12
  import StateManager from './state-manager';
12
13
  export type FunctionConfig = {
13
14
  identifiers: { [fnName: string]: any };
@@ -20,10 +21,14 @@ export type FunctionConfig = {
20
21
  };
21
22
  };
22
23
  };
24
+ type Result =
25
+ | { resolved: true; value: any }
26
+ | { resolved: false; reason: string };
23
27
  export declare function evaluate(
24
28
  path: NodePath,
25
29
  traversalState: StateManager,
26
30
  functions: FunctionConfig,
31
+ seen: Map<t.Node, Result>,
27
32
  ): Readonly<{
28
33
  confident: boolean;
29
34
  value: any;
@@ -8,6 +8,7 @@
8
8
  */
9
9
 
10
10
  import type { NodePath } from '../../flow_modules/@babel/traverse';
11
+ import * as t from '../../flow_modules/@babel/types';
11
12
  import StateManager from './state-manager';
12
13
  export type FunctionConfig = {
13
14
  identifiers: {
@@ -23,10 +24,20 @@ export type FunctionConfig = {
23
24
  },
24
25
  };
25
26
 
27
+ type Result =
28
+ | {
29
+ resolved: true,
30
+ value: any,
31
+ }
32
+ | {
33
+ resolved: false,
34
+ reason: string,
35
+ };
26
36
  declare export function evaluate(
27
37
  path: NodePath<>,
28
38
  traversalState: StateManager,
29
39
  functions: FunctionConfig,
40
+ seen: Map<t.Node, Result>,
30
41
  ): $ReadOnly<{
31
42
  confident: boolean,
32
43
  value: any,
@@ -45,6 +45,7 @@ export type StyleXOptions = Readonly<
45
45
  enableDebugClassNames?: boolean;
46
46
  enableDebugDataProp?: boolean;
47
47
  enableDevClassNames?: boolean;
48
+ enableMinifiedKeys?: boolean;
48
49
  genConditionalClasses: boolean;
49
50
  importSources: ReadonlyArray<
50
51
  string | Readonly<{ from: string; as: string }>
@@ -65,6 +66,7 @@ export type StyleXOptions = Readonly<
65
66
  enableDebugClassNames?: boolean;
66
67
  enableDebugDataProp?: boolean;
67
68
  enableDevClassNames?: boolean;
69
+ enableMinifiedKeys?: boolean;
68
70
  genConditionalClasses: boolean;
69
71
  importSources: ReadonlyArray<
70
72
  string | Readonly<{ from: string; as: string }>
@@ -46,6 +46,7 @@ export type StyleXOptions = $ReadOnly<{
46
46
  enableDebugClassNames?: boolean,
47
47
  enableDebugDataProp?: boolean,
48
48
  enableDevClassNames?: boolean,
49
+ enableMinifiedKeys?: boolean,
49
50
  genConditionalClasses: boolean,
50
51
  importSources: $ReadOnlyArray<
51
52
  string | $ReadOnly<{ from: string, as: string }>,
@@ -0,0 +1,30 @@
1
+ /**
2
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ *
8
+ */
9
+
10
+ import * as t from '@babel/types';
11
+ import type { NodePath } from '@babel/traverse';
12
+ import StateManager from '../utils/state-manager';
13
+ /**
14
+ * This function looks for `stylex.defineConsts` calls and transforms them.
15
+ *
16
+ * 1. It finds the first argument to `stylex.defineConsts` and validates it.
17
+ * 2. It evaluates the constants object to get a JS object.
18
+ * 3. It uses `styleXDefineConsts` to transform the object into a structured format.
19
+ * 4. It converts the resulting object back into an AST and replaces the function call with it.
20
+ * 5. The transformed constants are stored in metadata and used during rule processing.
21
+ * 6. During CSS rule generation, any references to `var(--keyhash)` (or `var(--keyhash, fallback)`)
22
+ * are replaced with their corresponding `constVal` from `defineConsts`.
23
+ * 7. Unlike `stylex.defineVars`, `defineConsts` does not generate runtime CSS variables but instead
24
+ * directly inlines the resolved values into the final CSS output.
25
+ */
26
+ declare function transformStyleXDefineConsts(
27
+ callExpressionPath: NodePath<t.CallExpression>,
28
+ state: StateManager,
29
+ ): void;
30
+ export default transformStyleXDefineConsts;
@@ -0,0 +1,30 @@
1
+ /**
2
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ * @flow strict
8
+ */
9
+
10
+ import * as t from '../../flow_modules/@babel/types';
11
+ import type { NodePath } from '../../flow_modules/@babel/traverse';
12
+ import StateManager from '../utils/state-manager';
13
+
14
+ /**
15
+ * This function looks for `stylex.defineConsts` calls and transforms them.
16
+ *
17
+ * 1. It finds the first argument to `stylex.defineConsts` and validates it.
18
+ * 2. It evaluates the constants object to get a JS object.
19
+ * 3. It uses `styleXDefineConsts` to transform the object into a structured format.
20
+ * 4. It converts the resulting object back into an AST and replaces the function call with it.
21
+ * 5. The transformed constants are stored in metadata and used during rule processing.
22
+ * 6. During CSS rule generation, any references to `var(--keyhash)` (or `var(--keyhash, fallback)`)
23
+ * are replaced with their corresponding `constVal` from `defineConsts`.
24
+ * 7. Unlike `stylex.defineVars`, `defineConsts` does not generate runtime CSS variables but instead
25
+ * directly inlines the resolved values into the final CSS output.
26
+ */
27
+ declare export default function transformStyleXDefineConsts(
28
+ callExpressionPath: NodePath<t.CallExpression>,
29
+ state: StateManager,
30
+ ): void;
package/package.json CHANGED
@@ -1,9 +1,12 @@
1
1
  {
2
2
  "name": "@stylexjs/babel-plugin",
3
- "version": "0.11.0",
3
+ "version": "0.12.0",
4
4
  "description": "StyleX babel plugin.",
5
5
  "main": "lib/index.js",
6
- "repository": "https://github.com/facebook/stylex",
6
+ "repository": {
7
+ "type": "git",
8
+ "url": "git+https://github.com/facebook/stylex.git"
9
+ },
7
10
  "license": "MIT",
8
11
  "scripts": {
9
12
  "prebuild": "gen-types -i src/ -o lib/",
@@ -14,12 +17,21 @@
14
17
  },
15
18
  "dependencies": {
16
19
  "@babel/helper-module-imports": "^7.25.9",
17
- "@stylexjs/shared": "0.11.0",
18
- "@stylexjs/stylex": "0.11.0",
19
20
  "@babel/core": "^7.26.8",
20
21
  "@babel/traverse": "^7.26.8",
21
22
  "@babel/types": "^7.26.8",
22
- "@dual-bundle/import-meta-resolve": "^4.1.0"
23
+ "@dual-bundle/import-meta-resolve": "^4.1.0",
24
+ "@stylexjs/shared": "0.12.0",
25
+ "@stylexjs/stylex": "0.12.0"
26
+ },
27
+ "devDependencies": {
28
+ "@rollup/plugin-alias": "^5.1.1",
29
+ "@rollup/plugin-babel": "^6.0.4",
30
+ "@rollup/plugin-commonjs": "^28.0.1",
31
+ "@rollup/plugin-json": "^6.1.0",
32
+ "@rollup/plugin-node-resolve": "^15.3.0",
33
+ "@rollup/plugin-replace": "^6.0.1",
34
+ "rollup": "^4.24.0"
23
35
  },
24
36
  "jest": {
25
37
  "verbose": true,