@colorye/react-native-css 0.2.1

package/src/babel.js

@@ -0,0 +1,274 @@
+import fs from "fs";
+import nodePath from "path";
+import {
+  getInheritStyleExpression,
+  getRootInheritStyleExpression,
+  getStaticMergeExpression,
+  getStyleExpression,
+  isFragmentElement,
+  isImportOrRequire,
+  isRootLevelJSXElement,
+  tryGetStaticStyleInfo,
+} from "./utils/babel.js";
+
+const libRoot = nodePath.dirname(__filename);
+
+// Cache for loaded stylesheets
+const stylesheetCache = new Map();
+
+/**
+ * Load pre-computed stylesheet JSON (generated by Metro transformer)
+ */
+function loadStylesheet(cssPath) {
+  if (stylesheetCache.has(cssPath)) {
+    return stylesheetCache.get(cssPath);
+  }
+
+  try {
+    // Try the exported-stylesheet.json from lib directory
+    const exportedPath = nodePath.join(libRoot, "exported-stylesheet.json");
+    if (fs.existsSync(exportedPath)) {
+      const content = fs.readFileSync(exportedPath, "utf-8");
+      const stylesheet = JSON.parse(content);
+      stylesheetCache.set(cssPath, stylesheet);
+      return stylesheet;
+    }
+
+    // Try .json next to the CSS file
+    const cssJsonPath = `${cssPath}.json`;
+    if (fs.existsSync(cssJsonPath)) {
+      const content = fs.readFileSync(cssJsonPath, "utf-8");
+      const stylesheet = JSON.parse(content);
+      stylesheetCache.set(cssPath, stylesheet);
+      return stylesheet;
+    }
+
+    return null;
+  } catch {
+    return null;
+  }
+}
+
+export default function ({ types: t }) {
+  return {
+    name: "@colorye/react-native-css",
+    visitor: {
+      Program: {
+        enter(path, state) {
+          if (!this.opts.css) {
+            console.warn("No css file provided");
+            return;
+          }
+
+          const { filename } = state.file.opts;
+          const options = {
+            paths: this.opts.paths || [],
+            excludes: this.opts.excludes || [],
+            css: this.opts.css,
+          };
+
+          // Normalize filename for cross-platform regex matching
+          const normalizedFilename = filename.replace(/\\/g, "/");
+          const regex = options.paths.map((p) => new RegExp(p));
+          const excludesRegex = options.excludes.map((p) => new RegExp(p));
+          if (
+            !regex.some((re) => normalizedFilename.match(re) || filename.match(re)) ||
+            excludesRegex.some((re) => normalizedFilename.match(re) || filename.match(re))
+          ) {
+            return;
+          }
+
+          state.enabled = true;
+
+          // Load pre-computed stylesheet for static inlining
+          state.stylesheetData = loadStylesheet(options.css);
+
+          // Track which runtime helpers we need
+          state.needsGetStyle = false;
+          state.needsGetInheritStyle = false;
+          state.needsMergeStyles = false;
+
+          // Prepare runtime helper declarations
+          state.stylesheetId = path.scope.generateUidIdentifier();
+          state.stylesheet = t.variableDeclaration("var", [
+            t.variableDeclarator(
+              state.stylesheetId,
+              t.callExpression(t.identifier("require"), [t.stringLiteral(options.css)]),
+            ),
+          ]);
+
+          state.getStyleId = path.scope.generateUidIdentifier();
+          state.getStyle = t.variableDeclaration("var", [
+            t.variableDeclarator(
+              state.getStyleId,
+              t.memberExpression(
+                t.memberExpression(
+                  t.callExpression(t.identifier("require"), [
+                    t.stringLiteral(nodePath.join(libRoot, "./transformer-runtime")),
+                  ]),
+                  t.identifier("default"),
+                ),
+                t.identifier("getStyle"),
+              ),
+            ),
+          ]);
+
+          state.getInheritStyleId = path.scope.generateUidIdentifier();
+          state.getInheritStyle = t.variableDeclaration("var", [
+            t.variableDeclarator(
+              state.getInheritStyleId,
+              t.memberExpression(
+                t.memberExpression(
+                  t.callExpression(t.identifier("require"), [
+                    t.stringLiteral(nodePath.join(libRoot, "./transformer-runtime")),
+                  ]),
+                  t.identifier("default"),
+                ),
+                t.identifier("getInheritStyle"),
+              ),
+            ),
+          ]);
+
+          state.mergeStylesId = path.scope.generateUidIdentifier();
+          state.mergeStyles = t.variableDeclaration("var", [
+            t.variableDeclarator(
+              state.mergeStylesId,
+              t.memberExpression(
+                t.memberExpression(
+                  t.callExpression(t.identifier("require"), [
+                    t.stringLiteral(nodePath.join(libRoot, "./transformer-runtime")),
+                  ]),
+                  t.identifier("default"),
+                ),
+                t.identifier("mergeStyles"),
+              ),
+            ),
+          ]);
+        },
+        exit(path, state) {
+          if (!state.enabled) return;
+
+          const helpers = [];
+
+          // Only inject helpers that are actually used
+          if (state.needsGetStyle) {
+            helpers.push(state.stylesheet);
+            helpers.push(state.getStyle);
+          }
+          if (state.needsGetInheritStyle) {
+            helpers.push(state.getInheritStyle);
+          }
+          if (state.needsMergeStyles) {
+            helpers.push(state.mergeStyles);
+          }
+
+          if (helpers.length === 0) return;
+
+          const lastImport = path
+            .get("body")
+            .filter((p) => isImportOrRequire(p))
+            .pop();
+
+          helpers
+            .reverse()
+            .forEach((node) =>
+              lastImport ? lastImport.insertAfter(node) : path.unshiftContainer("body", node),
+            );
+        },
+      },
+      JSXElement(path, state) {
+        if (!state.enabled) return;
+        if (isFragmentElement(t, path.node.openingElement.name)) return;
+
+        const openingElement = path.node.openingElement;
+        const isRootLevel = isRootLevelJSXElement(path);
+
+        // Inject inheritStyle for root-level elements
+        if (isRootLevel) {
+          const inheritStyle = openingElement.attributes.find(
+            (attr) => attr.name?.name === "inheritStyle",
+          );
+
+          if (!inheritStyle) {
+            const inheritStyleExpressions = getRootInheritStyleExpression(path, t);
+            openingElement.attributes.push(
+              t.jsxAttribute(
+                t.jsxIdentifier("inheritStyle"),
+                t.jsxExpressionContainer(inheritStyleExpressions),
+              ),
+            );
+          }
+        }
+
+        const shouldCombineStyles = openingElement.attributes.some(
+          (attr) => attr.name?.name === "__combinedStyles",
+        );
+
+        if (shouldCombineStyles) {
+          let styleExpressions;
+
+          // Try static inlining first (if stylesheet loaded and class is static)
+          if (state.stylesheetData) {
+            const staticInfo = tryGetStaticStyleInfo(path, state, t);
+
+            if (staticInfo) {
+              // Static class! Use lightweight mergeStyles
+              styleExpressions = getStaticMergeExpression(path, state, t, staticInfo);
+              state.needsMergeStyles = true;
+            }
+          }
+
+          if (!styleExpressions) {
+            // Fall back to full runtime getStyle
+            state.needsGetStyle = true;
+            styleExpressions = getStyleExpression(path, state, t);
+          }
+
+          const style = openingElement.attributes.find((attr) => attr.name?.name === "style");
+          if (style) {
+            style.value = t.jsxExpressionContainer(styleExpressions);
+          } else {
+            openingElement.attributes.push(
+              t.jsxAttribute(t.jsxIdentifier("style"), t.jsxExpressionContainer(styleExpressions)),
+            );
+          }
+        }
+
+        // Inject inheritStyle for child elements
+        path.traverse({
+          JSXElement(childPath) {
+            const childOpeningElement = childPath.node.openingElement;
+
+            if (isFragmentElement(t, childOpeningElement.name)) {
+              childPath.skip();
+              return;
+            }
+
+            // Child elements need getInheritStyle for propagation
+            state.needsGetInheritStyle = true;
+            // getInheritStyle depends on getStyle
+            state.needsGetStyle = true;
+
+            const inheritStyleExpressions = getInheritStyleExpression(path, state, t);
+            const inheritStyle = childOpeningElement.attributes.find(
+              (attr) => attr.name?.name === "inheritStyle",
+            );
+
+            if (inheritStyle) {
+              inheritStyle.value = t.jsxExpressionContainer(inheritStyleExpressions);
+            } else {
+              childOpeningElement.attributes.push(
+                t.jsxAttribute(
+                  t.jsxIdentifier("inheritStyle"),
+                  t.jsxExpressionContainer(inheritStyleExpressions),
+                ),
+              );
+            }
+
+            childPath.skip();
+          },
+        });
+      },
+    },
+  };
+}