@niibase/uniwind 1.6.3 → 1.7.0

package/dist/common/bundler/css-processor/mq.js

@@ -0,0 +1,87 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MQ = void 0;
+var _consts = require("@/common/consts");
+class MQ {
+  constructor(Processor) {
+    this.Processor = Processor;
+  }
+  processMediaQueries(mediaQueries) {
+    const mq = this.getInitialMediaQueryResolver();
+    for (const mediaQuery of mediaQueries) {
+      const {
+        condition,
+        mediaType
+      } = mediaQuery;
+      if ([_consts.Platform.Android, _consts.Platform.iOS, _consts.Platform.Native, _consts.Platform.AndroidTV, _consts.Platform.AppleTV, _consts.Platform.TV].includes(mediaType)) {
+        mq.platform = mediaType;
+        continue;
+      }
+      if (condition) this.processCondition(condition, mq);
+    }
+    return mq;
+  }
+  processCondition(condition, mq) {
+    if (condition.type === "operation") {
+      condition.conditions.forEach(nestedCondition => {
+        this.processCondition(nestedCondition, mq);
+      });
+    } else if (condition.type === "feature") {
+      if (condition.value.type === "range") {
+        this.processWidthMediaQuery(condition.value, mq);
+      }
+      if (condition.value.type === "plain") {
+        this.processPlainMediaQuery(condition.value, mq);
+      }
+    }
+  }
+  processWidthMediaQuery(query, mq) {
+    const {
+      operator,
+      value
+    } = query;
+    const result = this.Processor.CSS.processValue(value);
+    if (operator === "greater-than-equal" || operator === "greater-than") {
+      mq.minWidth = result;
+    }
+    if (operator === "less-than-equal" || operator === "less-than") {
+      mq.maxWidth = result;
+    }
+  }
+  processPlainMediaQuery(query, mq) {
+    const {
+      value,
+      name
+    } = query;
+    switch (name) {
+      case "orientation":
+        mq.orientation = value.value;
+        break;
+      case "prefers-color-scheme":
+        mq.colorScheme = value.value;
+        break;
+      default:
+        break;
+    }
+  }
+  getInitialMediaQueryResolver() {
+    return {
+      minWidth: 0,
+      maxWidth: Number.MAX_VALUE,
+      platform: null,
+      rtl: null,
+      important: false,
+      colorScheme: null,
+      orientation: null,
+      theme: null,
+      active: null,
+      focus: null,
+      disabled: null,
+      dataAttributes: null
+    };
+  }
+}
+exports.MQ = MQ;

package/dist/common/bundler/css-processor/processor.js

