@cssxio/babel-plugin 0.2.1 → 0.4.0

package/dist/index.cjs

@@ -110,12 +110,6 @@ function readStaticString(path) {
   const initializer = binding.path.get("init");
   return initializer.isStringLiteral() ? initializer.node.value : null;
 }
-function propertyKey(key, t) {
-  return t.isValidIdentifier(key) ? t.identifier(key) : t.stringLiteral(key);
-}
-function packedStyleExpression(style, t) {
-  return t.valueToNode(style);
-}
 function objectPropertyName(property, t) {
   if (t.isIdentifier(property.key)) {
     return property.key.name;
@@ -177,6 +171,7 @@ function cssxBabelPlugin(api, options = {}) {
           finalizeFoldedProps(path, t);
           path.scope.crawl();
           markReferencedStyleCandidates(path);
+          materializeLiveStyleMaps(path, t);
           removeDeadStyleMaps(path);
           compactLiveStyleRecords(path);
           for (const statement of path.get("body")) {
@@ -253,17 +248,24 @@ function cssxBabelPlugin(api, options = {}) {
     for (const [className, atomicClasses] of Object.entries(result.composites)) {
       state.composites.set(className, atomicClasses);
     }
-    const replacement = types.objectExpression(
-      Object.entries(result.styles).map(
-        ([key, style]) => types.objectProperty(propertyKey(key, types), packedStyleExpression(style, types))
-      )
-    );
     if (parent.isVariableDeclarator() && types.isIdentifier(parent.node.id)) {
-      state.styles.set(parent.node.id.name, result.styles);
-      state.styleCandidates.set(parent.node.id.name, result.candidates);
-      state.styleClasses.set(parent.node.id.name, result.classNames);
+      const styleName = parent.node.id.name;
+      state.styles.set(styleName, result.styles);
+      state.styleCandidates.set(styleName, result.candidates);
+      state.styleClasses.set(styleName, result.classNames);
+      path.replaceWith(types.objectExpression([]));
+      return;
+    }
+    path.replaceWith(styleMapExpression(result.styles, types));
+  }
+  function materializeLiveStyleMaps(program, types) {
+    for (const [styleName, styles] of state.styles) {
+      const binding = program.scope.getBinding(styleName);
+      if (!binding?.path.isVariableDeclarator() || binding.referencePaths.length === 0) {
+        continue;
+      }
+      binding.path.node.init = styleMapExpression(styles, types);
     }
-    path.replaceWith(replacement);
   }
   function transformStaticProps(path, types) {
     const styles = [];
@@ -604,6 +606,9 @@ function cssxBabelPlugin(api, options = {}) {
     return values.filter(Boolean).join(" ");
   }
 }
+function styleMapExpression(styles, types) {
+  return types.valueToNode(styles);
+}
 function withStableCompositeNames(result, fileName, anchor) {
   const styles = /* @__PURE__ */ Object.create(null);
   const classNames = /* @__PURE__ */ Object.create(null);

package/dist/index.js

@@ -84,12 +84,6 @@ function readStaticString(path) {
   const initializer = binding.path.get("init");
   return initializer.isStringLiteral() ? initializer.node.value : null;
 }
-function propertyKey(key, t) {
-  return t.isValidIdentifier(key) ? t.identifier(key) : t.stringLiteral(key);
-}
-function packedStyleExpression(style, t) {
-  return t.valueToNode(style);
-}
 function objectPropertyName(property, t) {
   if (t.isIdentifier(property.key)) {
     return property.key.name;
@@ -151,6 +145,7 @@ function cssxBabelPlugin(api, options = {}) {
           finalizeFoldedProps(path, t);
           path.scope.crawl();
           markReferencedStyleCandidates(path);
+          materializeLiveStyleMaps(path, t);
           removeDeadStyleMaps(path);
           compactLiveStyleRecords(path);
           for (const statement of path.get("body")) {
@@ -227,17 +222,24 @@ function cssxBabelPlugin(api, options = {}) {
     for (const [className, atomicClasses] of Object.entries(result.composites)) {
       state.composites.set(className, atomicClasses);
     }
-    const replacement = types.objectExpression(
-      Object.entries(result.styles).map(
-        ([key, style]) => types.objectProperty(propertyKey(key, types), packedStyleExpression(style, types))
-      )
-    );
     if (parent.isVariableDeclarator() && types.isIdentifier(parent.node.id)) {
-      state.styles.set(parent.node.id.name, result.styles);
-      state.styleCandidates.set(parent.node.id.name, result.candidates);
-      state.styleClasses.set(parent.node.id.name, result.classNames);
+      const styleName = parent.node.id.name;
+      state.styles.set(styleName, result.styles);
+      state.styleCandidates.set(styleName, result.candidates);
+      state.styleClasses.set(styleName, result.classNames);
+      path.replaceWith(types.objectExpression([]));
+      return;
+    }
+    path.replaceWith(styleMapExpression(result.styles, types));
+  }
+  function materializeLiveStyleMaps(program, types) {
+    for (const [styleName, styles] of state.styles) {
+      const binding = program.scope.getBinding(styleName);
+      if (!binding?.path.isVariableDeclarator() || binding.referencePaths.length === 0) {
+        continue;
+      }
+      binding.path.node.init = styleMapExpression(styles, types);
     }
-    path.replaceWith(replacement);
   }
   function transformStaticProps(path, types) {
     const styles = [];
@@ -578,6 +580,9 @@ function cssxBabelPlugin(api, options = {}) {
     return values.filter(Boolean).join(" ");
   }
 }
+function styleMapExpression(styles, types) {
+  return types.valueToNode(styles);
+}
 function withStableCompositeNames(result, fileName, anchor) {
   const styles = /* @__PURE__ */ Object.create(null);
   const classNames = /* @__PURE__ */ Object.create(null);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cssxio/babel-plugin",
-  "version": "0.2.1",
+  "version": "0.4.0",
   "description": "Babel compiler transform for CSSX.",
   "license": "MIT",
   "repository": {
@@ -27,7 +27,7 @@
     "@babel/core": "^7.28.0"
   },
   "dependencies": {
-    "@cssxio/compiler": "0.2.0"
+    "@cssxio/compiler": "^0.2.0"
   },
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts --external @babel/core --clean"