@niibase/uniwind 1.7.0 → 1.8.0

package/dist/metro/transformer.cjs

@@ -1,7 +1,8 @@
 'use strict';
 
-const _package = require('../shared/uniwind.CFiAZ3D-.cjs');
+const config = require('../shared/uniwind.BEqYiPBB.cjs');
 const path = require('path');
+const _package = require('../shared/uniwind.DJ5M1Q4q.cjs');
 const lightningcss = require('lightningcss');
 const culori = require('culori');
 const node = require('@tailwindcss/node');
@@ -35,10 +36,9 @@ const smartSplit = (str, separator = " ") => {
 };
 const addMissingSpaces = (str) => pipe(str)(
   (x) => x.trim(),
-  (x) => x.replace(/([^ {])this/g, "$1 this"),
   (x) => x.replace(/\](?=\d)/g, "] "),
   (x) => x.replace(/\](?=")/g, "] "),
-  (x) => x.replace(/\)(?=\S)/g, ") "),
+  (x) => x.replace(/\)(?=[^\s,])/g, ") "),
   (x) => x.replace(/(?<!^)(?<!\s)"(?=\d)/g, '" ')
 );
 const isValidJSValue = (jsValueString) => {
@@ -55,7 +55,7 @@ const shouldBeSerialized = (value) => {
   }
   return [
     isNumber(value),
-    value.startsWith("this["),
+    value.startsWith("vars["),
     value.startsWith("rt."),
     /[*/+-]/.test(value),
     value.includes('"'),
@@ -166,7 +166,7 @@ const serializeJSObject = (obj, serializer) => {
         new Function(`function validateJS() { const obj = ({ ${serializedValue} }) }`);
         return true;
       } catch {
-        _package.Logger.error(`Failed to serialize ${serializedValue} as a valid JS object entry. Skipping.`);
+        config.Logger.error(`Failed to serialize ${serializedValue} as a valid JS object entry. Skipping.`);
         return false;
       }
     }),
@@ -182,8 +182,8 @@ const serializeJSObject = (obj, serializer) => {
 };
 
 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);
@@ -235,10 +235,10 @@ 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 === _package.Platform.AndroidTV || currentPlatform === _package.Platform.AppleTV;
-        const commonPlatform = isTV ? _package.Platform.TV : _package.Platform.Native;
+        const isTV = currentPlatform === config.Platform.AndroidTV || currentPlatform === config.Platform.AppleTV;
+        const commonPlatform = isTV ? config.Platform.TV : config.Platform.Native;
         if (platform !== commonPlatform && platform !== currentPlatform) {
           return null;
         }
@@ -251,25 +251,25 @@ const addMetaToStylesTemplate = (Processor, currentPlatform) => {
       const usedVars = extractVarsFromString(stringifiedEntries);
       const isUsingThemedVar = usedVars.some((usedVarName) => hasThemedVarDependency(usedVarName, Processor));
       if (usedVars.length > 0) {
-        dependencies.push(_package.StyleDependency.Variables);
+        dependencies.push(config.StyleDependency.Variables);
       }
       if (theme !== null || isUsingThemedVar || stringifiedEntries.includes("rt.lightDark")) {
-        dependencies.push(_package.StyleDependency.Theme);
+        dependencies.push(config.StyleDependency.Theme);
       }
       if (orientation !== null) {
-        dependencies.push(_package.StyleDependency.Orientation);
+        dependencies.push(config.StyleDependency.Orientation);
       }
       if (rtl !== null) {
-        dependencies.push(_package.StyleDependency.Rtl);
+        dependencies.push(config.StyleDependency.Rtl);
       }
       if (Number(minWidth) !== 0 || Number(maxWidth) !== Number.MAX_VALUE || stringifiedEntries.includes("rt.makeResponsive") || stringifiedEntries.includes("rt.screen")) {
-        dependencies.push(_package.StyleDependency.Dimensions);
+        dependencies.push(config.StyleDependency.Dimensions);
       }
       if (stringifiedEntries.includes("rt.insets")) {
-        dependencies.push(_package.StyleDependency.Insets);
+        dependencies.push(config.StyleDependency.Insets);
       }
       if (stringifiedEntries.includes("rt.fontScale")) {
-        dependencies.push(_package.StyleDependency.FontScale);
+        dependencies.push(config.StyleDependency.FontScale);
       }
       return {
         entries,
@@ -301,7 +301,7 @@ const addMetaToStylesTemplate = (Processor, currentPlatform) => {
         ].filter(Boolean).length
       };
     });