@@ -0,0 +1,353 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ProcessorBuilder = void 0;
+var _consts = require("@/common/consts");
+var _lightningcss = require("lightningcss");
+var _transforms = require("../../core/native/parsers/transforms");
+var _color = require("./color");
+var _css = require("./css");
+var _functions = require("./functions");
+var _mq = require("./mq");
+var _rn = require("./rn");
+var _units = require("./units");
+var _var = require("./var");
+class ProcessorBuilder {
+  constructor(bundlerConfig) {
+    this.bundlerConfig = bundlerConfig;
+    this.vars["--uniwind-em"] = this.bundlerConfig.polyfills?.rem ?? 16;
+  }
+  stylesheets = {};
+  vars = {};
+  scopedVars = {};
+  keyframes = {};
+  CSS = new _css.CSS(this);
+  RN = new _rn.RN(this);
+  Var = new _var.Var(this);
+  MQ = new _mq.MQ(this);
+  Color = new _color.Color(this);
+  Units = new _units.Units(this);
+  Functions = new _functions.Functions(this);
+  meta = {};
+  varsWithMediaQueries = {};
+  pendingVarReferences = /* @__PURE__ */new Map();
+  declarationConfig = this.getDeclarationConfig();
+  transform(css) {
+    (0, _lightningcss.transform)({
+      filename: "tailwind.css",
+      code: Buffer.from(css),
+      visitor: {
+        StyleSheet: styleSheet => {
+          styleSheet.rules.forEach(rule => {
+            this.declarationConfig = this.getDeclarationConfig();
+            this.parseRuleRec(rule);
+          });
+          for (const [className, [varNames, animated]] of this.pendingVarReferences) {
+            if (animated && varNames.length === 1) {
+              const varName = varNames[0];
+              const varValue = this.vars[varName];
+              const styles = this.stylesheets[className]?.at(-2);
+              this.CSS.processAnimationVar(varValue, styles, v => {
+                this.vars[varName] = v;
+              });
+              continue;
+            }
+            for (const varName of varNames) {
+              const varStyles = this.varsWithMediaQueries[varName];
+              if (!varStyles || varStyles.length === 0) {
+                continue;
+              }
+              for (const varStyle of varStyles) {
+                this.stylesheets[className].push(varStyle);
+              }
+            }
+          }
+        }
+      }
+    });
+  }
+  getDeclarationConfig() {
+    return {
+      className: null,
+      rtl: null,
+      mediaQueries: [],
+      root: false,
+      theme: null,
+      active: null,
+      focus: null,
+      disabled: null,
+      dataAttributes: null
+    };
+  }
+  hasMediaQuery(mq) {
+    return mq.minWidth !== 0 || mq.maxWidth !== Number.MAX_VALUE || mq.orientation !== null || mq.colorScheme !== null;
+  }
+  addDeclaration(declaration, important = false) {
+    const isVar = this.declarationConfig.root || this.declarationConfig.className === null;
+    const mq = this.MQ.processMediaQueries(this.declarationConfig.mediaQueries);
+    const {
+      property,
+      value
+    } = this.parseDeclaration(declaration);
+    const style = (() => {
+      if (!isVar) {
+        return this.stylesheets[this.declarationConfig.className]?.at(-1);
+      }
+      if (mq.platform !== null) {
+        const platformKey = `${_consts.UNIWIND_PLATFORM_VARIABLES}${mq.platform}`;
+        this.scopedVars[platformKey] ??= {};
+        return this.scopedVars[platformKey];
+      }
+      if (this.hasMediaQuery(mq)) {
+        this.varsWithMediaQueries[property] ??= [];
+        this.varsWithMediaQueries[property].push({});
+        return this.varsWithMediaQueries[property].at(-1);
+      }
+      if (this.declarationConfig.theme === null) {
+        return this.vars;
+      }
+      const themeKey = `${_consts.UNIWIND_THEME_VARIABLES}${this.declarationConfig.theme}`;
+      this.scopedVars[themeKey] ??= {};
+      return this.scopedVars[themeKey];
+    })();
+    if (!isVar || this.hasMediaQuery(mq)) {
+      Object.assign(style, mq);
+      style.importantProperties ??= [];
+      style.rtl = this.declarationConfig.rtl;
+      style.theme = mq.colorScheme ?? this.declarationConfig.theme;
+      style.maxWidth = mq.maxWidth;
+      style.minWidth = mq.minWidth;
+      style.orientation = mq.orientation;
+      style.active = this.declarationConfig.active;
+      style.focus = this.declarationConfig.focus;
+      style.disabled = this.declarationConfig.disabled;
+      style.dataAttributes = this.declarationConfig.dataAttributes;
+      this.meta.className = this.declarationConfig.className;
+    }
+    style[property] = value;
+    if (!isVar && important) {
+      style.importantProperties.push(property);
+    }
+    const match = typeof value === "string" ? value.match(/this\[`(.*?)`\]/) : null;
+    if (match && !isVar) {
+      const className = this.declarationConfig.className;
+      if (className === null) {
+        return;
+      }
+      if (!this.pendingVarReferences.has(className)) {
+        this.pendingVarReferences.set(className, [[], property === "animation"]);
+      }
+      const classVars = this.pendingVarReferences.get(className);
+      const varName = match[1];
+      if (!classVars[0].includes(varName)) {
+        classVars[0].push(varName);
+      }
+    }
+  }
+  parseKeyFrames(animationFrames) {
+    const [selectors, styles] = animationFrames;
+    const result = {};
+    for (let i = 0; i < selectors.length; i++) {
+      const selectorString = selectors[i];
+      const styleObj = styles[i];
+      const individualSelectors = typeof selectorString === "string" ? selectorString.split(",").map(s => s.trim()).filter(Boolean) : [selectorString];
+      const resolvedStyles = {};
+      for (const [property, value] of Object.entries(styleObj)) {
+        const resolved = this.RN.cssToRN(property, value);
+        for (const [resolvedProperty, resolvedValue] of resolved) {
+          resolvedStyles[resolvedProperty] = resolvedValue;
+        }
+        if (property === "transform") {
+          (0, _transforms.parseTransformsMutation)(resolvedStyles, true);
+        }
+      }
+      for (const selector of individualSelectors) {
+        if (result[selector] !== void 0) {
+          result[selector] = {
+            ...result[selector],
+            ...resolvedStyles
+          };
+        } else {
+          result[selector] = {
+            ...resolvedStyles
+          };
+        }
+      }
+    }
+    return result;
+  }
+  parseDeclaration(declaration) {
+    const parseValue = (property, value) => {
+      if (property === "animation") {
+        return this.CSS.processAnimation(value);
+      }
+      return this.CSS.processValue(value, property);
+    };
+    if (declaration.property === "unparsed") {
+      const property = declaration.value.propertyId.property;
+      return {
+        property,
+        value: parseValue(property, declaration.value.value)
+      };
+    }
+    if (declaration.property === "custom") {
+      const property = declaration.value.name;
+      return {
+        property,
+        value: parseValue(property, declaration.value.value)
+      };
+    }
+    return {
+      property: declaration.property,
+      value: parseValue(declaration.property, declaration.value)
+    };
+  }
+  parseRuleRec(rule) {
+    if (this.declarationConfig.className !== null) {
+      const lastStyle = this.stylesheets[this.declarationConfig.className]?.at(-1);
+      if (lastStyle !== void 0 && Object.keys(lastStyle).length > 0) {
+        this.stylesheets[this.declarationConfig.className]?.push({});
+      }
+    }
+    if (rule.type === "style") {
+      rule.value.selectors.forEach(selector => {
+        const [maybeClassNameSelector] = selector;
+        const newClassName = maybeClassNameSelector?.type === "class" ? maybeClassNameSelector.name : void 0;
+        if (newClassName !== void 0) {
+          this.declarationConfig.className = newClassName;
+          this.stylesheets[newClassName] ??= [];
+          this.stylesheets[newClassName].push({});
+          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));
+          return;
+        }
+        let rtl = null;
+        let theme = null;
+        let active = null;
+        let focus = null;
+        let disabled = null;
+        let dataAttributes = null;
+        selector.forEach(selector2 => {
+          if (selector2.type === "pseudo-class" && selector2.kind === "where") {
+            selector2.selectors.forEach(selector3 => {
+              selector3.forEach(selector4 => {
+                if (selector4.type === "class" && this.bundlerConfig.themes.includes(selector4.name)) {
+                  theme = selector4.name;
+                }
+                if (selector4.type === "pseudo-class" && selector4.kind === "dir") {
+                  rtl = selector4.direction === "rtl";
+                }
+              });
+            });
+          }
+          if (selector2.type === "pseudo-class" && selector2.kind === "active") {
+            active = true;
+          }
+          if (selector2.type === "pseudo-class" && selector2.kind === "focus") {
+            focus = true;
+          }
+          if (selector2.type === "pseudo-class" && selector2.kind === "disabled") {
+            disabled = true;
+          }
+          if (selector2.type === "attribute" && selector2.operation === null && selector2.name.startsWith("data-")) {
+            dataAttributes ??= {};
+            dataAttributes[selector2.name] = `"true"`;
+          }
+          if (selector2.type === "attribute" && selector2.operation?.operator === "equal" && selector2.name.startsWith("data-")) {
+            dataAttributes ??= {};
+            dataAttributes[selector2.name] = `"${selector2.operation.value}"`;
+          }
+        });
+        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;
+          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));
+          this.declarationConfig.rtl = null;
+          this.declarationConfig.theme = null;
+          this.declarationConfig.active = null;
+          this.declarationConfig.focus = null;
+          this.declarationConfig.disabled = null;
+          this.declarationConfig.dataAttributes = null;
+          return;
+        }
+        selector.forEach(selectorToken => {
+          if (selectorToken.type === "pseudo-class" && selectorToken.kind === "root") {
+            this.declarationConfig.root = true;
+            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));
+          }
+        });
+      });
+      return;
+    }
+    if (rule.type === "supports") {
+      rule.value.rules.forEach(rule2 => this.parseRuleRec(rule2));
+      return;
+    }
+    if (rule.type === "media") {
+      const {
+        mediaQueries
+      } = rule.value.query;
+      this.declarationConfig.mediaQueries.push(...mediaQueries);
+      rule.value.rules.forEach(rule2 => this.parseRuleRec(rule2));
+      this.declarationConfig = this.getDeclarationConfig();
+      return;
+    }
+    if (rule.type === "keyframes") {
+      const keyframes = [[], []];
+      rule.value.keyframes.forEach(keyframe => {
+        const selectors = keyframe.selectors.map(selector => {
+          switch (selector.type) {
+            case "percentage":
+              return keyframe.selectors.length > 0 ? `${selector.value * 100}%` : selector.value;
+            case "from":
+            case "to":
+              return selector.type;
+            case "timeline-range-percentage":
+              return keyframe.selectors.length > 0 ? `${selector.value.percentage}%` : selector.value.percentage;
+            default:
+              return "";
+          }
+        });
+        keyframes[0].push(selectors.join(", "));
+        const keyframeStyle = {};
+        keyframe.declarations.declarations?.forEach(declaration => {
+          if (["custom", "unparsed"].includes(declaration.property)) {
+            const {
+              property,
+              value
+            } = this.parseDeclaration(declaration);
+            keyframeStyle[property] = value;
+          } else {
+            keyframeStyle[declaration.property] = !Array.isArray(declaration.value) || declaration.property.startsWith("animation-") ? this.CSS.processValue(declaration.value) : declaration.value.flatMap(value => this.CSS.processValue(value));
+          }
+        });
+        keyframes[1].push(keyframeStyle);
+      });
+      this.keyframes[rule.value.name.value] = this.parseKeyFrames(keyframes);
+    }
+    if (rule.type === "layer-block") {
+      rule.value.rules.forEach(rule2 => this.parseRuleRec(rule2));
+      return;
+    }
+    if (rule.type === "nested-declarations") {
+      rule.value.declarations.declarations?.forEach(declaration => this.addDeclaration(declaration));
+      rule.value.declarations.importantDeclarations?.forEach(declaration => this.addDeclaration(declaration, true));
+      return;
+    }
+    if (rule.type === "property" && rule.value.initialValue) {
+      this.vars[rule.value.name] = this.CSS.processValue(rule.value.initialValue);
+    }
+  }
+}
+exports.ProcessorBuilder = ProcessorBuilder;