@niibase/uniwind 1.6.4 → 1.8.0

package/dist/metro/{metro-transformer.mjs → transformer.mjs}

@@ -1,12 +1,79 @@
-import fs from 'fs';
+import { L as Logger, P as Platform, S as StyleDependency, i as isDefined, D as DEFAULT_SCREEN_HEIGHT, a as DEFAULT_SCREEN_WIDTH, b as UNIWIND_PLATFORM_VARIABLES, c as UNIWIND_THEME_VARIABLES, U as UniwindBundlerConfig } from '../shared/uniwind.DgC4MT51.mjs';
 import path from 'path';
-import { p as pipe, r as roundToPrecision, i as isNumber, a as isValidJSValue, s as smartSplit, b as addMissingSpaces, t as toCamelCase, d as deepEqual, c as shouldBeSerialized, e as removeKeys, n as name } from '../shared/uniwind.PtWWxxnh.mjs';
-import { P as Platform, U as UNIWIND_PLATFORM_VARIABLES, a as UNIWIND_THEME_VARIABLES } from '../shared/uniwind.JSWK3vHl.mjs';
-import { compile } from '@tailwindcss/node';
-import { Scanner } from '@tailwindcss/oxide';
+import { n as name } from '../shared/uniwind.CFAAUZ2t.mjs';
 import { transform as transform$1 } from 'lightningcss';
-import { L as Logger, U as UniwindCSSVisitor, s as stringifyThemes, b as buildDtsFile, a as buildCSS } from '../shared/uniwind.BGiqYvxb.mjs';
 import { converter, parse, formatHex, formatHex8 } from 'culori';
