@stylexjs/babel-plugin 0.6.1 → 0.7.1

package/lib/index.js

@@ -1128,8 +1128,8 @@ Object.defineProperty(splitCssValue, "__esModule", {
   value: true
 });
 splitCssValue.default = splitValue;
-var _postcssValueParser$5 = _interopRequireDefault$g(require$$0);
-function _interopRequireDefault$g(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _postcssValueParser$6 = _interopRequireDefault$h(require$$0);
+function _interopRequireDefault$h(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function printNode(node) {
   switch (node.type) {
     case 'word':
@@ -1148,7 +1148,7 @@ function splitValue(str) {
   if (Array.isArray(str)) {
     return str;
   }
-  const parsed = (0, _postcssValueParser$5.default)(str.trim());
+  const parsed = (0, _postcssValueParser$6.default)(str.trim());
   const nodes = parsed.nodes.filter(node => node.type !== 'space' && node.type !== 'div').map(printNode);
   if (nodes.length > 1 && nodes[nodes.length - 1].toLowerCase() === '!important') {
     return nodes.slice(0, nodes.length - 1).map(node => node + ' !important');
@@ -1160,8 +1160,8 @@ Object.defineProperty(legacyExpandShorthands, "__esModule", {
   value: true
 });
 legacyExpandShorthands.default = void 0;
-var _splitCssValue = _interopRequireDefault$f(splitCssValue);
-function _interopRequireDefault$f(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _splitCssValue = _interopRequireDefault$g(splitCssValue);
+function _interopRequireDefault$g(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const shorthands$1 = {
   border: rawValue => {
     return [['borderTop', rawValue], ['borderEnd', rawValue], ['borderBottom', rawValue], ['borderStart', rawValue]];
@@ -1404,10 +1404,10 @@ Object.defineProperty(preprocessRules, "__esModule", {
 });
 preprocessRules.default = flatMapExpandedShorthands;
 preprocessRules.getExpandedKeys = getExpandedKeys;
-var _applicationOrder = _interopRequireDefault$e(applicationOrder);
-var _legacyExpandShorthands = _interopRequireDefault$e(legacyExpandShorthands);
-var _propertySpecificity = _interopRequireDefault$e(propertySpecificity);
-function _interopRequireDefault$e(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _applicationOrder = _interopRequireDefault$f(applicationOrder);
+var _legacyExpandShorthands = _interopRequireDefault$f(legacyExpandShorthands);
+var _propertySpecificity = _interopRequireDefault$f(propertySpecificity);
+function _interopRequireDefault$f(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const expansions = {
   'application-order': _applicationOrder.default,
   'property-specificity': _propertySpecificity.default,
@@ -1493,8 +1493,8 @@ Object.defineProperty(fontSizePxToRem, "__esModule", {
   value: true
 });
 fontSizePxToRem.default = convertFontSizeToRem;
-var _postcssValueParser$4 = _interopRequireDefault$d(require$$0);
-function _interopRequireDefault$d(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _postcssValueParser$5 = _interopRequireDefault$e(require$$0);
+function _interopRequireDefault$e(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const ROOT_FONT_SIZE = 16;
 function convertFontSizeToRem(ast, key) {
   if (key !== 'fontSize') {
@@ -1504,7 +1504,7 @@ function convertFontSizeToRem(ast, key) {
     if (node.type !== 'word') {
       return;
     }
-    const dimension = _postcssValueParser$4.default.unit(node.value);
+    const dimension = _postcssValueParser$5.default.unit(node.value);
     if (dimension && dimension.unit === 'px') {
       node.value = `${parseFloat(dimension.number) / ROOT_FONT_SIZE}rem`;
     }
@@ -1518,8 +1518,8 @@ Object.defineProperty(leadingZero, "__esModule", {
   value: true
 });
 leadingZero.default = normalizeLeadingZero;
-var _postcssValueParser$3 = _interopRequireDefault$c(require$$0);
-function _interopRequireDefault$c(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _postcssValueParser$4 = _interopRequireDefault$d(require$$0);
+function _interopRequireDefault$d(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function normalizeLeadingZero(ast, _) {
   ast.walk(node => {
     if (node.type !== 'word') {
@@ -1529,7 +1529,7 @@ function normalizeLeadingZero(ast, _) {
     if (Number.isNaN(value)) {
       return;
     }
-    const dimension = _postcssValueParser$3.default.unit(node.value);
+    const dimension = _postcssValueParser$4.default.unit(node.value);
     if (value < 1 && value >= 0) {
       node.value = value.toString().replace('0.', '.') + (dimension ? dimension.unit : '');
     }
@@ -1555,14 +1555,14 @@ function normalizeQuotes(ast, _) {
   return ast;
 }
 
-var timings = {};
+var timings$1 = {};
 
-Object.defineProperty(timings, "__esModule", {
+Object.defineProperty(timings$1, "__esModule", {
   value: true
 });
-timings.default = normalizeTimings;
-var _postcssValueParser$2 = _interopRequireDefault$b(require$$0);
-function _interopRequireDefault$b(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+timings$1.default = normalizeTimings;
+var _postcssValueParser$3 = _interopRequireDefault$c(require$$0);
+function _interopRequireDefault$c(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function normalizeTimings(ast, _) {
   ast.walk(node => {
     if (node.type !== 'word') {
@@ -1572,7 +1572,7 @@ function normalizeTimings(ast, _) {
     if (Number.isNaN(value)) {
       return;
     }
-    const dimension = _postcssValueParser$2.default.unit(node.value);
+    const dimension = _postcssValueParser$3.default.unit(node.value);
     if (!dimension || dimension.unit !== 'ms' || value < 10) {
       return;
     }
@@ -1632,6 +1632,49 @@ function normalizeWhitespace(ast, _) {
   return ast;
 }
 
+var zeroDimensions = {};
+
+Object.defineProperty(zeroDimensions, "__esModule", {
+  value: true
+});
+zeroDimensions.default = normalizeZeroDimensions;
+var _postcssValueParser$2 = _interopRequireDefault$b(require$$0);
+function _interopRequireDefault$b(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const angles = ['deg', 'grad', 'turn', 'rad'];
+const timings = ['ms', 's'];
+const fraction = 'fr';
+const percentage = '%';
+function normalizeZeroDimensions(ast, _) {
+  let endFunction = 0;
+  ast.walk(node => {
+    if (node.type === 'function' && !endFunction) {
+      endFunction = node.sourceEndIndex ?? 0;
+    }
+    if (endFunction > 0 && node.sourceIndex > endFunction) {
+      endFunction = 0;
+    }
+    if (node.type !== 'word') {
+      return;
+    }
+    const dimension = _postcssValueParser$2.default.unit(node.value);
+    if (!dimension || dimension.number !== '0') {
+      return;
+    }
+    if (angles.indexOf(dimension.unit) !== -1) {
+      node.value = '0deg';
+    } else if (timings.indexOf(dimension.unit) !== -1) {
+      node.value = '0s';
+    } else if (dimension.unit === fraction) {
+      node.value = '0fr';
+    } else if (dimension.unit === percentage) {
+      node.value = '0%';
+    } else if (!endFunction) {
+      node.value = '0';
+    }
+  });
+  return ast;
+}
+
 var detectUnclosedFns$1 = {};
 
 Object.defineProperty(detectUnclosedFns$1, "__esModule", {
@@ -1681,13 +1724,14 @@ normalizeValue$1.default = normalizeValue;
 var _fontSizePxToRem = _interopRequireDefault$9(fontSizePxToRem);
 var _leadingZero = _interopRequireDefault$9(leadingZero);
 var _quotes = _interopRequireDefault$9(quotes);
-var _timings = _interopRequireDefault$9(timings);
+var _timings = _interopRequireDefault$9(timings$1);
 var _whitespace = _interopRequireDefault$9(whitespace);
+var _zeroDimensions = _interopRequireDefault$9(zeroDimensions);
 var _detectUnclosedFns = _interopRequireDefault$9(detectUnclosedFns$1);
 var _postcssValueParser$1 = _interopRequireDefault$9(require$$0);
 var _convertCamelCaseValues = _interopRequireDefault$9(convertCamelCaseValues);
 function _interopRequireDefault$9(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const normalizers = [_detectUnclosedFns.default, _whitespace.default, _timings.default, _leadingZero.default, _quotes.default, _convertCamelCaseValues.default];
+const normalizers = [_detectUnclosedFns.default, _whitespace.default, _timings.default, _zeroDimensions.default, _leadingZero.default, _quotes.default, _convertCamelCaseValues.default];
 function normalizeValue(value, key, _ref) {
   let {
     useRemForFontSize
@@ -3260,7 +3304,7 @@ function styleXDefineVars(variables, options) {
   const themeNameHash = classNamePrefix + (0, _hash$3.default)(themeName);
   const typedVariables = {};
   const variablesMap = (0, _objectUtils$1.objMap)(variables, (value, key) => {
-    const nameHash = classNamePrefix + (0, _hash$3.default)(`${themeName}.${key}`);
+    const nameHash = key.startsWith('--') ? key.slice(2) : classNamePrefix + (0, _hash$3.default)(`${themeName}.${key}`);
     if ((0, _types$2.isCSSType)(value)) {
       const v = value;
       typedVariables[nameHash] = {
@@ -3619,7 +3663,7 @@ function evaluateThemeRef(fileName, exportName, state) {
     const strToHash = key === '__themeName__' ? utils_1.genFileBasedIdentifier({
       fileName,
       exportName
-    }) : utils_1.genFileBasedIdentifier({
+    }) : key.startsWith('--') ? `var(${key})` : utils_1.genFileBasedIdentifier({
       fileName,
       exportName,
       key

package/lib/visitors/stylex-create/index.js.flow

@@ -11,9 +11,9 @@ import * as t from '../../../flow_modules/@babel/types';
 import type { NodePath } from '../../../flow_modules/@babel/traverse';
 import StateManager from '../../utils/state-manager';
 /// This function looks for `stylex.create` calls and transforms them.
-//. 1. It finds the first argument to `stylex.create` and validates it.
+/// 1. It finds the first argument to `stylex.create` and validates it.
 /// 2. It pre-processes valid-dynamic parts of style object such as custom presets (spreads)
-/// 3. It envalues the style object to get a JS object. This also handles local constants automatically.
+/// 3. It evaluates the style object to get a JS object. This also handles local constants automatically.
 /// 4. It uses the `stylexCreate` from `@stylexjs/shared` to transform the JS
 ///    object and to get a list of injected styles.
 /// 5. It converts the resulting Object back into an AST and replaces the call with it.

package/lib/visitors/stylex-create-theme.js.flow

@@ -11,7 +11,7 @@ import * as t from '../../flow_modules/@babel/types';
 import type { NodePath } from '../../flow_modules/@babel/traverse';
 import StateManager from '../utils/state-manager';
 /// This function looks for `stylex.createTheme` calls and transforms them.
-//. 1. It finds the first two arguments to `stylex.createTheme` and validates those.
+/// 1. It finds the first two arguments to `stylex.createTheme` and validates those.
 /// 2. This handles local constants automatically.
 /// 4. It uses the `stylexCreateTheme` from `@stylexjs/shared` to transform the JS
 ///    object and to get a list of injected styles.

package/lib/visitors/stylex-define-vars.js.flow

@@ -11,8 +11,8 @@ import * as t from '../../flow_modules/@babel/types';
 import type { NodePath } from '../../flow_modules/@babel/traverse';
 import StateManager from '../utils/state-manager';
 /// This function looks for `stylex.defineVars` calls and transforms them.
-//. 1. It finds the first argument to `stylex.defineVars` and validates it.
-/// 2. It envalues the style object to get a JS object. This also handles local constants automatically.
+/// 1. It finds the first argument to `stylex.defineVars` and validates it.
+/// 2. It evaluates the style object to get a JS object. This also handles local constants automatically.
 /// 4. It uses the `stylexDefineVars` from `@stylexjs/shared` to transform the JS
 ///    object and to get a list of injected styles.
 /// 5. It converts the resulting Object back into an AST and replaces the call with it.

package/lib/visitors/stylex-keyframes.js.flow

@@ -11,8 +11,8 @@ import * as t from '../../flow_modules/@babel/types';
 import type { NodePath } from '../../flow_modules/@babel/traverse';
 import StateManager from '../utils/state-manager';
 /// This function looks for `stylex.keyframes` calls and transforms them.
-//. 1. It finds the first argument to `stylex.keyframes` and validates it.
-/// 2. It envalues the style object to get a JS object. This also handles local constants automatically.
+/// 1. It finds the first argument to `stylex.keyframes` and validates it.
+/// 2. It evaluates the style object to get a JS object. This also handles local constants automatically.
 /// 4. It uses the `stylexKeyframes` from `@stylexjs/shared` to transform the JS
 ///    object and to get a list of injected styles.
 /// 5. It converts the resulting Object back into an AST and replaces the call with it.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stylexjs/babel-plugin",
-  "version": "0.6.1",
+  "version": "0.7.1",
   "description": "StyleX babel plugin.",
   "main": "lib/index.js",
   "repository": "https://github.com/facebook/stylex",
@@ -14,8 +14,8 @@
   },
   "dependencies": {
     "@babel/helper-module-imports": "^7.22.15",
-    "@stylexjs/shared": "0.6.1",
-    "@stylexjs/stylex": "0.6.1",
+    "@stylexjs/shared": "0.7.1",
+    "@stylexjs/stylex": "0.7.1",
     "@babel/core": "^7.23.6",
     "@babel/traverse": "^7.23.6",
     "@babel/types": "^7.23.6"