@niibase/uniwind 1.6.3 → 1.7.0

package/dist/module/bundler/css-compiler/compileNativeCSS.js

@@ -0,0 +1,33 @@
+import { addMetaToStylesTemplate, ProcessorBuilder, serializeJSObject } from "../css-processor/index.js";
+export const compileNativeCSS = (bundlerConfig, tailwindCSS) => {
+  const Processor = new ProcessorBuilder(bundlerConfig);
+  Processor.transform(tailwindCSS);
+  const stylesheet = serializeJSObject(
+    addMetaToStylesTemplate(Processor, bundlerConfig.platform),
+    (key, value) => `"${key}": ${value}`
+  );
+  const vars = serializeJSObject(
+    Processor.vars,
+    (key, value) => `get "${key}"() { return ${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} }`)
+    ])
+  );
+  const serializedScopedVars = Object.entries(scopedVars).map(([scopedVarsName, scopedVars2]) => `"${scopedVarsName}": ({ ${scopedVars2} }),`).join("");
+  const currentColorVar = `get currentColor() { return rt.colorScheme === 'dark' ? '#ffffff' : '#000000' },`;
+  return [
+    "({",
+    `scopedVars: ({ ${serializedScopedVars} }),`,
+    `vars: ({ ${currentColorVar} ${vars} }),`,
+    `stylesheet: ({ ${stylesheet} }),`,
+    `keyframes: ({ ${keyframes} }),`,
+    "})"
+  ].join("");
+};

package/dist/module/bundler/css-compiler/compileTailwind.d.ts

@@ -0,0 +1,2 @@
+import type { UniwindBundlerConfig } from '../config';
+export declare const compileTailwind: (bundlerConfig: UniwindBundlerConfig) => Promise<any>;

package/dist/module/bundler/css-compiler/compileTailwind.js

@@ -0,0 +1,22 @@
+import { compile } from "@tailwindcss/node";
+import { Scanner } from "@tailwindcss/oxide";
+import fs from "fs";
+import path from "path";
+export 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());
+};

package/dist/module/bundler/css-compiler/compileWebCSS.d.ts

@@ -0,0 +1,2 @@
+import type { UniwindBundlerConfig } from '../config';
+export declare const compileWebCSS: (bundlerConfig: UniwindBundlerConfig, tailwindCSS: string) => string;

package/dist/module/bundler/css-compiler/compileWebCSS.js

@@ -0,0 +1,8 @@
+import { transform } from "lightningcss";
+export const compileWebCSS = (bundlerConfig, tailwindCSS) => {
+  return transform({
+    code: Buffer.from(tailwindCSS),
+    filename: "uniwind.css",
+    visitor: bundlerConfig.cssVisitor
+  }).code.toString();
+};

package/dist/module/bundler/css-compiler/index.d.ts

@@ -0,0 +1 @@
+export * from './compileCSS';

package/dist/module/bundler/css-compiler/index.js

@@ -0,0 +1 @@
+export * from "./compileCSS.js";

package/dist/module/bundler/css-processor/addMetaToStylesTemplate.d.ts

@@ -0,0 +1,3 @@
+import { Platform } from '@/common/consts';
+import type { ProcessorBuilder } from './processor';
+export declare const addMetaToStylesTemplate: (Processor: ProcessorBuilder, currentPlatform: Platform) => Record<string, any>;

package/dist/module/bundler/css-processor/addMetaToStylesTemplate.js

