@stylexjs/babel-plugin 0.14.0 → 0.14.2
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.js +71 -35
- package/lib/shared/common-types.d.ts +1 -0
- package/lib/shared/common-types.js.flow +1 -0
- package/lib/shared/messages.d.ts +1 -0
- package/lib/shared/messages.js.flow +1 -0
- package/lib/shared/stylex-create-theme.d.ts +1 -1
- package/lib/shared/stylex-create-theme.js.flow +1 -1
- package/lib/shared/stylex-define-consts.d.ts +2 -2
- package/lib/shared/stylex-define-consts.js.flow +1 -1
- package/lib/shared/stylex-define-vars.d.ts +4 -4
- package/lib/shared/stylex-define-vars.js.flow +2 -2
- package/lib/utils/state-manager.d.ts +2 -0
- package/lib/utils/state-manager.js.flow +1 -0
- package/package.json +3 -3
package/lib/index.js
CHANGED
|
@@ -740,6 +740,7 @@ class StateManager {
|
|
|
740
740
|
const enableFontSizePxToRem = logAndDefault(boolean(), options.enableFontSizePxToRem ?? false, false, 'options.enableFontSizePxToRem');
|
|
741
741
|
const enableInlinedConditionalMerge = logAndDefault(boolean(), options.enableInlinedConditionalMerge ?? true, true, 'options.enableInlinedConditionalMerge');
|
|
742
742
|
const enableMinifiedKeys = logAndDefault(boolean(), options.enableMinifiedKeys ?? true, true, 'options.enableMinifiedKeys');
|
|
743
|
+
const enableLegacyValueFlipping = logAndDefault(boolean(), options.enableLegacyValueFlipping ?? false, false, 'options.enableLegacyValueFlipping');
|
|
743
744
|
const enableLogicalStylesPolyfill = logAndDefault(boolean(), options.enableLogicalStylesPolyfill ?? false, false, 'options.enableLogicalStylesPolyfill');
|
|
744
745
|
const test = logAndDefault(boolean(), options.test ?? false, false, 'options.test');
|
|
745
746
|
const configRuntimeInjection = logAndDefault(checkRuntimeInjection, options.runtimeInjection ?? false, false, 'options.runtimeInjection');
|
|
@@ -770,6 +771,7 @@ class StateManager {
|
|
|
770
771
|
enableFontSizePxToRem,
|
|
771
772
|
enableInlinedConditionalMerge,
|
|
772
773
|
enableMinifiedKeys,
|
|
774
|
+
enableLegacyValueFlipping,
|
|
773
775
|
enableLogicalStylesPolyfill,
|
|
774
776
|
importSources,
|
|
775
777
|
rewriteAliases: typeof options.rewriteAliases === 'boolean' ? options.rewriteAliases : false,
|
|
@@ -1278,6 +1280,7 @@ const defaultOptions = {
|
|
|
1278
1280
|
enableDevClassNames: false,
|
|
1279
1281
|
enableDebugDataProp: true,
|
|
1280
1282
|
enableFontSizePxToRem: false,
|
|
1283
|
+
enableLegacyValueFlipping: false,
|
|
1281
1284
|
enableLogicalStylesPolyfill: false,
|
|
1282
1285
|
enableMinifiedKeys: true,
|
|
1283
1286
|
styleResolution: 'property-specificity',
|
|
@@ -2120,9 +2123,18 @@ const shorthands$1 = {
|
|
|
2120
2123
|
}, []);
|
|
2121
2124
|
return [['containIntrinsicWidth', width], ['containIntrinsicHeight', height]];
|
|
2122
2125
|
},
|
|
2123
|
-
inset: rawValue =>
|
|
2124
|
-
|
|
2125
|
-
|
|
2126
|
+
inset: rawValue => {
|
|
2127
|
+
const [top, right = top, bottom = top, left = right] = splitValue(rawValue);
|
|
2128
|
+
return [['top', top], ['insetInlineEnd', right], ['bottom', bottom], ['insetInlineStart', left]];
|
|
2129
|
+
},
|
|
2130
|
+
insetInline: rawValue => {
|
|
2131
|
+
const [start, end = start] = splitValue(rawValue);
|
|
2132
|
+
return [...shorthands$1.start(start), ...shorthands$1.end(end)];
|
|
2133
|
+
},
|
|
2134
|
+
insetBlock: rawValue => {
|
|
2135
|
+
const [top, bottom = top] = splitValue(rawValue);
|
|
2136
|
+
return [['top', top], ['bottom', bottom]];
|
|
2137
|
+
},
|
|
2126
2138
|
start: rawValue => [['insetInlineStart', rawValue], ['left', null], ['right', null]],
|
|
2127
2139
|
end: rawValue => [['insetInlineEnd', rawValue], ['left', null], ['right', null]],
|
|
2128
2140
|
left: rawValue => [['left', rawValue], ['insetInlineStart', null], ['insetInlineEnd', null]],
|
|
@@ -2135,13 +2147,17 @@ const shorthands$1 = {
|
|
|
2135
2147
|
const [top, right = top, bottom = top, left = right] = splitValue(rawValue);
|
|
2136
2148
|
return [['marginTop', top], ['marginInlineEnd', right], ['marginBottom', bottom], ['marginInlineStart', left]];
|
|
2137
2149
|
},
|
|
2138
|
-
marginHorizontal: rawValue =>
|
|
2150
|
+
marginHorizontal: rawValue => {
|
|
2151
|
+
const [start, end = start] = splitValue(rawValue);
|
|
2152
|
+
return [...shorthands$1.marginStart(start), ...shorthands$1.marginEnd(end)];
|
|
2153
|
+
},
|
|
2139
2154
|
marginStart: rawValue => [['marginInlineStart', rawValue], ['marginLeft', null], ['marginRight', null]],
|
|
2140
2155
|
marginEnd: rawValue => [['marginInlineEnd', rawValue], ['marginLeft', null], ['marginRight', null]],
|
|
2141
2156
|
marginLeft: rawValue => [['marginLeft', rawValue], ['marginInlineStart', null], ['marginInlineEnd', null]],
|
|
2142
2157
|
marginRight: rawValue => [['marginRight', rawValue], ['marginInlineStart', null], ['marginInlineEnd', null]],
|
|
2143
2158
|
marginVertical: rawValue => {
|
|
2144
|
-
|
|
2159
|
+
const [top, bottom = top] = splitValue(rawValue);
|
|
2160
|
+
return [['marginTop', top], ['marginBottom', bottom]];
|
|
2145
2161
|
},
|
|
2146
2162
|
overflow: rawValue => {
|
|
2147
2163
|
const [x, y = x] = splitValue(rawValue);
|
|
@@ -2151,12 +2167,18 @@ const shorthands$1 = {
|
|
|
2151
2167
|
const [top, right = top, bottom = top, left = right] = splitValue(rawValue);
|
|
2152
2168
|
return [['paddingTop', top], ['paddingInlineEnd', right], ['paddingBottom', bottom], ['paddingInlineStart', left]];
|
|
2153
2169
|
},
|
|
2154
|
-
paddingHorizontal: val =>
|
|
2170
|
+
paddingHorizontal: val => {
|
|
2171
|
+
const [start, end = start] = splitValue(val);
|
|
2172
|
+
return [...shorthands$1.paddingStart(start), ...shorthands$1.paddingEnd(end)];
|
|
2173
|
+
},
|
|
2155
2174
|
paddingStart: val => [['paddingInlineStart', val], ['paddingLeft', null], ['paddingRight', null]],
|
|
2156
2175
|
paddingEnd: val => [['paddingInlineEnd', val], ['paddingLeft', null], ['paddingRight', null]],
|
|
2157
2176
|
paddingLeft: val => [['paddingLeft', val], ['paddingStart', null], ['paddingEnd', null]],
|
|
2158
2177
|
paddingRight: val => [['paddingRight', val], ['paddingInlineStart', null], ['paddingInlineEnd', null]],
|
|
2159
|
-
paddingVertical: val =>
|
|
2178
|
+
paddingVertical: val => {
|
|
2179
|
+
const [top, bottom = top] = splitValue(val);
|
|
2180
|
+
return [['paddingTop', top], ['paddingBottom', bottom]];
|
|
2181
|
+
}
|
|
2160
2182
|
};
|
|
2161
2183
|
const aliases$1 = {
|
|
2162
2184
|
insetBlockStart: val => [['top', val]],
|
|
@@ -2482,6 +2504,7 @@ const nonStaticValue = fn => `Only static values are allowed inside of a ${fn}()
|
|
|
2482
2504
|
const nonStyleObject = fn => `${fn}() can only accept an object.`;
|
|
2483
2505
|
const nonExportNamedDeclaration = fn => `The return value of ${fn}() must be bound to a named export.`;
|
|
2484
2506
|
const unboundCallValue = fn => `${fn}() calls must be bound to a bare variable.`;
|
|
2507
|
+
const cannotGenerateHash = fn => `Unable to generate hash for ${fn}(). Check that the file has a valid extension and that unstable_moduleResolution is configured.`;
|
|
2485
2508
|
const DUPLICATE_CONDITIONAL = 'The same pseudo selector or at-rule cannot be used more than once.';
|
|
2486
2509
|
const ESCAPED_STYLEX_VALUE = 'Escaping a create() value is not allowed.';
|
|
2487
2510
|
const ILLEGAL_NESTED_PSEUDO = "Pseudo objects can't be nested more than one level deep.";
|
|
@@ -2523,6 +2546,7 @@ var m = /*#__PURE__*/Object.freeze({
|
|
|
2523
2546
|
POSITION_TRY_INVALID_PROPERTY: POSITION_TRY_INVALID_PROPERTY,
|
|
2524
2547
|
UNKNOWN_PROP_KEY: UNKNOWN_PROP_KEY,
|
|
2525
2548
|
VIEW_TRANSITION_CLASS_INVALID_PROPERTY: VIEW_TRANSITION_CLASS_INVALID_PROPERTY,
|
|
2549
|
+
cannotGenerateHash: cannotGenerateHash,
|
|
2526
2550
|
illegalArgumentLength: illegalArgumentLength,
|
|
2527
2551
|
nonExportNamedDeclaration: nonExportNamedDeclaration,
|
|
2528
2552
|
nonStaticValue: nonStaticValue,
|
|
@@ -3042,17 +3066,29 @@ const propertyToRTL = {
|
|
|
3042
3066
|
}
|
|
3043
3067
|
return [key, words.map(word => word === 'start' || word === 'insetInlineStart' ? 'right' : word === 'end' || word === 'insetInlineEnd' ? 'left' : word).join(' ')];
|
|
3044
3068
|
},
|
|
3045
|
-
cursor: _ref40
|
|
3069
|
+
cursor: function (_ref40) {
|
|
3046
3070
|
let [key, val] = _ref40;
|
|
3071
|
+
let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultOptions;
|
|
3072
|
+
if (!options.enableLegacyValueFlipping) {
|
|
3073
|
+
return null;
|
|
3074
|
+
}
|
|
3047
3075
|
return cursorFlip[val] != null ? [key, cursorFlip[val]] : null;
|
|
3048
3076
|
},
|
|
3049
|
-
'box-shadow': _ref41
|
|
3077
|
+
'box-shadow': function (_ref41) {
|
|
3050
3078
|
let [key, val] = _ref41;
|
|
3079
|
+
let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultOptions;
|
|
3080
|
+
if (!options.enableLegacyValueFlipping) {
|
|
3081
|
+
return null;
|
|
3082
|
+
}
|
|
3051
3083
|
const rtlVal = flipShadow(val);
|
|
3052
3084
|
return rtlVal ? [key, rtlVal] : null;
|
|
3053
3085
|
},
|
|
3054
|
-
'text-shadow': _ref42
|
|
3086
|
+
'text-shadow': function (_ref42) {
|
|
3055
3087
|
let [key, val] = _ref42;
|
|
3088
|
+
let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultOptions;
|
|
3089
|
+
if (!options.enableLegacyValueFlipping) {
|
|
3090
|
+
return null;
|
|
3091
|
+
}
|
|
3056
3092
|
const rtlVal = flipShadow(val);
|
|
3057
3093
|
return rtlVal ? [key, rtlVal] : null;
|
|
3058
3094
|
}
|
|
@@ -3078,7 +3114,7 @@ function generateRTL(_ref43) {
|
|
|
3078
3114
|
if (!propertyToRTL[key]) {
|
|
3079
3115
|
return null;
|
|
3080
3116
|
}
|
|
3081
|
-
return propertyToRTL[key]([key, value]);
|
|
3117
|
+
return propertyToRTL[key]([key, value], options);
|
|
3082
3118
|
}
|
|
3083
3119
|
|
|
3084
3120
|
const longHandPhysical = new Set();
|
|
@@ -4286,18 +4322,18 @@ function getDefaultValue(value) {
|
|
|
4286
4322
|
function styleXDefineVars(variables, options) {
|
|
4287
4323
|
const {
|
|
4288
4324
|
classNamePrefix,
|
|
4289
|
-
|
|
4325
|
+
exportId,
|
|
4290
4326
|
debug,
|
|
4291
4327
|
enableDebugClassNames
|
|
4292
4328
|
} = {
|
|
4293
4329
|
...defaultOptions,
|
|
4294
4330
|
...options
|
|
4295
4331
|
};
|
|
4296
|
-
const
|
|
4332
|
+
const varGroupHash = classNamePrefix + hash(exportId);
|
|
4297
4333
|
const typedVariables = {};
|
|
4298
4334
|
const variablesMap = objMap(variables, (value, key) => {
|
|
4299
4335
|
const varSafeKey = (key[0] >= '0' && key[0] <= '9' ? `_${key}` : key).replace(/[^a-zA-Z0-9]/g, '_');
|
|
4300
|
-
const nameHash = key.startsWith('--') ? key.slice(2) : debug && enableDebugClassNames ? varSafeKey + '-' + classNamePrefix + hash(`${
|
|
4336
|
+
const nameHash = key.startsWith('--') ? key.slice(2) : debug && enableDebugClassNames ? varSafeKey + '-' + classNamePrefix + hash(`${exportId}.${key}`) : classNamePrefix + hash(`${exportId}.${key}`);
|
|
4301
4337
|
if (isCSSType(value)) {
|
|
4302
4338
|
const v = value;
|
|
4303
4339
|
typedVariables[nameHash] = {
|
|
@@ -4320,7 +4356,7 @@ function styleXDefineVars(variables, options) {
|
|
|
4320
4356
|
} = _ref;
|
|
4321
4357
|
return `var(--${nameHash})`;
|
|
4322
4358
|
});
|
|
4323
|
-
const injectableStyles = constructCssVariablesString(variablesMap,
|
|
4359
|
+
const injectableStyles = constructCssVariablesString(variablesMap, varGroupHash);
|
|
4324
4360
|
const injectableTypes = objMap(typedVariables, (_ref2, nameHash) => {
|
|
4325
4361
|
let {
|
|
4326
4362
|
initialValue: iv,
|
|
@@ -4334,13 +4370,13 @@ function styleXDefineVars(variables, options) {
|
|
|
4334
4370
|
});
|
|
4335
4371
|
return [{
|
|
4336
4372
|
...themeVariablesObject,
|
|
4337
|
-
|
|
4373
|
+
__varGroupHash__: varGroupHash
|
|
4338
4374
|
}, {
|
|
4339
4375
|
...injectableTypes,
|
|
4340
4376
|
...injectableStyles
|
|
4341
4377
|
}];
|
|
4342
4378
|
}
|
|
4343
|
-
function constructCssVariablesString(variables,
|
|
4379
|
+
function constructCssVariablesString(variables, varGroupHash) {
|
|
4344
4380
|
const rulesByAtRule = {};
|
|
4345
4381
|
for (const [key, {
|
|
4346
4382
|
nameHash,
|
|
@@ -4354,12 +4390,12 @@ function constructCssVariablesString(variables, themeNameHash) {
|
|
|
4354
4390
|
const result = {};
|
|
4355
4391
|
for (const [atRule, value] of Object.entries(rulesByAtRule)) {
|
|
4356
4392
|
const suffix = atRule === 'default' ? '' : `-${hash(atRule)}`;
|
|
4357
|
-
const selector = `:root, .${
|
|
4393
|
+
const selector = `:root, .${varGroupHash}`;
|
|
4358
4394
|
let ltr = `${selector}{${value.join('')}}`;
|
|
4359
4395
|
if (atRule !== 'default') {
|
|
4360
4396
|
ltr = wrapWithAtRules(ltr, atRule);
|
|
4361
4397
|
}
|
|
4362
|
-
result[
|
|
4398
|
+
result[varGroupHash + suffix] = {
|
|
4363
4399
|
ltr,
|
|
4364
4400
|
rtl: null,
|
|
4365
4401
|
priority: priorityForAtRule(atRule) * 0.1
|
|
@@ -4371,7 +4407,7 @@ function constructCssVariablesString(variables, themeNameHash) {
|
|
|
4371
4407
|
function styleXDefineConsts(constants, options) {
|
|
4372
4408
|
const {
|
|
4373
4409
|
classNamePrefix,
|
|
4374
|
-
|
|
4410
|
+
exportId,
|
|
4375
4411
|
debug,
|
|
4376
4412
|
enableDebugClassNames
|
|
4377
4413
|
} = {
|
|
@@ -4385,10 +4421,10 @@ function styleXDefineConsts(constants, options) {
|
|
|
4385
4421
|
throw new Error(INVALID_CONST_KEY);
|
|
4386
4422
|
}
|
|
4387
4423
|
const varSafeKey = (key[0] >= '0' && key[0] <= '9' ? `_${key}` : key).replace(/[^a-zA-Z0-9]/g, '_');
|
|
4388
|
-
const
|
|
4424
|
+
const constKey = debug && enableDebugClassNames ? `${varSafeKey}-${classNamePrefix}${hash(`${exportId}.${key}`)}` : `${classNamePrefix}${hash(`${exportId}.${key}`)}`;
|
|
4389
4425
|
jsOutput[key] = value;
|
|
4390
|
-
injectableStyles[
|
|
4391
|
-
constKey
|
|
4426
|
+
injectableStyles[constKey] = {
|
|
4427
|
+
constKey,
|
|
4392
4428
|
constVal: value,
|
|
4393
4429
|
priority: 0,
|
|
4394
4430
|
ltr: '',
|
|
@@ -4399,7 +4435,7 @@ function styleXDefineConsts(constants, options) {
|
|
|
4399
4435
|
}
|
|
4400
4436
|
|
|
4401
4437
|
function styleXCreateTheme(themeVars, variables, options) {
|
|
4402
|
-
if (typeof themeVars.
|
|
4438
|
+
if (typeof themeVars.__varGroupHash__ !== 'string') {
|
|
4403
4439
|
throw new Error('Can only override variables theme created with defineVars().');
|
|
4404
4440
|
}
|
|
4405
4441
|
const {
|
|
@@ -4439,9 +4475,9 @@ function styleXCreateTheme(themeVars, variables, options) {
|
|
|
4439
4475
|
};
|
|
4440
4476
|
}
|
|
4441
4477
|
}
|
|
4442
|
-
const themeClass = `${overrideClassName} ${themeVars.
|
|
4478
|
+
const themeClass = `${overrideClassName} ${themeVars.__varGroupHash__}`;
|
|
4443
4479
|
return [{
|
|
4444
|
-
[themeVars.
|
|
4480
|
+
[themeVars.__varGroupHash__]: themeClass,
|
|
4445
4481
|
$$css: true
|
|
4446
4482
|
}, stylesToInject];
|
|
4447
4483
|
}
|
|
@@ -4755,7 +4791,7 @@ function evaluateThemeRef(fileName, exportName, state) {
|
|
|
4755
4791
|
if (key.startsWith('--')) {
|
|
4756
4792
|
return `var(${key})`;
|
|
4757
4793
|
}
|
|
4758
|
-
const strToHash = key === '
|
|
4794
|
+
const strToHash = key === '__varGroupHash__' ? utils.genFileBasedIdentifier({
|
|
4759
4795
|
fileName,
|
|
4760
4796
|
exportName
|
|
4761
4797
|
}) : utils.genFileBasedIdentifier({
|
|
@@ -4767,9 +4803,9 @@ function evaluateThemeRef(fileName, exportName, state) {
|
|
|
4767
4803
|
debug,
|
|
4768
4804
|
enableDebugClassNames
|
|
4769
4805
|
} = state.traversalState.options;
|
|
4770
|
-
const varSafeKey = key === '
|
|
4806
|
+
const varSafeKey = key === '__varGroupHash__' ? '' : (key[0] >= '0' && key[0] <= '9' ? `_${key}` : key).replace(/[^a-zA-Z0-9]/g, '_') + '-';
|
|
4771
4807
|
const varName = debug && enableDebugClassNames ? varSafeKey + state.traversalState.options.classNamePrefix + utils.hash(strToHash) : state.traversalState.options.classNamePrefix + utils.hash(strToHash);
|
|
4772
|
-
if (key === '
|
|
4808
|
+
if (key === '__varGroupHash__') {
|
|
4773
4809
|
return varName;
|
|
4774
4810
|
}
|
|
4775
4811
|
return `var(--${varName})`;
|
|
@@ -5834,7 +5870,7 @@ function transformStyleXCreateTheme(callExpressionPath, state) {
|
|
|
5834
5870
|
if (typeof overrides !== 'object' || overrides == null) {
|
|
5835
5871
|
throw callExpressionPath.buildCodeFrameError(messages.nonStyleObject('createTheme'), SyntaxError);
|
|
5836
5872
|
}
|
|
5837
|
-
if (typeof variables.
|
|
5873
|
+
if (typeof variables.__varGroupHash__ !== 'string' || variables.__varGroupHash__ === '') {
|
|
5838
5874
|
throw callExpressionPath.buildCodeFrameError('Can only override variables theme created with defineVars().', SyntaxError);
|
|
5839
5875
|
}
|
|
5840
5876
|
let [overridesObj, injectedStyles] = createTheme(variables, overrides, state.options);
|
|
@@ -5953,12 +5989,12 @@ function transformStyleXDefineVars(callExpressionPath, state) {
|
|
|
5953
5989
|
}
|
|
5954
5990
|
const fileName = state.fileNameForHashing;
|
|
5955
5991
|
if (fileName == null) {
|
|
5956
|
-
throw new Error('
|
|
5992
|
+
throw new Error(messages.cannotGenerateHash('defineVars'));
|
|
5957
5993
|
}
|
|
5958
5994
|
const exportName = varId.name;
|
|
5959
5995
|
const [variablesObj, injectedStylesSansKeyframes] = defineVars(value, {
|
|
5960
5996
|
...state.options,
|
|
5961
|
-
|
|
5997
|
+
exportId: utils.genFileBasedIdentifier({
|
|
5962
5998
|
fileName,
|
|
5963
5999
|
exportName
|
|
5964
6000
|
})
|
|
@@ -6016,16 +6052,16 @@ function transformStyleXDefineConsts(callExpressionPath, state) {
|
|
|
6016
6052
|
}
|
|
6017
6053
|
const fileName = state.fileNameForHashing;
|
|
6018
6054
|
if (fileName == null) {
|
|
6019
|
-
throw new Error('
|
|
6055
|
+
throw new Error(messages.cannotGenerateHash('defineConsts'));
|
|
6020
6056
|
}
|
|
6021
6057
|
const exportName = varId.name;
|
|
6022
|
-
const
|
|
6058
|
+
const exportId = utils.genFileBasedIdentifier({
|
|
6023
6059
|
fileName,
|
|
6024
6060
|
exportName
|
|
6025
6061
|
});
|
|
6026
6062
|
const [transformedJsOutput, jsOutput] = defineConsts(value, {
|
|
6027
6063
|
...state.options,
|
|
6028
|
-
|
|
6064
|
+
exportId
|
|
6029
6065
|
});
|
|
6030
6066
|
callExpressionPath.replaceWith(convertObjectToAST(transformedJsOutput));
|
|
6031
6067
|
const styles = Object.entries(jsOutput).map(_ref => {
|
|
@@ -46,6 +46,7 @@ export type StyleXOptions = Readonly<{
|
|
|
46
46
|
enableDebugDataProp?: null | undefined | boolean;
|
|
47
47
|
enableDevClassNames?: null | undefined | boolean;
|
|
48
48
|
enableFontSizePxToRem?: null | undefined | boolean;
|
|
49
|
+
enableLegacyValueFlipping?: null | undefined | boolean;
|
|
49
50
|
enableLogicalStylesPolyfill?: null | undefined | boolean;
|
|
50
51
|
enableMinifiedKeys?: null | undefined | boolean;
|
|
51
52
|
styleResolution:
|
|
@@ -52,6 +52,7 @@ export type StyleXOptions = $ReadOnly<{
|
|
|
52
52
|
enableDebugDataProp?: ?boolean,
|
|
53
53
|
enableDevClassNames?: ?boolean,
|
|
54
54
|
enableFontSizePxToRem?: ?boolean,
|
|
55
|
+
enableLegacyValueFlipping?: ?boolean,
|
|
55
56
|
enableLogicalStylesPolyfill?: ?boolean,
|
|
56
57
|
enableMinifiedKeys?: ?boolean,
|
|
57
58
|
styleResolution:
|
package/lib/shared/messages.d.ts
CHANGED
|
@@ -15,6 +15,7 @@ export declare const nonStaticValue: (fn: string) => string;
|
|
|
15
15
|
export declare const nonStyleObject: (fn: string) => string;
|
|
16
16
|
export declare const nonExportNamedDeclaration: (fn: string) => string;
|
|
17
17
|
export declare const unboundCallValue: (fn: string) => string;
|
|
18
|
+
export declare const cannotGenerateHash: (fn: string) => string;
|
|
18
19
|
export declare const DUPLICATE_CONDITIONAL: 'The same pseudo selector or at-rule cannot be used more than once.';
|
|
19
20
|
export declare const ESCAPED_STYLEX_VALUE: 'Escaping a create() value is not allowed.';
|
|
20
21
|
export declare const ILLEGAL_NESTED_PSEUDO: "Pseudo objects can't be nested more than one level deep.";
|
|
@@ -18,6 +18,7 @@ declare export const nonStaticValue: (fn: string) => string;
|
|
|
18
18
|
declare export const nonStyleObject: (fn: string) => string;
|
|
19
19
|
declare export const nonExportNamedDeclaration: (fn: string) => string;
|
|
20
20
|
declare export const unboundCallValue: (fn: string) => string;
|
|
21
|
+
declare export const cannotGenerateHash: (fn: string) => string;
|
|
21
22
|
|
|
22
23
|
declare export const DUPLICATE_CONDITIONAL: 'The same pseudo selector or at-rule cannot be used more than once.';
|
|
23
24
|
declare export const ESCAPED_STYLEX_VALUE: 'Escaping a create() value is not allowed.';
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
import type { InjectableStyle, StyleXOptions } from './common-types';
|
|
11
11
|
declare function styleXCreateTheme(
|
|
12
12
|
themeVars: {
|
|
13
|
-
readonly
|
|
13
|
+
readonly __varGroupHash__: string;
|
|
14
14
|
readonly [$$Key$$: string]: string;
|
|
15
15
|
},
|
|
16
16
|
variables: {
|
|
@@ -13,7 +13,7 @@ import type { InjectableStyle, StyleXOptions } from './common-types';
|
|
|
13
13
|
// and returns a hashed className with variables overrides.
|
|
14
14
|
//
|
|
15
15
|
declare export default function styleXCreateTheme(
|
|
16
|
-
themeVars: { +
|
|
16
|
+
themeVars: { +__varGroupHash__: string, +[string]: string },
|
|
17
17
|
variables: { +[string]: string | { default: string, +[string]: string } },
|
|
18
18
|
options?: StyleXOptions,
|
|
19
19
|
): [{ $$css: true, +[string]: string }, { [string]: InjectableStyle }];
|
|
@@ -12,8 +12,8 @@ import type { ConstsConfig } from './stylex-consts-utils';
|
|
|
12
12
|
declare function styleXDefineConsts<Vars extends ConstsConfig>(
|
|
13
13
|
constants: Vars,
|
|
14
14
|
options: Readonly<
|
|
15
|
-
Omit<Partial<StyleXOptions>, keyof ({
|
|
16
|
-
|
|
15
|
+
Omit<Partial<StyleXOptions>, keyof ({ exportId: string })> & {
|
|
16
|
+
exportId: string;
|
|
17
17
|
}
|
|
18
18
|
>,
|
|
19
19
|
): [
|
|
@@ -12,7 +12,7 @@ import type { ConstsConfig } from './stylex-consts-utils';
|
|
|
12
12
|
|
|
13
13
|
declare export default function styleXDefineConsts<Vars: ConstsConfig>(
|
|
14
14
|
constants: Vars,
|
|
15
|
-
options: $ReadOnly<{ ...Partial<StyleXOptions>,
|
|
15
|
+
options: $ReadOnly<{ ...Partial<StyleXOptions>, exportId: string, ... }>,
|
|
16
16
|
): [
|
|
17
17
|
{ [string]: string | number }, // jsOutput JS output
|
|
18
18
|
{ [string]: InjectableConstStyle }, // metadata for registerinjectableStyles
|
|
@@ -13,15 +13,15 @@ type VarsKeysWithStringValues<Vars extends VarsConfig> = Readonly<{
|
|
|
13
13
|
[$$Key$$: keyof Vars]: string;
|
|
14
14
|
}>;
|
|
15
15
|
type VarsObject<Vars extends VarsConfig> = Readonly<
|
|
16
|
-
Omit<VarsKeysWithStringValues<Vars>, keyof ({
|
|
17
|
-
|
|
16
|
+
Omit<VarsKeysWithStringValues<Vars>, keyof ({ __varGroupHash__: string })> & {
|
|
17
|
+
__varGroupHash__: string;
|
|
18
18
|
}
|
|
19
19
|
>;
|
|
20
20
|
declare function styleXDefineVars<Vars extends VarsConfig>(
|
|
21
21
|
variables: Vars,
|
|
22
22
|
options: Readonly<
|
|
23
|
-
Omit<Partial<StyleXOptions>, keyof ({
|
|
24
|
-
|
|
23
|
+
Omit<Partial<StyleXOptions>, keyof ({ exportId: string })> & {
|
|
24
|
+
exportId: string;
|
|
25
25
|
}
|
|
26
26
|
>,
|
|
27
27
|
): [VarsObject<Vars>, { [$$Key$$: string]: InjectableStyle }];
|
|
@@ -15,12 +15,12 @@ type VarsKeysWithStringValues<Vars: VarsConfig> = $ReadOnly<{
|
|
|
15
15
|
|
|
16
16
|
type VarsObject<Vars: VarsConfig> = $ReadOnly<{
|
|
17
17
|
...VarsKeysWithStringValues<Vars>,
|
|
18
|
-
|
|
18
|
+
__varGroupHash__: string,
|
|
19
19
|
}>;
|
|
20
20
|
|
|
21
21
|
// Similar to `stylex.create` it takes an object of variables with their values
|
|
22
22
|
// and returns a string after hashing it.
|
|
23
23
|
declare export default function styleXDefineVars<Vars: VarsConfig>(
|
|
24
24
|
variables: Vars,
|
|
25
|
-
options: $ReadOnly<{ ...Partial<StyleXOptions>,
|
|
25
|
+
options: $ReadOnly<{ ...Partial<StyleXOptions>, exportId: string, ... }>,
|
|
26
26
|
): [VarsObject<Vars>, { [string]: InjectableStyle }];
|
|
@@ -46,6 +46,7 @@ export type StyleXOptions = Readonly<
|
|
|
46
46
|
enableDebugDataProp?: boolean;
|
|
47
47
|
enableDevClassNames?: boolean;
|
|
48
48
|
enableInlinedConditionalMerge?: boolean;
|
|
49
|
+
enableLegacyValueFlipping?: boolean;
|
|
49
50
|
enableLogicalStylesPolyfill?: boolean;
|
|
50
51
|
enableMinifiedKeys?: boolean;
|
|
51
52
|
importSources: ReadonlyArray<
|
|
@@ -68,6 +69,7 @@ export type StyleXOptions = Readonly<
|
|
|
68
69
|
enableDebugDataProp?: boolean;
|
|
69
70
|
enableDevClassNames?: boolean;
|
|
70
71
|
enableInlinedConditionalMerge?: boolean;
|
|
72
|
+
enableLegacyValueFlipping?: boolean;
|
|
71
73
|
enableLogicalStylesPolyfill?: boolean;
|
|
72
74
|
enableMinifiedKeys?: boolean;
|
|
73
75
|
importSources: ReadonlyArray<
|
|
@@ -48,6 +48,7 @@ export type StyleXOptions = $ReadOnly<{
|
|
|
48
48
|
enableDebugDataProp?: boolean,
|
|
49
49
|
enableDevClassNames?: boolean,
|
|
50
50
|
enableInlinedConditionalMerge?: boolean,
|
|
51
|
+
enableLegacyValueFlipping?: boolean,
|
|
51
52
|
enableLogicalStylesPolyfill?: boolean,
|
|
52
53
|
enableMinifiedKeys?: boolean,
|
|
53
54
|
importSources: $ReadOnlyArray<
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stylexjs/babel-plugin",
|
|
3
|
-
"version": "0.14.
|
|
3
|
+
"version": "0.14.2",
|
|
4
4
|
"description": "StyleX babel plugin.",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"repository": {
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
"@babel/traverse": "^7.26.8",
|
|
22
22
|
"@babel/types": "^7.26.8",
|
|
23
23
|
"@dual-bundle/import-meta-resolve": "^4.1.0",
|
|
24
|
-
"@stylexjs/stylex": "0.14.
|
|
24
|
+
"@stylexjs/stylex": "0.14.2",
|
|
25
25
|
"postcss-value-parser": "^4.1.0"
|
|
26
26
|
},
|
|
27
27
|
"devDependencies": {
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
"@rollup/plugin-replace": "^6.0.1",
|
|
34
34
|
"babel-plugin-syntax-hermes-parser": "^0.26.0",
|
|
35
35
|
"rollup": "^4.24.0",
|
|
36
|
-
"scripts": "0.14.
|
|
36
|
+
"scripts": "0.14.2"
|
|
37
37
|
},
|
|
38
38
|
"files": [
|
|
39
39
|
"flow_modules/*",
|