@stylexjs/babel-plugin 0.1.0-beta.6 → 0.1.0-beta.7

package/lib/index.js

@@ -1414,7 +1414,7 @@ Object.defineProperty(objectUtils, "__esModule", {
   value: true
 });
 objectUtils.Pipe = void 0;
-objectUtils.flattenObject = flattenObject$1;
+objectUtils.flattenObject = flattenObject;
 objectUtils.objEntries = objEntries;
 objectUtils.objFromEntries = objFromEntries;
 objectUtils.objMap = objMap;
@@ -1433,10 +1433,10 @@ var _stylexInclude$2 = stylexInclude$1;
 
 // A bunch of object utils with better Flow types
 
-function flattenObject$1(obj) {
+function flattenObject(obj) {
   const result = {};
   for (const [key, value] of objEntries(obj)) {
-    if (typeof value === 'string') {
+    if (typeof value === 'string' || value == null) {
       result[key] = value;
     } else if (value instanceof _stylexInclude$2.IncludedStyles) {
       result[key] = value;
@@ -1544,7 +1544,11 @@ function styleXCreateSet(namespaces) {
       throw new Error(messages$1.ILLEGAL_NAMESPACE_VALUE);
     }
     const [resolvedNamespace, injected] = styleXCreateNamespace(namespace, options);
-    resolvedNamespaces[namespaceName] = (0, _objectUtils$1.flattenObject)(resolvedNamespace);
+    const compiledNamespace = (0, _objectUtils$1.flattenObject)(resolvedNamespace);
+    resolvedNamespaces[namespaceName] = {
+      ...compiledNamespace,
+      $$css: true
+    };
     for (const cn of Object.keys(injected)) {
       if (injectedStyles[cn] == null) {
         injectedStyles[cn] = injected[cn];
@@ -1591,7 +1595,7 @@ function styleXCreateNamespace(style, options) {
         return (0, _expandShorthands$1.default)([innerKey, innerValue]);
       }))]];
     } else {
-      if (typeof value !== 'string' && typeof value !== 'number' && !Array.isArray(value)) {
+      if (value !== null && typeof value !== 'string' && typeof value !== 'number' && !Array.isArray(value)) {
         throw new Error(messages$1.ILLEGAL_PROP_VALUE);
       }
       if (Array.isArray(value) && value.some(val => typeof val === 'object')) {
@@ -1615,15 +1619,23 @@ function styleXCreateNamespace(style, options) {
       const pseudo = key;
       const innerObj = {};
       for (const [innerKey, innerVal] of (0, _objectUtils$1.objEntries)(val)) {
-        const [updatedKey, className, cssRule] = (0, _convertToClassName.default)([innerKey, innerVal], pseudo, options);
-        innerObj[updatedKey] = className;
-        injectedStyles[updatedKey + pseudo] = [className, cssRule];
+        if (innerVal === null) {
+          innerObj[innerKey] = null;
+        } else {
+          const [updatedKey, className, cssRule] = (0, _convertToClassName.default)([innerKey, innerVal], pseudo, options);
+          innerObj[updatedKey] = className;
+          injectedStyles[updatedKey + pseudo] = [className, cssRule];
+        }
       }
       resolvedNamespace[key] = innerObj;
     } else {
-      const [updatedKey, className, cssRule] = (0, _convertToClassName.default)([key, val], undefined, options);
-      resolvedNamespace[updatedKey] = className;
-      injectedStyles[updatedKey] = [className, cssRule];
+      if (val === null) {
+        resolvedNamespace[key] = null;
+      } else {
+        const [updatedKey, className, cssRule] = (0, _convertToClassName.default)([key, val], undefined, options);
+        resolvedNamespace[updatedKey] = className;
+        injectedStyles[updatedKey] = [className, cssRule];
+      }
     }
   }
   const finalInjectedStyles = (0, _objectUtils$1.objFromEntries)((0, _objectUtils$1.objValues)(injectedStyles));
@@ -1788,7 +1800,8 @@ function convertToTestStyles(obj, varName, state) {
   for (const [key, value] of Object.entries(obj)) {
     const devClassName = namespaceToDevClassName(key, varName, state.filename ?? 'UnkownFile');
     result[key] = {
-      [devClassName]: devClassName
+      [devClassName]: devClassName,
+      $$css: true
     };
   }
   return result;
@@ -1803,7 +1816,7 @@ function convertToTestStyles(obj, varName, state) {
 function convertObjectToAST(obj) {
   return t__namespace.objectExpression(Object.entries(obj).map(_ref => {
     let [key, value] = _ref;
-    return value instanceof IncludedStyles_1 ? t__namespace.spreadElement(value.astNode) : t__namespace.objectProperty(canBeIdentifier(key) ? t__namespace.identifier(key) : t__namespace.stringLiteral(key), typeof value === 'string' ? t__namespace.stringLiteral(value) : convertObjectToAST(value));
+    return value instanceof IncludedStyles_1 ? t__namespace.spreadElement(value.astNode) : t__namespace.objectProperty(canBeIdentifier(key) ? t__namespace.identifier(key) : t__namespace.stringLiteral(key), typeof value === 'string' ? t__namespace.stringLiteral(value) : typeof value === 'boolean' ? t__namespace.booleanLiteral(value) : value === null ? t__namespace.nullLiteral() : convertObjectToAST(value));
   }));
 }
 function canBeIdentifier(str) {
@@ -2270,7 +2283,7 @@ function transformStyleXCreate(path, state) {
     if (firstArg == null || !firstArg.isObjectExpression()) {
       throw new Error(messages_1.ILLEGAL_ARGUMENT_LENGTH);
     }
-    const processingState = preProcessStyleArg(firstArg);
+    preProcessStyleArg(firstArg, state);
     const injectedKeyframes = {};
     function keyframes(animation) {
       const [animationName, injectedStyle] = keyframes_1(animation, state.options);
@@ -2343,20 +2356,12 @@ function transformStyleXCreate(path, state) {
       state.styleVars.set(varName, path.parentPath);
     }
     path.replaceWith(convertObjectToAST(compiledStyles));
-    postProcessStyles(path, processingState);
     if (Object.keys(injectedStyles).length === 0) {
       return;
     }
     if (state.isDev || state.stylexSheetName == null) {
       const statementPath = findNearestStatementAncestor(path);
-      let stylexName;
-      state.stylexImport.forEach(importName => {
-        stylexName = importName;
-      });
-      if (stylexName == null) {
-        stylexName = '__stylex__';
-        statementPath.insertBefore(t__namespace.importDeclaration([t__namespace.importDefaultSpecifier(t__namespace.identifier(stylexName))], t__namespace.stringLiteral('stylex')));
-      }
+      let stylexName = getStylexDefaultImport(path, state);
       for (const [key, {
         ltr,
         priority,
@@ -2402,13 +2407,8 @@ function findNearestStatementAncestor(path) {
   return findNearestStatementAncestor(path.parentPath);
 }
 
-// These functions are for special handling of dynamic parts of the style object
-// Currently they handle spreading pre-defined style objects with stylex.create calls.
-//
-// It converts the spreads into a special string and remembers the original value in an object...
-
-function preProcessStyleArg(objPath) {
-  const state = {};
+// Converts typed spreads to `stylex.include` calls.
+function preProcessStyleArg(objPath, state) {
   objPath.traverse({
     SpreadElement(path) {
       const argument = path.get('argument');
@@ -2431,36 +2431,23 @@ function preProcessStyleArg(objPath) {
         // Disallow spreads within pseudo or media query objects
         throw new Error(messages_1.ILLEGAL_NESTED_PSEUDO);
       }
-      const key = `include(${toString(expression)})`;
-      path.replaceWith(t__namespace.objectProperty(t__namespace.stringLiteral(key), t__namespace.stringLiteral(key)));
-      state[key] = expression.node;
+      let stylexName = getStylexDefaultImport(path, state);
+      argument.replaceWith(t__namespace.callExpression(t__namespace.memberExpression(t__namespace.identifier(stylexName), t__namespace.identifier('include')), [expression.node]));
     }
   });
-  return state;
 }
-
-// Later, it finds those strings and replaces them back with their original values.
-function postProcessStyles(objPath, state) {
-  objPath.traverse({
-    ObjectProperty(path) {
-      const node = path.node.key;
-      if (node.type === 'StringLiteral' && state[node.value] != null) {
-        path.replaceWith(t__namespace.spreadElement(state[node.value]));
-      }
-    }
+function getStylexDefaultImport(path, state) {
+  const statementPath = findNearestStatementAncestor(path);
+  let stylexName;
+  state.stylexImport.forEach(importName => {
+    stylexName = importName;
   });
-}
-
-// A function to deterministicly convert a spreadded expression to a string.
-function toString(path) {
-  if (path.isIdentifier()) {
-    return path.node.name;
-  } else if (path.isStringLiteral() || path.isNumericLiteral()) {
-    return String(path.node.value);
-  } else if (path.isMemberExpression()) {
-    return `${toString(path.get('object'))}.${toString(path.get('property'))}`;
+  if (stylexName == null) {
+    stylexName = '__stylex__';
+    statementPath.insertBefore(t__namespace.importDeclaration([t__namespace.importDefaultSpecifier(t__namespace.identifier(stylexName))], t__namespace.stringLiteral('stylex')));
+    state.stylexImport.add(stylexName);
   }
-  throw new Error(path.node.type);
+  return stylexName;
 }
 
 /**
@@ -2602,7 +2589,7 @@ function transformStyleXMerge(path, state) {
           if (style == null || style[propName] == null) {
             throw new Error(`Unknown style ${objName}.${propName}. The defined style ${objName}, contains the following keys: ${Object.keys(style ?? {}).join(', ')}`);
           }
-          const namespace = flattenObject(style[propName]);
+          const namespace = style[propName];
           Object.assign(resolvedStyles, namespace);
         } else {
           // Unknown style found. bail out.
@@ -2627,12 +2614,13 @@ function transformStyleXMerge(path, state) {
         }
         const allKeys = new Set([...Object.keys(primary ?? {}), ...Object.keys(fallback ?? {})]);
         for (const key of allKeys) {
-          if (resolvedStyles[key] == null) {
-            const primaryValue = (primary === null || primary === void 0 ? void 0 : primary[key]) ?? resolvedStyles[key] ?? '';
-            const fallbackValue = (fallback === null || fallback === void 0 ? void 0 : fallback[key]) ?? resolvedStyles[key] ?? '';
-            resolvedStyles[key] = [test, primaryValue, fallbackValue];
-          }
+          // if (resolvedStyles[key] === undefined) {
+          const primaryValue = firstValidValue(primary === null || primary === void 0 ? void 0 : primary[key], resolvedStyles[key], '');
+          const fallbackValue = firstValidValue(fallback === null || fallback === void 0 ? void 0 : fallback[key], resolvedStyles[key], '');
+          resolvedStyles[key] = [test, primaryValue, fallbackValue];
+          // }
         }
+
         break;
       case 'LogicalExpression':
         if (arg.operator !== '&&') {
@@ -2696,23 +2684,13 @@ function transformStyleXMerge(path, state) {
     path.replaceWith(stringExpression);
   }
 }
-
-// This function takes nested objects with styles collapses them to a single level deep.
-// `':hover': {color: 'red'}` becomes `':hover.color': 'red'`
-function flattenObject(object) {
-  const result = {};
-  for (const [key, value] of Object.entries(object)) {
-    if (typeof value === 'string') {
-      result[key] = value;
-    } else if (typeof value === 'object') {
-      for (const [subKey, subValue] of Object.entries(value)) {
-        result[`${key}.${subKey}`] = subValue;
-      }
-    }
+function firstValidValue() {
+  for (var _len = arguments.length, values = new Array(_len), _key = 0; _key < _len; _key++) {
+    values[_key] = arguments[_key];
   }
-  return result;
+  const [first, ...rest] = values;
+  return first !== undefined ? first : firstValidValue(...rest);
 }
-
 // Looks for Null or locally defined style namespaces.
 // Otherwise it returns the string "other"
 // Which is used as an indicator to bail out of this optimization.
@@ -2737,7 +2715,7 @@ function parseNullableStyle(node, state) {
     if (style == null) {
       return 'other';
     }
-    return flattenObject(style);
+    return style;
   } else {
     return 'other';
   }
@@ -2749,8 +2727,8 @@ function makeStringExpression(values) {
   if (inTernary && strings !== '') {
     strings = ' ' + strings;
   }
-  const nonStrings = values.filter(value => typeof value !== 'string');
-  const groupedByTest = groupBy(nonStrings, _ref => {
+  const nonPrimitive = values.filter(value => typeof value !== 'string' && typeof value !== 'boolean' && value != null);
+  const groupedByTest = groupBy(nonPrimitive, _ref => {
     let [test, _a, _b] = _ref;
     return test;
   });

package/package.json

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