@@ -0,0 +1,136 @@
+import { Platform, StyleDependency } from "@/common/consts";
+import { isDefined } from "@/common/utils";
+import { serialize } from "./serialize.js";
+import { toCamelCase } from "./utils.js";
+const extractVarsFromString = (value) => {
+  const thisIndexes = [...value.matchAll(/this\[/g)].map((m) => m.index);
+  return thisIndexes.map((index) => {
+    const afterIndex = value.slice(index + 5);
+    const closingIndex = afterIndex.indexOf("]");
+    const varName = afterIndex.slice(0, closingIndex);
+    return varName.replace(/[`"\\]/g, "");
+  });
+};
+const makeSafeForSerialization = (value) => {
+  if (value === null) {
+    return null;
+  }
+  if (typeof value === "string") {
+    return `"${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);
+  });
+};
+export const addMetaToStylesTemplate = (Processor, currentPlatform) => {
+  const stylesheetsEntries = Object.entries(Processor.stylesheets).map(([className, stylesPerMediaQuery]) => {
+    const styles = stylesPerMediaQuery.map((style, index) => {
+      const {
+        platform,
+        rtl,
+        theme,
+        orientation,
+        minWidth,
+        maxWidth,
+        colorScheme,
+        important: _,
+        importantProperties,
+        active,
+        focus,
+        disabled,
+        dataAttributes,
+        ...rest
+      } = style;
+      const entries = Object.entries(rest).flatMap(([property, value]) => Processor.RN.cssToRN(property, value)).map(([property, value]) => [`"${property}"`, `function() { return ${serialize(value)} }`]);
+      if (platform) {
+        const isTV = currentPlatform === Platform.AndroidTV || currentPlatform === Platform.AppleTV;
+        const commonPlatform = isTV ? Platform.TV : Platform.Native;
+        if (platform !== commonPlatform && platform !== currentPlatform) {
+          return null;
+        }
+      }
+      if (entries.length === 0) {
+        return null;
+      }
+      const dependencies = [];
+      const stringifiedEntries = JSON.stringify(entries);
+      const usedVars = extractVarsFromString(stringifiedEntries);
+      const isUsingThemedVar = usedVars.some((usedVarName) => hasThemedVarDependency(usedVarName, Processor));
+      if (usedVars.length > 0) {
+        dependencies.push(StyleDependency.Variables);
+      }
+      if (theme !== null || isUsingThemedVar || stringifiedEntries.includes("rt.lightDark")) {
+        dependencies.push(StyleDependency.Theme);
+      }
+      if (orientation !== null) {
+        dependencies.push(StyleDependency.Orientation);
+      }
+      if (rtl !== null) {
+        dependencies.push(StyleDependency.Rtl);
+      }
+      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")) {
+        dependencies.push(StyleDependency.Insets);
+      }
+      if (stringifiedEntries.includes("rt.fontScale")) {
+        dependencies.push(StyleDependency.FontScale);
+      }
+      return {
+        entries,
+        minWidth,
+        maxWidth,
+        theme: makeSafeForSerialization(theme),
+        orientation: makeSafeForSerialization(orientation),
+        rtl,
+        colorScheme: makeSafeForSerialization(colorScheme),
+        native: platform !== null,
+        dependencies: dependencies.length > 0 ? dependencies : null,
+        index,
+        className: makeSafeForSerialization(className),
+        active,
+        focus,
+        disabled,
+        importantProperties: importantProperties?.map((property) => property.startsWith("--") ? property : toCamelCase(property)).map(makeSafeForSerialization) ?? [],
+        dataAttributes,
+        complexity: [
+          minWidth !== 0,
+          theme !== null,
+          orientation !== null,
+          rtl !== null,
+          platform !== null,
+          active !== null,
+          focus !== null,
+          disabled !== null,
+          dataAttributes !== null
+        ].filter(Boolean).length
+      };
+    });
+    const filteredStyles = styles.filter(isDefined);
+    if (filteredStyles.length === 0) {
+      return null;
+    }
+    return [
+      className,
+      filteredStyles
+    ];
+  }).filter(isDefined);
+  const stylesheets = Object.fromEntries(stylesheetsEntries);
+  return stylesheets;
+};

package/dist/module/bundler/css-processor/animation.d.ts

@@ -0,0 +1,6 @@
+import type { TokenOrValue } from 'lightningcss';
+import type { DeclarationValues } from './types';
+type GetProcessedValue = (value: DeclarationValues) => any;
+export declare const getProcessedVarAnimation: (declarationValue: string, styles: Record<string, any>, updateVar: (value: string) => void) => void;
+export declare const getProcessedAnimation: (declarationValue: Array<TokenOrValue>, getProcessedValue: GetProcessedValue) => any;
+export {};

package/dist/module/bundler/css-processor/animation.js

@@ -0,0 +1,112 @@
+import { toCamelCase } from "./utils.js";
+const STATIC_TIMING_FUNCTIONS = /* @__PURE__ */ new Set([
+  "linear",
+  "ease",
+  "ease-in",
+  "ease-out",
+  "ease-in-out",
+  "step-start",
+  "step-end"
+]);
+const DIRECTION_VALUES = /* @__PURE__ */ new Set(["normal", "reverse", "alternate", "alternate-reverse"]);
+const FILL_MODE_VALUES = /* @__PURE__ */ new Set(["none", "forwards", "backwards", "both"]);
+const PLAY_STATE_VALUES = /* @__PURE__ */ new Set(["running", "paused"]);
+const isTimeString = (x) => {
+  if (typeof x === "number") return true;
+  return typeof x === "string" && /^-?\d*(?:\.\d+)?(?:e[+-]?\d+)?(ms|s)$/.test(x.trim());
+};
+const isTimingFunctionCustom = (x) => {
+  if (typeof x !== "string") return false;
+  return x.startsWith("rt.cubicBezier(") || x.startsWith("rt.steps(") || x.startsWith("rt.linear(");
+};
+export const getProcessedVarAnimation = (declarationValue, styles, updateVar) => {
+  const tokens = declarationValue.replace(/\)/g, ") ").split(" ");
+  let duration = false;
+  for (const unprocessedToken of tokens) {
+    const token = unprocessedToken.replace(/^"|"$/g, "");
+    if (isTimeString(token) && !duration) {
+      styles["animation-duration"] = unprocessedToken;
+      duration = true;
+    } else if (isTimeString(token) && duration) {
+      styles["animation-delay"] = unprocessedToken;
+    } else if (STATIC_TIMING_FUNCTIONS.has(token)) {
+      styles["animation-timing-function"] = unprocessedToken;
+    } else if (isTimingFunctionCustom(token)) {
+      styles["animation-timing-function"] = unprocessedToken;
+    } else if (token === "infinite" || /^\d+$/.test(token)) {
+      styles["animation-iteration-count"] = unprocessedToken;
+    } else if (DIRECTION_VALUES.has(token)) {
+      styles["animation-direction"] = unprocessedToken;
+    } else if (FILL_MODE_VALUES.has(token)) {
+      styles["animation-fill-mode"] = unprocessedToken;
+    } else if (PLAY_STATE_VALUES.has(token)) {
+      styles["animation-play-state"] = unprocessedToken;
+    } else {
+      updateVar(`"${token}"`);
+    }
+  }
+};
+const parseValues = (tokens, getProcessedValue) => {
+  const groups = [];
+  let group = [];
+  for (const token of tokens) {
+    if (token.type === "token" && token.value.type === "delim" && token.value.value === "|") {
+      if (group.length > 0) {
+        groups.push(group);
+        group = [];
+      }
+      continue;
+    }
+    group.push(token);
+  }
+  if (group.length > 0) {
+    groups.push(group);
+  }
+  const values = groups.map((groupTokens) => tokensToText(groupTokens, getProcessedValue));
+  return values.length > 1 ? values : values[0];
+};
+const tokensToText = (tokens, getProcessedValue) => {
+  return tokens.map((token) => {
+    const value = getProcessedValue(token);
+    if (typeof value === "string") {
+      return /^"[^"]+"$/.test(value) ? value : `"${value}"`;
+    }
+    return value;
+  }).join(" ").trim();
+};
+export const getProcessedAnimation = (declarationValue, getProcessedValue) => {
+  const segments = [];
+  const result = [];
+  let current = [];
+  for (const token of declarationValue) {
+    if (token.type === "var") {
+      return getProcessedValue(token);
+    }
+    if (token.type === "token" && token.value.type === "comma") {
+      if (current.length > 0) {
+        segments.push(current);
+        current = [];
+      }
+      continue;
+    }
+    current.push(token);
+  }
+  if (current.length > 0) {
+    segments.push(current);
+  }
+  for (const segment of segments) {
+    const colonIndex = segment.findIndex((token) => token.type === "token" && token.value.type === "colon");
+    if (colonIndex === -1) {
+      const nameValue = parseValues(segment, getProcessedValue);
+      result.push(["name", Array.isArray(nameValue) ? nameValue : [nameValue]]);
+      continue;
+    }
+    const keyTokens = segment.slice(0, colonIndex);
+    const valueTokens = segment.slice(colonIndex + 1);
+    const rawKey = tokensToText(keyTokens, getProcessedValue);
+    const value = parseValues(valueTokens, getProcessedValue);
+    const key = toCamelCase(rawKey);
+    result.push([key, value]);
+  }
+  return result;
+};