-    const filteredStyles = styles.filter(_package.isDefined);
+    const filteredStyles = styles.filter(config.isDefined);
     if (filteredStyles.length === 0) {
       return null;
     }
@@ -309,7 +309,7 @@ const addMetaToStylesTemplate = (Processor, currentPlatform) => {
       className,
       filteredStyles
     ];
-  }).filter(_package.isDefined);
+  }).filter(config.isDefined);
   const stylesheets = Object.fromEntries(stylesheetsEntries);
   return stylesheets;
 };
@@ -358,11 +358,7 @@ const parseTransformsMutation = (styles, preserve = false) => {
     }
   }
   if (transformsResult.length > 0) {
-    Object.defineProperty(styles, "transform", {
-      configurable: true,
-      enumerable: true,
-      value: transformsResult
-    });
+    styles.transform = transformsResult;
   }
 };
 
@@ -372,7 +368,7 @@ class Color {
   }
   toRgb = culori.converter("rgb");
   black = "#000000";
-  logger = new _package.Logger("Color");
+  logger = new config.Logger("Color");
   processColor(color) {
     if (typeof color === "string") {
       const parsed = culori.parse(color);
@@ -389,7 +385,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)(
@@ -543,7 +539,7 @@ class CSS {
   constructor(Processor) {
     this.Processor = Processor;
   }
-  logger = new _package.Logger("CSS");
+  logger = new config.Logger("CSS");
   processValue(declarationValue, declarationProperty) {
     const processedValue = this.getProcessedValue(declarationValue, declarationProperty);
     if (typeof processedValue === "string") {
@@ -608,7 +604,7 @@ class CSS {
           this.processValue(filter.value.yOffset),
           this.processValue(filter.value.blur),
           this.processValue(filter.value.color)
-        ].filter(_package.isDefined);
+        ].filter(config.isDefined);
         return `drop-shadow(${parts.join(" ")})`;
       }
       const value = this.processValue(filter.value);
@@ -771,7 +767,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":
@@ -808,7 +804,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":
@@ -841,7 +837,7 @@ class CSS {
           return [
             this.Processor.Color.processColor(declarationValue.color),
             declarationValue.position ? this.processValue(declarationValue.position) : null
-          ].filter(_package.isDefined).join(" ");
+          ].filter(config.isDefined).join(" ");
         case "side":
           return declarationValue.side;
         case "absolute":
@@ -982,7 +978,7 @@ class CSS {
         this.processValue(declarationValue.blur),
         this.processValue(declarationValue.spread),
         this.processValue(declarationValue.color)
-      ].filter(_package.isDefined).join(" ");
+      ].filter(config.isDefined).join(" ");
     }
     if ("blockStart" in declarationValue) {
       const startValue = this.processValue(declarationValue.blockStart);
@@ -1106,7 +1102,7 @@ class Functions {
   constructor(Processor) {
     this.Processor = Processor;
   }
-  logger = new _package.Logger("Functions");
+  logger = new config.Logger("Functions");
   processCalc(calc) {
     switch (calc.type) {
       case "sum": {
@@ -1300,12 +1296,12 @@ class MQ {
     for (const mediaQuery of mediaQueries) {
       const { condition, mediaType } = mediaQuery;
       if ([
-        _package.Platform.Android,
-        _package.Platform.iOS,
-        _package.Platform.Native,
-        _package.Platform.AndroidTV,
-        _package.Platform.AppleTV,
-        _package.Platform.TV
+        config.Platform.Android,
+        config.Platform.iOS,
+        config.Platform.Native,
+        config.Platform.AndroidTV,
+        config.Platform.AppleTV,
+        config.Platform.TV
       ].includes(mediaType)) {
         mq.platform = mediaType;
         continue;
@@ -1630,7 +1626,7 @@ class RN {
       typeof value === "string" ? addMissingSpaces(value) : value
     );
     const joinedStyles = this.joinStyles(rn);
-    return Object.entries(joinedStyles).filter(([, value2]) => _package.isDefined(value2)).map(([prop, val]) => [prop, this.makeResponsive(prop, val)]);
+    return Object.entries(joinedStyles).filter(([, value2]) => config.isDefined(value2)).map(([prop, val]) => [prop, this.makeResponsive(prop, val)]);
   }
   makeResponsive(property, value) {
     const mode = this.Processor.bundlerConfig.polyfills?.responsive;
@@ -1652,10 +1648,10 @@ class RN {
     const isTextMode = mode === true || mode === "text";
     const isComponentMode = mode === true || mode === "components";
     if (isTextMode && (property === "fontSize" || property === "--uniwind-em")) {
-      return `rt.makeResponsive(${value}, ${_package.DEFAULT_SCREEN_HEIGHT}, true)`;
+      return `rt.makeResponsive(${value}, ${config.DEFAULT_SCREEN_HEIGHT}, true)`;
     }
     if (isComponentMode && COMPONENT_RESPONSIVE_PROPS.has(property)) {
-      return `rt.makeResponsive(${value}, ${_package.DEFAULT_SCREEN_WIDTH})`;
+      return `rt.makeResponsive(${value}, ${config.DEFAULT_SCREEN_WIDTH})`;
     }
     return value;
   }
@@ -1769,7 +1765,7 @@ class Units {
   constructor(Processor) {
     this.Processor = Processor;
   }
-  logger = new _package.Logger("Units");
+  logger = new config.Logger("Units");
   processLength(length) {
     if (typeof length === "number") {
       return length;
@@ -1785,7 +1781,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;
@@ -1818,7 +1814,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;
     }
@@ -1906,7 +1902,7 @@ class ProcessorBuilder {
         return this.stylesheets[this.declarationConfig.className]?.at(-1);
       }
       if (mq.platform !== null) {
-        const platformKey = `${_package.UNIWIND_PLATFORM_VARIABLES}${mq.platform}`;
+        const platformKey = `${config.UNIWIND_PLATFORM_VARIABLES}${mq.platform}`;
         this.scopedVars[platformKey] ??= {};
         return this.scopedVars[platformKey];
       }
@@ -1918,7 +1914,7 @@ class ProcessorBuilder {
       if (this.declarationConfig.theme === null) {
         return this.vars;
       }
-      const themeKey = `${_package.UNIWIND_THEME_VARIABLES}${this.declarationConfig.theme}`;
+      const themeKey = `${config.UNIWIND_THEME_VARIABLES}${this.declarationConfig.theme}`;
       this.scopedVars[themeKey] ??= {};
       return this.scopedVars[themeKey];
     })();
@@ -1940,7 +1936,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) {
@@ -2070,12 +2066,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));
@@ -2163,7 +2159,7 @@ const compileNativeCSS = (bundlerConfig, tailwindCSS) => {
   );
   const vars = serializeJSObject(
     Processor.vars,
-    (key, value) => `get "${key}"() { return ${value} }`
+    (key, value) => `"${key}": vars => ${value}`
   );
   const keyframes = serializeJSObject(
     Processor.keyframes,
@@ -2172,11 +2168,11 @@ const compileNativeCSS = (bundlerConfig, tailwindCSS) => {
   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 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} }),`,
@@ -2216,7 +2212,7 @@ const compileWebCSS = (bundlerConfig, tailwindCSS) => {
 
 const compileCSS = async (bundlerConfig) => {
   const tailwindCSS = await compileTailwind(bundlerConfig);
-  if (bundlerConfig.platform === _package.Platform.Web) {
+  if (bundlerConfig.platform === config.Platform.Web) {
     return compileWebCSS(bundlerConfig, tailwindCSS);
   }
   return compileNativeCSS(bundlerConfig, tailwindCSS);
@@ -2234,10 +2230,10 @@ try {
 } catch {
   worker = require("metro-transform-worker");
 }
-const transform = async (config, projectRoot, filePath, data, options) => {
-  const isCss = options.type !== "asset" && path__default.join(process.cwd(), config.uniwind.cssEntryFile) === path__default.join(projectRoot, filePath);
+const transform = async (config$1, projectRoot, filePath, data, options) => {
+  const isCss = options.type !== "asset" && path__default.join(process.cwd(), config$1.uniwind.cssEntryFile) === path__default.join(projectRoot, filePath);
   if (filePath.endsWith("/components/web/metro-injected.js")) {
-    const bundlerConfig2 = _package.UniwindBundlerConfig.fromMetroConfig(config.uniwind, _package.Platform.Web);
+    const bundlerConfig2 = config.UniwindBundlerConfig.fromMetroConfig(config$1.uniwind, config.Platform.Web);
     data = Buffer.from(
       [
         `import { Uniwind } from '${_package.name}';`,
@@ -2247,12 +2243,12 @@ const transform = async (config, projectRoot, filePath, data, options) => {
     );
   }
   if (!isCss) {
-    return worker.transform(config, projectRoot, filePath, data, options);
+    return worker.transform(config$1, projectRoot, filePath, data, options);
   }
-  const bundlerConfig = _package.UniwindBundlerConfig.fromMetroConfig(config.uniwind, options.platform);
+  const bundlerConfig = config.UniwindBundlerConfig.fromMetroConfig(config$1.uniwind, options.platform);
   await bundlerConfig.generateArtifacts(cssArtifactPath);
   const virtualCode = await compileCSS(bundlerConfig);
-  const isWeb = bundlerConfig.platform === _package.Platform.Web;
+  const isWeb = bundlerConfig.platform === config.Platform.Web;
   data = Buffer.from(
     isWeb ? virtualCode : [
       `const { Uniwind } = require('${_package.name}');`,
@@ -2261,7 +2257,7 @@ const transform = async (config, projectRoot, filePath, data, options) => {
     "utf-8"
   );
   const transform2 = await worker.transform(
-    config,
+    config$1,
     projectRoot,
     `${filePath}${isWeb ? "" : ".js"}`,
     data,

package/dist/metro/transformer.mjs

@@ -1,5 +1,6 @@
-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, n as name } from '../shared/uniwind.u-s1XVU8.mjs';
+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 { n as name } from '../shared/uniwind.CFAAUZ2t.mjs';
 import { transform as transform$1 } from 'lightningcss';
 import { converter, parse, formatHex, formatHex8 } from 'culori';
 import { compile } from '@tailwindcss/node';
@@ -28,10 +29,9 @@ const smartSplit = (str, separator = " ") => {
 };
 const addMissingSpaces = (str) => pipe(str)(
   (x) => x.trim(),
-  (x) => x.replace(/([^ {])this/g, "$1 this"),
   (x) => x.replace(/\](?=\d)/g, "] "),
   (x) => x.replace(/\](?=")/g, "] "),
-  (x) => x.replace(/\)(?=\S)/g, ") "),
+  (x) => x.replace(/\)(?=[^\s,])/g, ") "),
   (x) => x.replace(/(?<!^)(?<!\s)"(?=\d)/g, '" ')
 );
 const isValidJSValue = (jsValueString) => {
@@ -48,7 +48,7 @@ const shouldBeSerialized = (value) => {
   }
   return [
     isNumber(value),
-    value.startsWith("this["),
+    value.startsWith("vars["),
     value.startsWith("rt."),
     /[*/+-]/.test(value),
     value.includes('"'),
@@ -175,8 +175,8 @@ const serializeJSObject = (obj, serializer) => {
 };
 
 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);
@@ -228,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;
@@ -351,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;
   }
 };
 
@@ -382,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)(
@@ -764,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":
@@ -801,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":
@@ -1778,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;
@@ -1811,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;
     }
@@ -1933,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) {
@@ -2063,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));
@@ -2156,7 +2152,7 @@ const compileNativeCSS = (bundlerConfig, tailwindCSS) => {
   );
   const vars = serializeJSObject(
     Processor.vars,
-    (key, value) => `get "${key}"() { return ${value} }`
+    (key, value) => `"${key}": vars => ${value}`
   );
   const keyframes = serializeJSObject(
     Processor.keyframes,
@@ -2165,11 +2161,11 @@ const compileNativeCSS = (bundlerConfig, tailwindCSS) => {
   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 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} }),`,

package/dist/module/bundler/artifacts/css/themes.js

@@ -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/bundler/cli/index.d.ts

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

package/dist/module/bundler/cli/index.js

@@ -0,0 +1,81 @@
+#!/usr/bin/env node
+import { UniwindBundlerConfig } from "@/bundler/config";
+import { Logger } from "@/bundler/logger";
+import { fileURLToPath } from "node:url";
+import path from "path";
+const dirname = path.dirname(fileURLToPath(import.meta.url));
+const cssArtifactPath = path.resolve(dirname, "../../uniwind.css");
+const printHelp = () => {
+  console.log([
+    "Usage: uniwind generate-artifacts --css <file> [--theme <name>...] [--dts <file>]",
+    "",
+    "Options:",
+    "  --css <file>      CSS entry file path, e.g. ./global.css",
+    "  --theme <name>    Extra theme name. Can be passed multiple times",
+    "  --dts <file>      Generated TypeScript declarations path",
+    "  --help            Show help"
+  ].join("\n"));
+};
+const readValue = (args, index, flag) => {
+  const value = args[index + 1];
+  if (value === void 0 || value.startsWith("--")) {
+    throw new Error(`Uniwind: ${flag} requires a value`);
+  }
+  return value;
+};
+const parseGenerateArtifactsArgs = (args) => {
+  const parsed = {
+    extraThemes: []
+  };
+  for (let index = 0; index < args.length; index++) {
+    const arg = args[index];
+    switch (arg) {
+      case "--css":
+        parsed.cssEntryFile = readValue(args, index, arg);
+        index++;
+        break;
+      case "--theme":
+        parsed.extraThemes.push(readValue(args, index, arg));
+        index++;
+        break;
+      case "--dts":
+        parsed.dtsFile = readValue(args, index, arg);
+        index++;
+        break;
+      case "--help":
+        printHelp();
+        process.exit(0);
+      default:
+        throw new Error(`Uniwind: Unknown option ${arg}`);
+    }
+  }
+  return parsed;
+};
+const generateArtifacts = async (args) => {
+  const parsed = parseGenerateArtifactsArgs(args);
+  const bundlerConfig = UniwindBundlerConfig.fromCliConfig({
+    cssEntryFile: parsed.cssEntryFile,
+    dtsFile: parsed.dtsFile,
+    extraThemes: parsed.extraThemes
+  });
+  await bundlerConfig.generateArtifacts(cssArtifactPath);
+  Logger.info("Artifacts generated");
+};
+const main = async () => {
+  const [command, ...args] = process.argv.slice(2);
+  if (command === "--help" || command === void 0) {
+    printHelp();
+    return;
+  }
+  switch (command) {
+    case "generate-artifacts":
+      await generateArtifacts(args);
+      break;
+    default:
+      throw new Error(`Uniwind: Unknown command ${command}`);
+  }
+};
+main().catch((error) => {
+  console.error(error instanceof Error ? error.message : error);
+  process.exit(1);
+});

package/dist/module/bundler/config.d.ts

@@ -5,6 +5,7 @@ export declare class UniwindBundlerConfig {
     readonly platform: Platform;
     static fromMetroConfig(config: UniwindMetroConfig, platform?: string | null): UniwindBundlerConfig;
     static fromViteConfig(config: UniwindConfig): UniwindBundlerConfig;
+    static fromCliConfig(config: UniwindConfig): UniwindBundlerConfig;
     constructor(config: UniwindMetroConfig, platform: Platform);
     get cssPath(): any;
     get themes(): any[];

package/dist/module/bundler/config.js

@@ -38,6 +38,14 @@ export class UniwindBundlerConfig {
   static fromViteConfig(config) {
     return new UniwindBundlerConfig(config, Platform.Web);
   }
+  static fromCliConfig(config) {
+    if (typeof config.cssEntryFile === "undefined") {
+      throw new Error(
+        "Uniwind: You need to pass css entry file, e.g. uniwind generate-artifacts --css ./global.css. Run uniwind generate-artifacts --help for usage."
+      );
+    }
+    return new UniwindBundlerConfig(config, Platform.Web);
+  }
   get cssPath() {
     return path.join(process.cwd(), this.config.cssEntryFile);
   }