@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 +2 -1
- package/lib/index.js +77 -50
- package/lib/utils/evaluate-path.d.ts +5 -0
- package/lib/utils/evaluate-path.js.flow +11 -0
- package/lib/utils/state-manager.d.ts +2 -0
- package/lib/utils/state-manager.js.flow +1 -0
- package/lib/visitors/stylex-define-consts.d.ts +30 -0
- package/lib/visitors/stylex-define-consts.js.flow +30 -0
- package/package.json +17 -5
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
|
|
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 =>
|
|
1243
|
-
|
|
1244
|
-
|
|
1245
|
-
|
|
1246
|
-
|
|
1247
|
-
|
|
1248
|
-
|
|
1249
|
-
|
|
1250
|
-
|
|
1251
|
-
|
|
1252
|
-
|
|
1253
|
-
|
|
1254
|
-
|
|
1255
|
-
|
|
1256
|
-
|
|
1257
|
-
|
|
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
|
|
1405
|
-
|
|
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
|
|
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.
|
|
3761
|
-
|
|
3762
|
-
|
|
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 ${
|
|
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(
|
|
3814
|
-
let [_key, v] =
|
|
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(
|
|
3855
|
+
const dynamicMatch = dynamicStyles.filter(_ref4 => {
|
|
3834
3856
|
let {
|
|
3835
3857
|
key
|
|
3836
|
-
} =
|
|
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(
|
|
3867
|
+
const expr = dynamicMatch.find(_ref5 => {
|
|
3846
3868
|
let {
|
|
3847
3869
|
path
|
|
3848
|
-
} =
|
|
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(
|
|
3876
|
+
} else if (classList.some(cls => dynamicMatch.find(_ref6 => {
|
|
3855
3877
|
let {
|
|
3856
3878
|
path
|
|
3857
|
-
} =
|
|
3879
|
+
} = _ref6;
|
|
3858
3880
|
return origClassPaths[cls] === path;
|
|
3859
3881
|
}))) {
|
|
3860
3882
|
const exprArray = classList.map((cls, index) => {
|
|
3861
|
-
const expr = dynamicMatch.find(
|
|
3883
|
+
const expr = dynamicMatch.find(_ref7 => {
|
|
3862
3884
|
let {
|
|
3863
3885
|
path
|
|
3864
|
-
} =
|
|
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(
|
|
3884
|
-
let [key, value] =
|
|
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(
|
|
3915
|
+
const listOfStyles = Object.entries(injectedStyles).map(_ref9 => {
|
|
3894
3916
|
let [key, {
|
|
3895
3917
|
priority,
|
|
3896
3918
|
...rest
|
|
3897
|
-
}] =
|
|
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
|
-
|
|
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((
|
|
3960
|
+
const expandedKeysToKeyPaths = dynamicStyles.flatMap((_ref10, i) => {
|
|
3934
3961
|
let {
|
|
3935
3962
|
key
|
|
3936
|
-
} =
|
|
3963
|
+
} = _ref10;
|
|
3937
3964
|
return flatMapExpandedShorthands([key, 'p' + i], {
|
|
3938
3965
|
styleResolution: 'legacy-expand-shorthands'
|
|
3939
3966
|
});
|
|
3940
|
-
}).map(
|
|
3941
|
-
let [key, value] =
|
|
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.
|
|
3
|
+
"version": "0.12.0",
|
|
4
4
|
"description": "StyleX babel plugin.",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
|
-
"repository":
|
|
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,
|