package/dist/module/bundler/css-processor/color.d.ts

@@ -0,0 +1,12 @@
+import type { CssColor, UnresolvedColor } from 'lightningcss';
+import type { ProcessorBuilder } from './processor';
+export declare class Color {
+    private readonly Processor;
+    private toRgb;
+    private readonly black;
+    private readonly logger;
+    constructor(Processor: ProcessorBuilder);
+    processColor(color: CssColor | UnresolvedColor): string;
+    isColor(value: unknown): value is CssColor;
+    private format;
+}

package/dist/module/bundler/css-processor/color.js

@@ -0,0 +1,63 @@
+import { converter, formatHex, formatHex8, parse } from "culori";
+import { Logger } from "../logger.js";
+import { pipe } from "./utils.js";
+export class Color {
+  constructor(Processor) {
+    this.Processor = Processor;
+  }
+  toRgb = converter("rgb");
+  black = "#000000";
+  logger = new Logger("Color");
+  processColor(color) {
+    if (typeof color === "string") {
+      const parsed = parse(color);
+      if (parsed === void 0) {
+        const colorFunction = color.match(/^([a-zA-Z_$][a-zA-Z0-9_$]*)\s*\(/)?.[1];
+        if (colorFunction === void 0) {
+          this.logger.error(`Failed to convert color ${color}`);
+          return this.black;
+        }
+        const colorValue = color.replace(colorFunction, "").slice(1, -1);
+        return `rt.parseColor("${colorFunction}", ${colorValue})`;
+      }
+      return this.format(parsed);
+    }
+    try {
+      if (color.type === "currentcolor") {
+        return 'this["currentColor"]';
+      }
+      if (color.type === "rgb" || color.type === "srgb") {
+        const alpha = typeof color.alpha === "number" ? color.alpha : pipe(color.alpha)(
+          (x) => this.Processor.CSS.processValue(x),
+          Number,
+          (x) => isNaN(x) ? 1 : x
+        );
+        return this.format({
+          r: color.r / 255,
+          g: color.g / 255,
+          b: color.b / 255,
+          alpha,
+          mode: "rgb"
+        });
+      }
+      const colorType = color.type === "display-p3" ? "p3" : color.type;
+      const result = this.toRgb({
+        mode: colorType,
+        ...color
+      });
+      return this.format(result);
+    } catch {
+      this.logger.error(`Failed to convert color ${JSON.stringify(color)}`);
+      return this.black;
+    }
+  }
+  isColor(value) {
+    return typeof value === "string" && parse(value) !== void 0;
+  }
+  format(color) {
+    if (color.alpha === 1 || color.alpha === void 0) {
+      return formatHex(color);
+    }
+    return formatHex8(color);
+  }
+}

package/dist/module/bundler/css-processor/css.d.ts

@@ -0,0 +1,23 @@
+import type { Animation, TokenOrValue } from 'lightningcss';
+import type { ProcessorBuilder } from './processor';
+import type { DeclarationProperty, DeclarationValues } from './types';
+export declare class CSS {
+    private readonly Processor;
+    private readonly logger;
+    constructor(Processor: ProcessorBuilder);
+    processValue(declarationValue: DeclarationValues, declarationProperty?: DeclarationProperty): any;
+    processAnimation(declarationValue: Array<TokenOrValue | Animation>): any;
+    processAnimationVar(declarationValue: string, styles: Record<string, string>, updateVar: (value: string) => void): void;
+    private processFilters;
+    private getProcessedValue;
+    private static readonly TRANSFORM_TYPES;
+    private isTransformArray;
+    private isOverflow;
+    /**
+     * Between some tokens there isn't a comma but it should be.
+     * For example this applies to Array of shadows
+     */
+    private addComaBetweenTokens;
+    private logUnsupported;
+    private makeSafeForSerialization;
+}