+import { compile } from '@tailwindcss/node';
+import { Scanner } from '@tailwindcss/oxide';
+import fs from 'fs';
+
+const toCamelCase = (str) => str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+const pipe = (data) => ((...fns) => fns.reduce((acc, fn) => fn(acc), data));
+const isNumber = (data) => {
+  if (typeof data === "number") {
+    return true;
+  }
+  if (typeof data === "string" && data !== "") {
+    return !isNaN(Number(data));
+  }
+  return false;
+};
+const smartSplit = (str, separator = " ") => {
+  const escaper = "&&&";
+  return pipe(str)(
+    (x) => x.replace(/\s\?\?\s/g, `${escaper}??${escaper}`),
+    (x) => x.replace(/\s([+\-*/])\s/g, `${escaper}$1${escaper}`),
+    (x) => x.split(separator),
+    (x) => x.map((token) => token.replace(new RegExp(escaper, "g"), " "))
+  );
+};
+const addMissingSpaces = (str) => pipe(str)(
+  (x) => x.trim(),
+  (x) => x.replace(/\](?=\d)/g, "] "),
+  (x) => x.replace(/\](?=")/g, "] "),
+  (x) => x.replace(/\)(?=[^\s,])/g, ") "),
+  (x) => x.replace(/(?<!^)(?<!\s)"(?=\d)/g, '" ')
+);
+const isValidJSValue = (jsValueString) => {
+  try {
+    new Function(`const test = ${jsValueString}`);
+    return true;
+  } catch {
+    return false;
+  }
+};
+const shouldBeSerialized = (value) => {
+  if (value.includes("-")) {
+    return value.split("-").some(shouldBeSerialized);
+  }
+  return [
+    isNumber(value),
+    value.startsWith("vars["),
+    value.startsWith("rt."),
+    /[*/+-]/.test(value),
+    value.includes('"'),
+    value.includes(" "),
+    value === "(",
+    value === ")"
+  ].some(Boolean);
+};
+const roundToPrecision = (value, precision) => parseFloat(value.toFixed(precision));
+const deepEqual = (a, b) => {
+  if (Object.is(a, b)) {
+    return true;
+  }
+  if (typeof a !== "object" || a === null || typeof b !== "object" || b === null) {
+    return false;
+  }
+  const keysA = Object.keys(a);
+  if (keysA.length !== Object.keys(b).length) {
+    return false;
+  }
+  return keysA.every((key) => deepEqual(a[key], b[key]) && Object.prototype.hasOwnProperty.call(b, key));
+};
+const removeKeys = (obj, keysToRemove) => Object.fromEntries(
+  Object.entries(obj).filter(([key]) => !keysToRemove.includes(key))
+);
 
 const parseStringValue = (value) => {
   if (isValidJSValue(value)) {
@@ -107,24 +174,9 @@ const serializeJSObject = (obj, serializer) => {
   return serializedObject;
 };
 
-const isDefined = (value) => value !== void 0 && value !== null;
-
-var StyleDependency = /* @__PURE__ */ ((StyleDependency2) => {
-  StyleDependency2[StyleDependency2["ColorScheme"] = 1] = "ColorScheme";
-  StyleDependency2[StyleDependency2["Theme"] = 2] = "Theme";
-  StyleDependency2[StyleDependency2["Dimensions"] = 3] = "Dimensions";
-  StyleDependency2[StyleDependency2["Orientation"] = 4] = "Orientation";
-  StyleDependency2[StyleDependency2["Insets"] = 5] = "Insets";
-  StyleDependency2[StyleDependency2["FontScale"] = 6] = "FontScale";
-  StyleDependency2[StyleDependency2["Rtl"] = 7] = "Rtl";
-  StyleDependency2[StyleDependency2["AdaptiveThemes"] = 8] = "AdaptiveThemes";
-  StyleDependency2[StyleDependency2["Variables"] = 9] = "Variables";
-  return StyleDependency2;
-})(StyleDependency || {});
-
 const extractVarsFromString = (value) => {
-  const thisIndexes = [...value.matchAll(/this\[/g)].map((m) => m.index);
-  return thisIndexes.map((index) => {
+  const varsIndexes = [...value.matchAll(/vars\[/g)].map((m) => m.index);
+  return varsIndexes.map((index) => {
     const afterIndex = value.slice(index + 5);
     const closingIndex = afterIndex.indexOf("]");
     const varName = afterIndex.slice(0, closingIndex);
@@ -140,6 +192,23 @@ const makeSafeForSerialization = (value) => {
   }
   return value;
 };
+const hasThemedVarDependency = (varName, Processor, visited = /* @__PURE__ */ new Set()) => {
+  if (visited.has(varName)) {
+    return false;
+  }
+  visited.add(varName);
+  const isScopedVar = Object.values(Processor.scopedVars).some((scopedVars) => varName in scopedVars);
+  if (isScopedVar) {
+    return true;
+  }
+  const globalVarValue = Processor.vars[varName];
+  if (typeof globalVarValue !== "string") {
+    return false;
+  }
+  return extractVarsFromString(globalVarValue).some((usedVarName) => {
+    return hasThemedVarDependency(usedVarName, Processor, visited);
+  });
+};
 const addMetaToStylesTemplate = (Processor, currentPlatform) => {
   const stylesheetsEntries = Object.entries(Processor.stylesheets).map(([className, stylesPerMediaQuery]) => {
     const styles = stylesPerMediaQuery.map((style, index) => {
@@ -159,7 +228,7 @@ const addMetaToStylesTemplate = (Processor, currentPlatform) => {
         dataAttributes,
         ...rest
       } = style;
-      const entries = Object.entries(rest).flatMap(([property, value]) => Processor.RN.cssToRN(property, value)).map(([property, value]) => [`"${property}"`, `function() { return ${serialize(value)} }`]);
+      const entries = Object.entries(rest).flatMap(([property, value]) => Processor.RN.cssToRN(property, value)).map(([property, value]) => [`"${property}"`, `function(vars) { return ${serialize(value)} }`]);
       if (platform) {
         const isTV = currentPlatform === Platform.AndroidTV || currentPlatform === Platform.AppleTV;
         const commonPlatform = isTV ? Platform.TV : Platform.Native;
@@ -173,12 +242,7 @@ const addMetaToStylesTemplate = (Processor, currentPlatform) => {
       const dependencies = [];
       const stringifiedEntries = JSON.stringify(entries);
       const usedVars = extractVarsFromString(stringifiedEntries);
-      const isUsingThemedVar = usedVars.some((usedVarName) => {
-        return Object.values(Processor.scopedVars).some((scopedVars) => {
-          const scopedVarsNames = Object.keys(scopedVars);
-          return scopedVarsNames.includes(usedVarName);
-        });
-      });
+      const isUsingThemedVar = usedVars.some((usedVarName) => hasThemedVarDependency(usedVarName, Processor));
       if (usedVars.length > 0) {
         dependencies.push(StyleDependency.Variables);
       }
@@ -191,7 +255,7 @@ const addMetaToStylesTemplate = (Processor, currentPlatform) => {
       if (rtl !== null) {
         dependencies.push(StyleDependency.Rtl);
       }
-      if (Number(minWidth) !== 0 || Number(maxWidth) !== Number.MAX_VALUE || stringifiedEntries.includes("rt.screen")) {
+      if (Number(minWidth) !== 0 || Number(maxWidth) !== Number.MAX_VALUE || stringifiedEntries.includes("rt.makeResponsive") || stringifiedEntries.includes("rt.screen")) {
         dependencies.push(StyleDependency.Dimensions);
       }
       if (stringifiedEntries.includes("rt.insets")) {
@@ -215,7 +279,7 @@ const addMetaToStylesTemplate = (Processor, currentPlatform) => {
         active,
         focus,
         disabled,
-        importantProperties: importantProperties?.map((property) => property.startsWith("--") ? property : toCamelCase).map(makeSafeForSerialization) ?? [],
+        importantProperties: importantProperties?.map((property) => property.startsWith("--") ? property : toCamelCase(property)).map(makeSafeForSerialization) ?? [],
         dataAttributes,
         complexity: [
           minWidth !== 0,
@@ -287,11 +351,7 @@ const parseTransformsMutation = (styles, preserve = false) => {
     }
   }
   if (transformsResult.length > 0) {
-    Object.defineProperty(styles, "transform", {
-      configurable: true,
-      enumerable: true,
-      value: transformsResult
-    });
+    styles.transform = transformsResult;
   }
 };
 
@@ -318,7 +378,7 @@ class Color {
     }
     try {
       if (color.type === "currentcolor") {
-        return 'this["currentColor"]';
+        return 'vars["currentColor"]?.(vars)';
       }
       if (color.type === "rgb" || color.type === "srgb") {
         const alpha = typeof color.alpha === "number" ? color.alpha : pipe(color.alpha)(
@@ -473,8 +533,8 @@ class CSS {
     this.Processor = Processor;
   }
   logger = new Logger("CSS");
-  processValue(declarationValue) {
-    const processedValue = this.getProcessedValue(declarationValue);
+  processValue(declarationValue, declarationProperty) {
+    const processedValue = this.getProcessedValue(declarationValue, declarationProperty);
     if (typeof processedValue === "string") {
       return this.makeSafeForSerialization(processedValue);
     }
@@ -545,7 +605,7 @@ class CSS {
     });
     return filterStrings.join(" ");
   }
-  getProcessedValue(declarationValue) {
+  getProcessedValue(declarationValue, declarationProperty) {
     if (typeof declarationValue !== "object") {
       return declarationValue;
     }
@@ -700,7 +760,7 @@ class CSS {
             return this.Processor.Color.processColor(declarationValue.value);
           }
           if (declarationValue.value === "currentcolor") {
-            return 'this["currentColor"]';
+            return 'vars["currentColor"]?.(vars)';
           }
           return declarationValue.value;
         case "env":
@@ -737,7 +797,7 @@ class CSS {
         case "pair":
           return declarationValue.inside.type;
         case "currentcolor":
-          return 'this["currentColor"]';
+          return 'vars["currentColor"]?.(vars)';
         case "calc":
           return this.Processor.Functions.processCalc(declarationValue.value);
         case "min":
@@ -830,11 +890,17 @@ class CSS {
       };
     }
     if ("grow" in declarationValue) {
-      return {
+      const parsedFlex = {
         flexGrow: declarationValue.grow,
         flexShrink: declarationValue.shrink,
         flexBasis: this.processValue(declarationValue.basis)
       };
+      if (declarationProperty === "flex" && parsedFlex.flexGrow === 1 && parsedFlex.flexShrink === 1 && parsedFlex.flexBasis === '"0%"') {
+        return {
+          flex: 1
+        };
+      }
+      return parsedFlex;
     }
     if (Array.isArray(declarationValue)) {
       if (declarationValue.length === 1) {
@@ -1479,6 +1545,58 @@ const cssToRNMap = {
 const BORDER_WIDTH_KEYS = ["borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth"];
 const BORDER_COLOR_KEYS = ["borderTopColor", "borderRightColor", "borderBottomColor", "borderLeftColor"];
 const BORDER_RADIUS_KEYS = ["borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderBottomRightRadius"];
+const COMPONENT_RESPONSIVE_PROPS = /* @__PURE__ */ new Set([
+  "width",
+  "height",
+  "minWidth",
+  "maxWidth",
+  "minHeight",
+  "maxHeight",
+  "padding",
+  "paddingTop",
+  "paddingRight",
+  "paddingBottom",
+  "paddingLeft",
+  "paddingHorizontal",
+  "paddingVertical",
+  "paddingStart",
+  "paddingEnd",
+  "margin",
+  "marginTop",
+  "marginRight",
+  "marginBottom",
+  "marginLeft",
+  "marginHorizontal",
+  "marginVertical",
+  "marginStart",
+  "marginEnd",
+  "top",
+  "right",
+  "bottom",
+  "left",
+  "gap",
+  "rowGap",
+  "columnGap",
+  "borderWidth",
+  "borderTopWidth",
+  "borderRightWidth",
+  "borderBottomWidth",
+  "borderLeftWidth",
+  "borderStartWidth",
+  "borderEndWidth",
+  "borderRadius",
+  "borderTopLeftRadius",
+  "borderTopRightRadius",
+  "borderBottomLeftRadius",
+  "borderBottomRightRadius",
+  "borderTopStartRadius",
+  "borderTopEndRadius",
+  "borderBottomStartRadius",
+  "borderBottomEndRadius",
+  "flexBasis",
+  "translateX",
+  "translateY"
+]);
 class RN {
   constructor(Processor) {
     this.Processor = Processor;
@@ -1501,7 +1619,34 @@ class RN {
       typeof value === "string" ? addMissingSpaces(value) : value
     );
     const joinedStyles = this.joinStyles(rn);
-    return Object.entries(joinedStyles).filter(([, value2]) => isDefined(value2));
+    return Object.entries(joinedStyles).filter(([, value2]) => isDefined(value2)).map(([prop, val]) => [prop, this.makeResponsive(prop, val)]);
+  }
+  makeResponsive(property, value) {
+    const mode = this.Processor.bundlerConfig.polyfills?.responsive;
+    if (!mode) {
+      return value;
+    }
+    if (typeof value === "string") {
+      const rawValue = value.startsWith('"') && value.endsWith('"') ? value.slice(1, -1) : value;
+      if (rawValue.endsWith("%")) {
+        const numValue = parseFloat(rawValue);
+        if (!isNaN(numValue)) {
+          return `rt.makeResponsive(${numValue}, 100, true)`;
+        }
+      }
+    }
+    if (typeof value !== "number") {
+      return value;
+    }
+    const isTextMode = mode === true || mode === "text";
+    const isComponentMode = mode === true || mode === "components";
+    if (isTextMode && (property === "fontSize" || property === "--uniwind-em")) {
+      return `rt.makeResponsive(${value}, ${DEFAULT_SCREEN_HEIGHT}, true)`;
+    }
+    if (isComponentMode && COMPONENT_RESPONSIVE_PROPS.has(property)) {
+      return `rt.makeResponsive(${value}, ${DEFAULT_SCREEN_WIDTH})`;
+    }
+    return value;
   }
   transformProperty(property, value) {
     if (property in cssToRNMap) {
@@ -1629,7 +1774,7 @@ class Units {
         case "rem":
           return length.value * this.Processor.vars["--uniwind-em"];
         case "em":
-          return `this[\`--uniwind-em\`] * ${length.value}`;
+          return `vars["--uniwind-em"]?.(vars) * ${length.value}`;
         default:
           this.logger.warn(`Unsupported unit - ${length.unit}`);
           return length.value;
@@ -1662,7 +1807,7 @@ class Var {
     this.Processor = Processor;
   }
   processVar(variable) {
-    const value = `this[\`${variable.name.ident}\`]`;
+    const value = `vars[${JSON.stringify(variable.name.ident)}]?.(vars)`;
     if (!variable.fallback || variable.fallback.length === 0) {
       return value;
     }
@@ -1672,10 +1817,9 @@ class Var {
 }
 
 class ProcessorBuilder {
-  constructor(themes, polyfills) {
-    this.themes = themes;
-    this.polyfills = polyfills;
-    this.vars["--uniwind-em"] = polyfills?.rem ?? 16;
+  constructor(bundlerConfig) {
+    this.bundlerConfig = bundlerConfig;
+    this.vars["--uniwind-em"] = this.bundlerConfig.polyfills?.rem ?? 16;
   }
   stylesheets = {};
   vars = {};
@@ -1785,7 +1929,7 @@ class ProcessorBuilder {
     if (!isVar && important) {
       style.importantProperties.push(property);
     }
-    const match = typeof value === "string" ? value.match(/this\[`(.*?)`\]/) : null;
+    const match = typeof value === "string" ? value.match(/vars\["(.*?)"\]/) : null;
     if (match && !isVar) {
       const className = this.declarationConfig.className;
       if (className === null) {
@@ -1836,7 +1980,7 @@ class ProcessorBuilder {
       if (property === "animation") {
         return this.CSS.processAnimation(value);
       }
-      return this.CSS.processValue(value);
+      return this.CSS.processValue(value, property);
     };
     if (declaration.property === "unparsed") {
       const property = declaration.value.propertyId.property;
@@ -1887,7 +2031,7 @@ class ProcessorBuilder {
           if (selector2.type === "pseudo-class" && selector2.kind === "where") {
             selector2.selectors.forEach((selector3) => {
               selector3.forEach((selector4) => {
-                if (selector4.type === "class" && this.themes.includes(selector4.name)) {
+                if (selector4.type === "class" && this.bundlerConfig.themes.includes(selector4.name)) {
                   theme = selector4.name;
                 }
                 if (selector4.type === "pseudo-class" && selector4.kind === "dir") {
@@ -1915,12 +2059,12 @@ class ProcessorBuilder {
           }
         });
         if ([rtl, theme, active, focus, disabled, dataAttributes].some(Boolean)) {
-          this.declarationConfig.rtl = rtl;
-          this.declarationConfig.theme = theme;
-          this.declarationConfig.active = active;
-          this.declarationConfig.focus = focus;
-          this.declarationConfig.disabled = disabled;
-          this.declarationConfig.dataAttributes = dataAttributes;
+          this.declarationConfig.rtl ??= rtl;
+          this.declarationConfig.theme ??= theme;
+          this.declarationConfig.active ??= active;
+          this.declarationConfig.focus ??= focus;
+          this.declarationConfig.disabled ??= disabled;
+          this.declarationConfig.dataAttributes ??= dataAttributes;
           rule.value.declarations?.declarations?.forEach((declaration) => this.addDeclaration(declaration));
           rule.value.declarations?.importantDeclarations?.forEach((declaration) => this.addDeclaration(declaration, true));
           rule.value.rules?.forEach((rule2) => this.parseRuleRec(rule2));
@@ -1999,52 +2143,29 @@ class ProcessorBuilder {
   }
 }
 
-const compileVirtual = async ({ css, cssPath, platform, themes, polyfills, debug, candidates }) => {
-  const compiler = await compile(css, {
-    base: path.dirname(cssPath),
-    onDependency: () => void 0
-  });
-  const scanner = new Scanner({
-    sources: [
-      ...compiler.sources,
-      {
-        negated: false,
-        pattern: "**/*",
-        base: path.dirname(cssPath)
-      }
-    ]
-  });
-  const tailwindCSS = compiler.build(candidates ?? scanner.scan());
-  if (platform === Platform.Web) {
-    return transform$1({
-      code: Buffer.from(tailwindCSS),
-      filename: "uniwind.css",
-      visitor: new UniwindCSSVisitor(themes)
-    }).code.toString();
-  }
-  const Processor = new ProcessorBuilder(themes, polyfills);
-  Logger.debug = debug === true;
+const compileNativeCSS = (bundlerConfig, tailwindCSS) => {
+  const Processor = new ProcessorBuilder(bundlerConfig);
   Processor.transform(tailwindCSS);
   const stylesheet = serializeJSObject(
-    addMetaToStylesTemplate(Processor, platform),
+    addMetaToStylesTemplate(Processor, bundlerConfig.platform),
     (key, value) => `"${key}": ${value}`
   );
   const vars = serializeJSObject(
     Processor.vars,
+    (key, value) => `"${key}": vars => ${value}`
+  );
+  const keyframes = serializeJSObject(
+    Processor.keyframes,
     (key, value) => `get "${key}"() { return ${value} }`
   );
   const scopedVars = Object.fromEntries(
     Object.entries(Processor.scopedVars).map(([scopedVarsName, scopedVars2]) => [
       scopedVarsName,
-      serializeJSObject(scopedVars2, (key, value) => `get "${key}"() { return ${value} }`)
+      serializeJSObject(scopedVars2, (key, value) => `"${key}": vars => ${value}`)
     ])
   );
-  const keyframes = serializeJSObject(
-    Processor.keyframes,
-    (key, value) => `get "${key}"() { return ${value} }`
-  );
   const serializedScopedVars = Object.entries(scopedVars).map(([scopedVarsName, scopedVars2]) => `"${scopedVarsName}": ({ ${scopedVars2} }),`).join("");
-  const currentColorVar = `get currentColor() { return rt.colorScheme === 'dark' ? '#ffffff' : '#000000' },`;
+  const currentColorVar = `currentColor: () => rt.colorScheme === 'dark' ? '#ffffff' : '#000000',`;
   return [
     "({",
     `scopedVars: ({ ${serializedScopedVars} }),`,
@@ -2055,17 +2176,42 @@ const compileVirtual = async ({ css, cssPath, platform, themes, polyfills, debug
   ].join("");
 };
 
-const injectThemes = async ({
-  themes,
-  dtsPath = "uniwind-types.d.ts",
-  input
-}) => {
-  const stringifiedThemes = stringifyThemes(themes);
-  buildDtsFile(dtsPath, stringifiedThemes);
-  await buildCSS(themes, input);
-  return stringifiedThemes;
+const compileTailwind = async (bundlerConfig) => {
+  const css = await fs.promises.readFile(bundlerConfig.cssPath, "utf-8");
+  const compiler = await compile(css, {
+    base: path.dirname(bundlerConfig.cssPath),
+    onDependency: () => void 0
+  });
+  const scanner = new Scanner({
+    sources: [
+      ...compiler.sources,
+      {
+        negated: false,
+        pattern: "**/*",
+        base: path.dirname(bundlerConfig.cssPath)
+      }
+    ]
+  });
+  return compiler.build(scanner.scan());
 };
 
+const compileWebCSS = (bundlerConfig, tailwindCSS) => {
+  return transform$1({
+    code: Buffer.from(tailwindCSS),
+    filename: "uniwind.css",
+    visitor: bundlerConfig.cssVisitor
+  }).code.toString();
+};
+
+const compileCSS = async (bundlerConfig) => {
+  const tailwindCSS = await compileTailwind(bundlerConfig);
+  if (bundlerConfig.platform === Platform.Web) {
+    return compileWebCSS(bundlerConfig, tailwindCSS);
+  }
+  return compileNativeCSS(bundlerConfig, tailwindCSS);
+};
+
+const cssArtifactPath = path.resolve(__dirname, "../../uniwind.css");
 let worker;
 try {
   try {
@@ -2080,16 +2226,11 @@ try {
 const transform = async (config, projectRoot, filePath, data, options) => {
   const isCss = options.type !== "asset" && path.join(process.cwd(), config.uniwind.cssEntryFile) === path.join(projectRoot, filePath);
   if (filePath.endsWith("/components/web/metro-injected.js")) {
-    const cssPath2 = path.join(process.cwd(), config.uniwind.cssEntryFile);
-    const injectedThemesCode2 = await injectThemes({
-      input: cssPath2,
-      themes: config.uniwind.themes,
-      dtsPath: config.uniwind.dtsFile
-    });
+    const bundlerConfig2 = UniwindBundlerConfig.fromMetroConfig(config.uniwind, Platform.Web);
     data = Buffer.from(
       [
         `import { Uniwind } from '${name}';`,
-        `Uniwind.__reinit(() => ({}), ${injectedThemesCode2});`
+        `Uniwind.__reinit(() => ({}), ${bundlerConfig2.stringifiedThemes});`
       ].join(""),
       "utf-8"
     );
@@ -2097,39 +2238,14 @@ const transform = async (config, projectRoot, filePath, data, options) => {
   if (!isCss) {
     return worker.transform(config, projectRoot, filePath, data, options);
   }
-  const getPlatform = () => {
-    if (!config.uniwind.isTV) {
-      return options.platform;
-    }
-    if (options.platform === Platform.Android) {
-      return Platform.AndroidTV;
-    }
-    if (options.platform === Platform.iOS) {
-      return Platform.AppleTV;
-    }
-    throw new Error(`Platform ${options.platform} not supported`);
-  };
-  const cssPath = path.join(process.cwd(), config.uniwind.cssEntryFile);
-  const injectedThemesCode = await injectThemes({
-    input: cssPath,
-    themes: config.uniwind.themes,
-    dtsPath: config.uniwind.dtsFile
-  });
-  const css = fs.readFileSync(cssPath, "utf-8");
-  const platform = getPlatform();
-  const virtualCode = await compileVirtual({
-    css,
-    platform,
-    themes: config.uniwind.themes,
-    polyfills: config.uniwind.polyfills,
-    cssPath,
-    debug: config.uniwind.debug
-  });
-  const isWeb = platform === Platform.Web;
+  const bundlerConfig = UniwindBundlerConfig.fromMetroConfig(config.uniwind, options.platform);
+  await bundlerConfig.generateArtifacts(cssArtifactPath);
+  const virtualCode = await compileCSS(bundlerConfig);
+  const isWeb = bundlerConfig.platform === Platform.Web;
   data = Buffer.from(
     isWeb ? virtualCode : [
       `const { Uniwind } = require('${name}');`,
-      `Uniwind.__reinit(rt => ${virtualCode}, ${injectedThemesCode});`
+      `Uniwind.__reinit(rt => ${virtualCode}, ${bundlerConfig.stringifiedThemes});`
     ].join(""),
     "utf-8"
   );

package/dist/module/{css → bundler/artifacts/css}/index.d.ts

@@ -1 +1 @@
-export declare const buildCSS: (themes: Array<string>, input: string) => Promise<void>;
+export declare const buildCSS: (themes: Array<string>, input: string, cssFilePath: string) => Promise<void>;

package/dist/module/{css → bundler/artifacts/css}/index.js

@@ -1,14 +1,11 @@
 import fs from "fs";
-import path from "path";
 import { EXTRA_UTILITIES_CSS } from "./extraUtilities.js";
 import { INSETS_CSS } from "./insets.js";
 import { OVERWRITE_CSS } from "./overwrite.js";
 import { generateCSSForThemes } from "./themes.js";
 import { VARIANTS_CSS } from "./variants.js";
-const dirname = typeof __dirname !== "undefined" ? __dirname : import.meta.dirname;
-export const buildCSS = async (themes, input) => {
+export const buildCSS = async (themes, input, cssFilePath) => {
   const themesCSS = await generateCSSForThemes(themes, input);
-  const cssFilePath = path.join(dirname, "../../uniwind.css");
   const oldCSSFile = fs.existsSync(cssFilePath) ? fs.readFileSync(cssFilePath, "utf-8") : "";
   const newCssFile = [
     VARIANTS_CSS,

package/dist/module/{css → bundler/artifacts/css}/themes.js

@@ -1,8 +1,8 @@
+import { Logger } from "@/bundler/logger";
 import { compile } from "@tailwindcss/node";
 import fs from "fs";
 import { transform } from "lightningcss";
 import path from "path";
-import { Logger } from "../metro/logger";
 const readFileSafe = (filePath) => {
   try {
     return fs.readFileSync(filePath, "utf-8");
@@ -49,6 +49,9 @@ export const generateCSSForThemes = async (themes, input) => {
     }
     const importUrls = /* @__PURE__ */ new Set();
     const importsCSS = dependencies.filter((dependency) => {
+      if (dependency.type !== "import") {
+        return false;
+      }
       if (dependency.url.startsWith(".")) {
         importUrls.add(path.resolve(path.dirname(cssPath), dependency.url));
         return false;

package/dist/module/{utils/buildDtsFile.js → bundler/artifacts/dts.js}

@@ -1,12 +1,11 @@
 import fs from "fs";
-import { name } from "../../package.json";
 export const buildDtsFile = (dtsPath, stringifiedThemes) => {
   const oldDtsContent = fs.existsSync(dtsPath) ? fs.readFileSync(dtsPath, "utf-8") : "";
   const dtsContent = [
-    `// NOTE: This file is generated by ${name} and it should not be edited manually.`,
-    `/// <reference types="${name}/types" />`,
+    `// NOTE: This file is generated by uniwind and it should not be edited manually.`,
+    `/// <reference types="uniwind/types" />`,
     "",
-    `declare module '${name}' {`,
+    `declare module 'uniwind' {`,
     `    export interface UniwindConfig {`,
     `        themes: readonly ${stringifiedThemes}`,
     `    }`,

package/dist/module/bundler/cli/index.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};