@stylexjs/babel-plugin 0.2.0-beta.24 → 0.2.0-beta.26

package/README.md

@@ -14,7 +14,7 @@ by passing them to the functions of the corresponding names within `@stylex/shar
 
 ## Babel Metadata
 
-The StyleX Babel plugin does more than transform Javascript (or Typescript) files. It also returns a list of injected styles. The way that such a value can be returned while transforming a JS file is by using Babel's `metadata` API.
+The StyleX Babel plugin does more than transform JavaScript (or Typescript) files. It also returns a list of injected styles. The way that such a value can be returned while transforming a JS file is by using Babel's `metadata` API.
 
 An example of this can be seen in some of the tests, but the result of using Babel's `transform(...)` function returns an object contains at least two keys:
 

package/flow_modules/@babel/core/index.js.flow

@@ -3,6 +3,7 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
+ *
  * @flow strict
  */
 

package/lib/index.js

@@ -30,6 +30,7 @@ var t__namespace = /*#__PURE__*/_interopNamespaceDefault(t);
 var name = "@stylexjs/stylex";
 
 class StateManager {
+  importPaths = new Set();
   stylexImport = new Set();
   stylexPropsImport = new Set();
   stylexCreateImport = new Set();
@@ -64,6 +65,15 @@ class StateManager {
     this._state.opts = opts;
     return this._state.opts;
   }
+  get importPathString() {
+    if (this.importPaths.has('@stylexjs/stylex')) {
+      return '@stylexjs/stylex';
+    }
+    if (this.importPaths.size > 0) {
+      return [...this.importPaths][0];
+    }
+    return '@stylexjs/stylex';
+  }
   get canReferenceTheme() {
     return !!this.inStyleXCreate;
   }
@@ -149,7 +159,7 @@ const filePathResolver = (relativeFilePath, sourceFilePath) => {
   const fileToLookFor = relativeFilePath;
   if (EXTENSIONS.some(ext => fileToLookFor.endsWith(ext))) {
     try {
-      const resolvedFilePath = fileToLookFor.startsWith('./') || fileToLookFor.startsWith('../') ? path.join(path.dirname(sourceFilePath), fileToLookFor) : require.resolve(fileToLookFor, {
+      const resolvedFilePath = require.resolve(fileToLookFor, {
         paths: [path.dirname(sourceFilePath)]
       });
       return resolvedFilePath;
@@ -157,7 +167,8 @@ const filePathResolver = (relativeFilePath, sourceFilePath) => {
   }
   for (const ext of EXTENSIONS) {
     try {
-      const resolvedFilePath = fileToLookFor.startsWith('./') || fileToLookFor.startsWith('../') ? path.join(path.dirname(sourceFilePath), fileToLookFor + ext) : require.resolve(fileToLookFor + ext, {
+      const importPathStr = fileToLookFor.startsWith('.') ? fileToLookFor + ext : fileToLookFor;
+      const resolvedFilePath = require.resolve(importPathStr, {
         paths: [path.dirname(sourceFilePath)]
       });
       return resolvedFilePath;
@@ -182,6 +193,7 @@ function readImportDeclarations(path, state) {
     return;
   }
   if (state.options.importSources.includes(node.source.value)) {
+    state.importPaths.add(node.source.value);
     for (const specifier of node.specifiers) {
       if (specifier.type === 'ImportDefaultSpecifier') {
         state.stylexImport.add(specifier.local.name);
@@ -250,7 +262,10 @@ function readRequires(path, state) {
   const {
     node
   } = path;
-  if (node.init?.type === 'CallExpression' && node.init?.callee?.type === 'Identifier' && node.init?.callee?.name === 'require' && node.init?.arguments?.length === 1 && node.init?.arguments?.[0].type === 'StringLiteral' && (node.init?.arguments?.[0].value === 'stylex' || state.options.importSources.includes(node.init?.arguments?.[0].value))) {
+  const init = node.init;
+  if (init != null && init.type === 'CallExpression' && init.callee?.type === 'Identifier' && init.callee?.name === 'require' && init.arguments?.length === 1 && init.arguments?.[0].type === 'StringLiteral' && state.options.importSources.includes(init.arguments[0].value)) {
+    const importPath = init.arguments[0].value;
+    importPath != null && state.importPaths.add(importPath);
     if (node.id.type === 'Identifier') {
       state.stylexImport.add(node.id.name);
     }
@@ -525,33 +540,15 @@ const shorthands$2 = {
   animationRange: value => [['animationRange', value], ['animationRangeEnd', null], ['animationRangeStart', null]],
   background: value => [['background', value], ['backgroundAttachment', null], ['backgroundClip', null], ['backgroundColor', null], ['backgroundImage', null], ['backgroundOrigin', null], ...shorthands$2.backgroundPosition(null), ['backgroundRepeat', null], ['backgroundSize', null]],
   backgroundPosition: value => [['backgroundPosition', value], ['backgroundPositionX', null], ['backgroundPositionY', null]],
-  border: _rawValue => {
-    throw new Error('`border` shorthand is not supported. Use `borderWidth`, `borderStyle` and `borderColor` instead.');
-  },
-  borderInline: _rawValue => {
-    throw new Error('`borderInline` shorthand is not supported. Use `borderInlineWidth`, `borderInlineStyle` and `borderInlineColor` instead.');
-  },
-  borderBlock: _rawValue => {
-    throw new Error('`borderBlock` shorthand is not supported. Use `borderBlockWidth`, `borderBlockStyle` and `borderBlockColor` instead.');
-  },
-  borderTop: _rawValue => {
-    throw new Error(['`borderTop` is not supported.', 'Use `borderTopWidth`, `borderTopStyle` and `borderTopColor`,'].join(' '));
-  },
-  borderInlineEnd: _rawValue => {
-    throw new Error('`borderInlineEnd` shorthand is not supported. Use `borderInlineEndWidth`, `borderInlineEndStyle` and `borderInlineEndColor` instead.');
-  },
-  borderRight: _rawValue => {
-    throw new Error('`borderRight` shorthand is not supported. Use `borderRightWidth`, `borderRightStyle` and `borderRightColor` instead.');
-  },
-  borderBottom: _rawValue => {
-    throw new Error('`borderBottom` shorthand is not supported. Use `borderBottomWidth`, `borderBottomStyle` and `borderBottomColor` instead.');
-  },
-  borderInlineStart: _rawValue => {
-    throw new Error('`borderInlineStart` shorthand is not supported. Use `borderInlineStartWidth`, `borderInlineStartStyle` and `borderInlineStartColor` instead.');
-  },
-  borderLeft: _rawValue => {
-    throw new Error(['`borderLeft` is not supported.', 'You could use `borderLeftWidth`, `borderLeftStyle` and `borderLeftColor`,', 'but it is preferable to use `borderInlineStartWidth`, `borderInlineStartStyle` and `borderInlineStartColor`.'].join(' '));
-  },
+  border: rawValue => [['border', rawValue], ...shorthands$2.borderWidth(null), ...shorthands$2.borderStyle(null), ...shorthands$2.borderColor(null)],
+  borderInline: rawValue => [['borderInline', rawValue], ...shorthands$2.borderInlineWidth(null), ...shorthands$2.borderInlineStyle(null), ...shorthands$2.borderInlineColor(null)],
+  borderBlock: rawValue => [['borderBlock', rawValue], ...shorthands$2.borderBlockWidth(null), ...shorthands$2.borderBlockStyle(null), ...shorthands$2.borderBlockColor(null)],
+  borderTop: rawValue => [['borderTop', rawValue], ['borderTopWidth', null], ['borderTopStyle', null], ['borderTopColor', null]],
+  borderInlineEnd: rawValue => [['borderInlineEnd', rawValue], ...shorthands$2.borderInlineEndWidth(null), ...shorthands$2.borderInlineEndStyle(null), ...shorthands$2.borderInlineEndColor(null)],
+  borderRight: rawValue => [['borderRight', rawValue], ...shorthands$2.borderRightWidth(null), ...shorthands$2.borderRightStyle(null), ...shorthands$2.borderRightColor(null)],
+  borderBottom: rawValue => [['borderBottom', rawValue], ['borderBottomWidth', null], ['borderBottomStyle', null], ['borderBottomColor', null]],
+  borderInlineStart: _rawValue => [['borderInlineStart', null], ...shorthands$2.borderInlineStartWidth(null), ...shorthands$2.borderInlineStartStyle(null), ...shorthands$2.borderInlineStartColor(null)],
+  borderLeft: _rawValue => [['borderLeft', null], ...shorthands$2.borderLeftWidth(null), ...shorthands$2.borderLeftStyle(null), ...shorthands$2.borderLeftColor(null)],
   borderInlineWidth: rawValue => [['borderInlineWidth', rawValue], ['borderInlineStartWidth', null], ['borderLeftWidth', null], ['borderInlineEndWidth', null], ['borderRightWidth', null]],
   borderInlineStyle: rawValue => [['borderInlineStyle', rawValue], ['borderInlineStartStyle', null], ['borderLeftStyle', null], ['borderInlineEndStyle', null], ['borderRightStyle', null]],
   borderInlineColor: rawValue => [['borderInlineColor', rawValue], ['borderInlineStartColor', null], ['borderLeftColor', null], ['borderInlineEndColor', null], ['borderRightColor', null]],
@@ -1293,7 +1290,7 @@ var _normalizeValue = _interopRequireDefault$a(normalizeValue$1);
 function _interopRequireDefault$a(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function transformValue(key, rawValue) {
   const value = typeof rawValue === 'number' ? String(Math.round(rawValue * 10000) / 10000) + getNumberSuffix(key) : rawValue;
-  if (key === 'content' && typeof value === 'string') {
+  if ((key === 'content' || key === 'hyphenateCharacter' || key === 'hyphenate-character') && typeof value === 'string') {
     const val = value.trim();
     if (val.match(/^attr\([a-zA-Z0-9-]+\)$/)) {
       return val;
@@ -1315,7 +1312,7 @@ function getNumberSuffix(key) {
     return suffix;
   }
 }
-const unitlessNumberProperties = new Set(['animationIterationCount', 'aspectRatio', 'borderImageOutset', 'borderImageSlice', 'borderImageWidth', 'columnCount', 'flex', 'flexGrow', 'flexPositive', 'flexShrink', 'flexOrder', 'gridRow', 'gridColumn', 'fontWeight', 'lineClamp', 'lineHeight', 'opacity', 'order', 'orphans', 'tabSize', 'widows', 'zIndex', 'fillOpacity', 'floodOpacity', 'stopOpacity', 'strokeDasharray', 'strokeDashoffset', 'strokeMiterlimit', 'strokeOpacity', 'strokeWidth', 'scale']);
+const unitlessNumberProperties = new Set(['WebkitLineClamp', 'animationIterationCount', 'aspectRatio', 'borderImageOutset', 'borderImageSlice', 'borderImageWidth', 'counterSet', 'columnCount', 'flex', 'flexGrow', 'flexPositive', 'flexShrink', 'flexOrder', 'gridRow', 'gridColumn', 'fontWeight', 'hyphenateLimitChars', 'lineClamp', 'lineHeight', 'maskBorderOutset', 'maskBorderSlice', 'maskBorderWidth', 'opacity', 'order', 'orphans', 'tabSize', 'widows', 'zIndex', 'fillOpacity', 'floodOpacity', 'rotate', 'scale', 'stopOpacity', 'strokeDasharray', 'strokeDashoffset', 'strokeMiterlimit', 'strokeOpacity', 'strokeWidth', 'scale', 'mathDepth']);
 const numberPropertySuffixes = {
   animationDelay: 'ms',
   animationDuration: 'ms',
@@ -1973,7 +1970,6 @@ longHandLogical.add('inset-inline-end');
 longHandPhysical.add('right');
 longHandLogical.add('clear');
 longHandLogical.add('float');
-longHandLogical.add('overlay');
 longHandLogical.add('position');
 longHandLogical.add('z-index');
 longHandLogical.add('ruby-align');
@@ -2003,14 +1999,8 @@ longHandPhysical.add('scroll-padding-left');
 longHandLogical.add('scroll-padding-inline-end');
 longHandPhysical.add('scroll-padding-right');
 longHandLogical.add('scroll-snap-align');
-longHandLogical.add('scroll-snap-coordinate');
-longHandLogical.add('scroll-snap-destination');
-longHandLogical.add('scroll-snap-points-x');
-longHandLogical.add('scroll-snap-points-y');
 longHandLogical.add('scroll-snap-stop');
 shorthandsOfLonghands.add('scroll-snap-type');
-longHandLogical.add('scroll-snap-type-x');
-longHandLogical.add('scroll-snap-type-y');
 longHandLogical.add('scrollbar-color');
 longHandLogical.add('scrollbar-width');
 longHandLogical.add('shape-image-threshold');
@@ -2055,7 +2045,6 @@ longHandLogical.add('text-transform');
 longHandLogical.add('text-wrap');
 longHandLogical.add('white-space');
 longHandLogical.add('white-space-collapse');
-longHandLogical.add('white-space-trim');
 longHandLogical.add('word-break');
 longHandLogical.add('word-spacing');
 longHandLogical.add('word-wrap');
@@ -2070,7 +2059,6 @@ longHandLogical.add('transform-origin');
 longHandLogical.add('transform-style');
 longHandLogical.add('translate');
 shorthandsOfLonghands.add('transition');
-longHandLogical.add('transition-behavior');
 longHandLogical.add('transition-delay');
 longHandLogical.add('transition-duration');
 longHandLogical.add('transition-property');
@@ -3108,6 +3096,9 @@ function isImportDeclaration(path, props) {
 function isImportDefaultSpecifier(path, props) {
   return path.isImportDefaultSpecifier(props);
 }
+function isImportNamespaceSpecifier(path, props) {
+  return path.isImportNamespaceSpecifier(props);
+}
 function isImportSpecifier(path, props) {
   return path.isImportSpecifier(props);
 }
@@ -3147,6 +3138,9 @@ function isStatement(path, props) {
 function isStringLiteral(path, props) {
   return path.isStringLiteral(props);
 }
+function isTSAsExpression(path, props) {
+  return path.isTSAsExpression(props);
+}
 function isTaggedTemplateExpression(path, props) {
   return path.isTaggedTemplateExpression(props);
 }
@@ -3302,6 +3296,14 @@ function _evaluate(path, state) {
       return state.functions.identifiers[name];
     }
   }
+  if (isTSAsExpression(path)) {
+    const expr = path.get('expression');
+    return evaluateCached(expr, state);
+  }
+  if (path.node.type === 'TSSatisfiesExpression') {
+    const expr = path.get('expression');
+    return evaluateCached(expr, state);
+  }
   if (isSequenceExpression(path)) {
     const exprs = path.get('expressions');
     return evaluateCached(exprs[exprs.length - 1], state);
@@ -3365,7 +3367,7 @@ function _evaluate(path, state) {
   if (isReferencedIdentifier(path)) {
     const binding = path.scope?.getBinding(path.node.name);
     const bindingPath = binding?.path;
-    if (binding && bindingPath && !isImportDefaultSpecifier(bindingPath) && isImportSpecifier(bindingPath)) {
+    if (binding && bindingPath && !isImportDefaultSpecifier(bindingPath) && !isImportNamespaceSpecifier(bindingPath) && isImportSpecifier(bindingPath)) {
       const importSpecifierPath = bindingPath;
       const importSpecifierNode = importSpecifierPath.node;
       const imported = importSpecifierNode.imported;
@@ -3379,6 +3381,10 @@ function _evaluate(path, state) {
         const [type, value] = absPath;
         const returnValue = type === 'themeNameRef' ? evaluateThemeRef(value, importedName, state) : evaluateImportedFile(value, importedName, state);
         if (state.confident) {
+          if (!state.addedImports.has(importPath.node.source.value)) {
+            importPath.insertBefore(t__namespace.importDeclaration([], importPath.node.source));
+            state.addedImports.add(importPath.node.source.value);
+          }
           return returnValue;
         } else {
           deopt(binding.path, state);
@@ -3647,15 +3653,19 @@ function evaluateQuasis(path, quasis, state) {
   if (!state.confident) return;
   return str;
 }
+const importsForState = new WeakMap();
 function evaluate(path, traversalState) {
   let functions = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
     identifiers: {},
     memberExpressions: {}
   };
+  const addedImports = importsForState.get(traversalState) ?? new Set();
+  importsForState.set(traversalState, addedImports);
   const state = {
     confident: true,
     deoptPath: null,
     seen: new Map(),
+    addedImports,
     functions,
     traversalState
   };
@@ -4001,7 +4011,7 @@ function getStylexDefaultImport(path, state) {
   });
   if (stylexName == null) {
     stylexName = '__stylex__';
-    statementPath.insertBefore(t__namespace.importDeclaration([t__namespace.importDefaultSpecifier(t__namespace.identifier(stylexName))], t__namespace.stringLiteral('stylex')));
+    statementPath.insertBefore(t__namespace.importDeclaration([t__namespace.importDefaultSpecifier(t__namespace.identifier(stylexName))], t__namespace.stringLiteral(state.importPathString)));
     state.stylexImport.add(stylexName);
   }
   return stylexName;
@@ -4070,7 +4080,7 @@ function transformStyleXDefineVars(callExpressionPath, state) {
       });
       if (stylexName == null) {
         stylexName = '__stylex__';
-        statementPath.insertBefore(t__namespace.importDeclaration([t__namespace.importDefaultSpecifier(t__namespace.identifier(stylexName))], t__namespace.stringLiteral('stylex')));
+        statementPath.insertBefore(t__namespace.importDeclaration([t__namespace.importDefaultSpecifier(t__namespace.identifier(stylexName))], t__namespace.stringLiteral(state.importPathString)));
       }
       statementPath.insertBefore(t__namespace.expressionStatement(t__namespace.callExpression(t__namespace.memberExpression(t__namespace.identifier(stylexName), t__namespace.identifier('inject')), [t__namespace.stringLiteral(css), t__namespace.numericLiteral(0)])));
     }
@@ -4151,7 +4161,7 @@ function transformStyleXCreateTheme(callExpressionPath, state) {
       });
       if (stylexName == null) {
         stylexName = '__stylex__';
-        statementPath?.insertBefore(t__namespace.importDeclaration([t__namespace.importDefaultSpecifier(t__namespace.identifier(stylexName))], t__namespace.stringLiteral('stylex')));
+        statementPath?.insertBefore(t__namespace.importDeclaration([t__namespace.importDefaultSpecifier(t__namespace.identifier(stylexName))], t__namespace.stringLiteral(state.importPathString)));
       }
       statementPath?.insertBefore(t__namespace.expressionStatement(t__namespace.callExpression(t__namespace.memberExpression(t__namespace.identifier(stylexName), t__namespace.identifier('inject')), [t__namespace.stringLiteral(css[styleKey].ltr), t__namespace.numericLiteral(css[styleKey].priority)])));
     }
@@ -4218,7 +4228,7 @@ function transformStyleXKeyframes(path, state) {
       });
       if (stylexName == null) {
         stylexName = '__stylex__';
-        statementPath.insertBefore(t__namespace.importDeclaration([t__namespace.importDefaultSpecifier(t__namespace.identifier(stylexName))], t__namespace.stringLiteral('stylex')));
+        statementPath.insertBefore(t__namespace.importDeclaration([t__namespace.importDefaultSpecifier(t__namespace.identifier(stylexName))], t__namespace.stringLiteral(state.importPathString)));
       }
       statementPath.insertBefore(t__namespace.expressionStatement(t__namespace.callExpression(t__namespace.memberExpression(t__namespace.identifier(stylexName), t__namespace.identifier('inject')), [t__namespace.stringLiteral(ltr), t__namespace.numericLiteral(priority), ...(rtl != null ? [t__namespace.stringLiteral(rtl)] : [])])));
     }

package/lib/utils/evaluate-path.d.ts

@@ -22,22 +22,6 @@ export type FunctionConfig = {
     };
   };
 };
-/**
- * Walk the input `node` and statically evaluate it.
- *
- * Returns an object in the form `{ confident, value, deopt }`. `confident`
- * indicates whether or not we had to drop out of evaluating the expression
- * because of hitting an unknown node that we couldn't confidently find the
- * value of, in which case `deopt` is the path of said node.
- *
- * Example:
- *
- *   evaluate(parse("5 + 5")) // { confident: true, value: 10 }
- *   evaluate(parse("!true")) // { confident: true, value: false }
- *   evaluate(parse("foo + foo")) // { confident: false, value: undefined, deopt: NodePath }
- *
- */
-
 export declare function evaluate(
   path: NodePath,
   traversalState: StateManager,

package/lib/utils/evaluate-path.js.flow

@@ -26,22 +26,6 @@ export type FunctionConfig = {
   },
 };
 
-/**
- * Walk the input `node` and statically evaluate it.
- *
- * Returns an object in the form `{ confident, value, deopt }`. `confident`
- * indicates whether or not we had to drop out of evaluating the expression
- * because of hitting an unknown node that we couldn't confidently find the
- * value of, in which case `deopt` is the path of said node.
- *
- * Example:
- *
- *   evaluate(parse("5 + 5")) // { confident: true, value: 10 }
- *   evaluate(parse("!true")) // { confident: true, value: false }
- *   evaluate(parse("foo + foo")) // { confident: false, value: undefined, deopt: NodePath }
- *
- */
-
 declare export function evaluate(
   path: NodePath<>,
   traversalState: StateManager,

package/lib/utils/state-manager.d.ts

@@ -38,6 +38,7 @@ type StyleXOptions = Omit<
 };
 declare class StateManager {
   readonly _state: PluginPass;
+  readonly importPaths: Set<string>;
   readonly stylexImport: Set<string>;
   readonly stylexPropsImport: Set<string>;
   readonly stylexCreateImport: Set<string>;
@@ -53,6 +54,7 @@ declare class StateManager {
   inStyleXCreate: boolean;
   constructor(state: PluginPass);
   get options(): StyleXOptions;
+  get importPathString(): string;
   get canReferenceTheme(): boolean;
   get metadata(): { [key: string]: any };
   get stylexSheetName(): string | void;

package/lib/utils/state-manager.js.flow

@@ -43,6 +43,7 @@ type StyleXOptions = {
 
 declare export default class StateManager {
   +_state: PluginPass;
+  +importPaths: Set<string>;
   +stylexImport: Set<string>;
   +stylexPropsImport: Set<string>;
   +stylexCreateImport: Set<string>;
@@ -58,6 +59,7 @@ declare export default class StateManager {
   inStyleXCreate: boolean;
   constructor(state: PluginPass): void;
   get options(): StyleXOptions;
+  get importPathString(): string;
   get canReferenceTheme(): boolean;
   get metadata(): { [key: string]: any };
   get stylexSheetName(): string | void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stylexjs/babel-plugin",
-  "version": "0.2.0-beta.24",
+  "version": "0.2.0-beta.26",
   "description": "StyleX babel plugin.",
   "main": "lib/index.js",
   "repository": "https://github.com/facebook/stylex",
@@ -12,7 +12,7 @@
     "test": "jest"
   },
   "dependencies": {
-    "@stylexjs/shared": "0.2.0-beta.24"
+    "@stylexjs/shared": "0.2.0-beta.26"
   },
   "peerDependencies": {
     "@babel/core": "^7.19.6",