@webstudio-is/css-engine 0.0.0-017f1bd

package/lib/index.js

@@ -0,0 +1,988 @@
+// src/core/prefixer.ts
+var prefixStyles = (styleMap) => {
+  const newStyleMap = /* @__PURE__ */ new Map();
+  for (const [property, value] of styleMap) {
+    if (property === "background-clip") {
+      newStyleMap.set("-webkit-background-clip", value);
+    }
+    if (property === "user-select") {
+      newStyleMap.set("-webkit-user-select", value);
+    }
+    if (property === "text-size-adjust") {
+      newStyleMap.set("-webkit-text-size-adjust", value);
+    }
+    if (property === "backdrop-filter") {
+      newStyleMap.set("-webkit-backdrop-filter", value);
+    }
+    if (property === "view-timeline-name" || property === "scroll-timeline-name" || property === "view-timeline-inset") {
+      newStyleMap.set(`--${property}`, value);
+    }
+    newStyleMap.set(property, value);
+  }
+  return newStyleMap;
+};
+
+// src/schema.ts
+import { z } from "zod";
+
+// src/core/to-value.ts
+import { DEFAULT_FONT_FALLBACK, SYSTEM_FONTS } from "@webstudio-is/fonts";
+var fallbackTransform = (styleValue) => {
+  if (styleValue.type !== "fontFamily") {
+    return;
+  }
+  let { value } = styleValue;
+  if (value.length === 0) {
+    value = [DEFAULT_FONT_FALLBACK];
+  }
+  if (value.length === 1) {
+    const stack = SYSTEM_FONTS.get(value[0])?.stack;
+    value = stack ?? [value[0], DEFAULT_FONT_FALLBACK];
+  }
+  return {
+    type: "fontFamily",
+    value: Array.from(new Set(value))
+  };
+};
+var sanitizeCssUrl = (str) => JSON.stringify(str);
+var toValue = (styleValue, transformValue) => {
+  if (styleValue === void 0) {
+    return "";
+  }
+  const transformedValue = transformValue?.(styleValue) ?? fallbackTransform(styleValue);
+  const value = transformedValue ?? styleValue;
+  if (value.type === "unit") {
+    return value.value + (value.unit === "number" ? "" : value.unit);
+  }
+  if (value.type === "fontFamily") {
+    const families = [];
+    for (const family of value.value) {
+      families.push(family.includes(" ") ? `"${family}"` : family);
+    }
+    return families.join(", ");
+  }
+  if (value.type === "var") {
+    if (value.hidden) {
+      return "";
+    }
+    let fallbacksString = "";
+    if (value.fallback) {
+      fallbacksString = `, ${toValue(value.fallback, transformValue)}`;
+    }
+    return `var(--${value.value}${fallbacksString})`;
+  }
+  if (value.type === "keyword") {
+    if (value.hidden === true) {
+      return "";
+    }
+    return value.value;
+  }
+  if (value.type === "invalid") {
+    return value.value;
+  }
+  if (value.type === "unset") {
+    return value.value;
+  }
+  if (value.type === "rgb") {
+    return `rgba(${value.r}, ${value.g}, ${value.b}, ${value.alpha})`;
+  }
+  if (value.type === "image") {
+    if (value.hidden || value.value.type !== "url") {
+      return "none";
+    }
+    return `url(${sanitizeCssUrl(value.value.url)})`;
+  }
+  if (value.type === "unparsed") {
+    if (value.hidden === true) {
+      return "none";
+    }
+    return value.value;
+  }
+  if (value.type === "layers") {
+    const valueString = value.value.filter((layer) => layer.hidden !== true).map((layer) => toValue(layer, transformValue)).join(", ");
+    return valueString === "" ? "none" : valueString;
+  }
+  if (value.type === "tuple") {
+    if (value.hidden === true) {
+      return "none";
+    }
+    return value.value.filter((value2) => value2.hidden !== true).map((value2) => toValue(value2, transformValue)).join(" ");
+  }
+  if (value.type === "shadow") {
+    let shadow = `${toValue(value.offsetX)} ${toValue(value.offsetY)}`;
+    if (value.blur) {
+      shadow += ` ${toValue(value.blur)}`;
+    }
+    if (value.spread) {
+      shadow += ` ${toValue(value.spread)}`;
+    }
+    if (value.color) {
+      shadow += ` ${toValue(value.color)}`;
+    }
+    if (value.position === "inset") {
+      shadow += ` inset`;
+    }
+    return shadow;
+  }
+  if (value.type === "function") {
+    if (value.hidden === true) {
+      return "";
+    }
+    return `${value.name}(${toValue(value.args, transformValue)})`;
+  }
+  if (value.type === "guaranteedInvalid") {
+    return "";
+  }
+  value;
+  return "";
+};
+
+// src/schema.ts
+var Unit = z.string();
+var UnitValue = z.object({
+  type: z.literal("unit"),
+  unit: Unit,
+  value: z.number(),
+  hidden: z.boolean().optional()
+});
+var KeywordValue = z.object({
+  type: z.literal("keyword"),
+  // @todo use exact type
+  value: z.string(),
+  hidden: z.boolean().optional()
+});
+var UnparsedValue = z.object({
+  type: z.literal("unparsed"),
+  value: z.string(),
+  // For the builder we want to be able to hide background-image
+  hidden: z.boolean().optional()
+});
+var FontFamilyValue = z.object({
+  type: z.literal("fontFamily"),
+  value: z.array(z.string()),
+  hidden: z.boolean().optional()
+});
+var RgbValue = z.object({
+  type: z.literal("rgb"),
+  r: z.number(),
+  g: z.number(),
+  b: z.number(),
+  alpha: z.number(),
+  hidden: z.boolean().optional()
+});
+var FunctionValue = z.object({
+  type: z.literal("function"),
+  name: z.string(),
+  args: z.lazy(() => StyleValue),
+  hidden: z.boolean().optional()
+});
+var ImageValue = z.object({
+  type: z.literal("image"),
+  value: z.union([
+    z.object({ type: z.literal("asset"), value: z.string() }),
+    // url is not stored in db and only used by css-engine transformValue
+    // to prepare image value for rendering
+    z.object({ type: z.literal("url"), url: z.string() })
+  ]),
+  // For the builder we want to be able to hide images
+  hidden: z.boolean().optional()
+});
+var GuaranteedInvalidValue = z.object({
+  type: z.literal("guaranteedInvalid"),
+  hidden: z.boolean().optional()
+});
+var InvalidValue = z.object({
+  type: z.literal("invalid"),
+  value: z.string(),
+  hidden: z.boolean().optional()
+});
+var UnsetValue = z.object({
+  type: z.literal("unset"),
+  value: z.literal(""),
+  hidden: z.boolean().optional()
+});
+var VarFallback = z.union([
+  UnparsedValue,
+  KeywordValue,
+  UnitValue,
+  RgbValue
+]);
+var toVarFallback = (styleValue, transformValue) => {
+  if (styleValue.type === "unparsed" || styleValue.type === "keyword" || styleValue.type === "unit" || styleValue.type === "rgb") {
+    return styleValue;
+  }
+  styleValue;
+  return { type: "unparsed", value: toValue(styleValue, transformValue) };
+};
+var VarValue = z.object({
+  type: z.literal("var"),
+  value: z.string(),
+  fallback: VarFallback.optional(),
+  hidden: z.boolean().optional()
+});
+var TupleValueItem = z.union([
+  UnitValue,
+  KeywordValue,
+  UnparsedValue,
+  ImageValue,
+  RgbValue,
+  FunctionValue,
+  VarValue
+]);
+var TupleValue = z.object({
+  type: z.literal("tuple"),
+  value: z.array(TupleValueItem),
+  hidden: z.boolean().optional()
+});
+var ShadowValue = z.object({
+  type: z.literal("shadow"),
+  hidden: z.boolean().optional(),
+  position: z.union([z.literal("inset"), z.literal("outset")]),
+  offsetX: z.union([UnitValue, VarValue]),
+  offsetY: z.union([UnitValue, VarValue]),
+  blur: z.union([UnitValue, VarValue]).optional(),
+  spread: z.union([UnitValue, VarValue]).optional(),
+  color: z.union([RgbValue, KeywordValue, VarValue]).optional()
+});
+var LayerValueItem = z.union([
+  UnitValue,
+  KeywordValue,
+  UnparsedValue,
+  ImageValue,
+  TupleValue,
+  ShadowValue,
+  RgbValue,
+  InvalidValue,
+  FunctionValue,
+  VarValue
+]);
+var LayersValue = z.object({
+  type: z.literal("layers"),
+  value: z.array(LayerValueItem),
+  hidden: z.boolean().optional()
+});
+var StyleValue = z.union([
+  ImageValue,
+  LayersValue,
+  UnitValue,
+  KeywordValue,
+  FontFamilyValue,
+  RgbValue,
+  UnparsedValue,
+  TupleValue,
+  FunctionValue,
+  GuaranteedInvalidValue,
+  InvalidValue,
+  UnsetValue,
+  VarValue,
+  ShadowValue
+]);
+
+// src/css.ts
+var cssWideKeywords = /* @__PURE__ */ new Set([
+  "initial",
+  "inherit",
+  "unset",
+  "revert",
+  "revert-layer"
+]);
+
+// src/core/merger.ts
+var isLonghandValue = (value) => {
+  if (value === void 0) {
+    return false;
+  }
+  if (value.type === "keyword" && cssWideKeywords.has(value.value)) {
+    return false;
+  }
+  if (value.type === "var") {
+    const fallback = value.fallback;
+    if (fallback?.type === "keyword" && cssWideKeywords.has(fallback.value)) {
+      return false;
+    }
+  }
+  return true;
+};
+var mergeBorder = (styleMap, base) => {
+  const width = styleMap.get(`${base}-width`);
+  const style = styleMap.get(`${base}-style`);
+  const color = styleMap.get(`${base}-color`);
+  if (isLonghandValue(width) && isLonghandValue(style) && isLonghandValue(color)) {
+    styleMap.delete(`${base}-width`);
+    styleMap.delete(`${base}-style`);
+    styleMap.delete(`${base}-color`);
+    styleMap.set(base, { type: "tuple", value: [width, style, color] });
+  }
+};
+var mergeBox = (styleMap, base) => {
+  const topValue = styleMap.get(`${base}-top`);
+  const top = toValue(topValue);
+  const right = toValue(styleMap.get(`${base}-right`));
+  const bottom = toValue(styleMap.get(`${base}-bottom`));
+  const left = toValue(styleMap.get(`${base}-left`));
+  if (isLonghandValue(topValue) && top === right && top === bottom && top === left) {
+    styleMap.delete(`${base}-top`);
+    styleMap.delete(`${base}-right`);
+    styleMap.delete(`${base}-bottom`);
+    styleMap.delete(`${base}-left`);
+    styleMap.set(base, topValue);
+  }
+};
+var mergeWhiteSpaceAndTextWrap = (styleMap) => {
+  const collapseValue = styleMap.get("white-space-collapse");
+  const collapse = toValue(collapseValue);
+  const modeValue = styleMap.get("text-wrap-mode");
+  const mode = toValue(modeValue);
+  const styleValue = styleMap.get("text-wrap-style");
+  const style = toValue(styleValue);
+  styleMap.delete("text-wrap-mode");
+  styleMap.delete("text-wrap-style");
+  if (collapse === "collapse" || collapse === "initial" || mode === "wrap" || mode === "initial") {
+    styleMap.set("white-space", { type: "keyword", value: "normal" });
+  }
+  if (mode === "nowrap") {
+    styleMap.set("white-space", { type: "keyword", value: "nowrap" });
+  }
+  if (collapse === "preserve") {
+    if (mode === "nowrap") {
+      styleMap.set("white-space", { type: "keyword", value: "pre" });
+    } else {
+      styleMap.set("white-space", { type: "keyword", value: "pre-wrap" });
+    }
+  }
+  if (collapse === "preserve-breaks") {
+    styleMap.set("white-space", { type: "keyword", value: "pre-line" });
+  }
+  if (collapse === "break-spaces") {
+    styleMap.set("white-space", { type: "keyword", value: "break-spaces" });
+  }
+  if (style === "auto") {
+    styleMap.set("text-wrap", modeValue ?? { type: "keyword", value: "wrap" });
+  }
+  if (style === "balance" || style === "stable" || style === "pretty") {
+    styleMap.set("text-wrap", { type: "keyword", value: style });
+  }
+  const textWrap = (styleValue?.type !== "keyword" ? styleValue : void 0) ?? (modeValue?.type !== "keyword" ? modeValue : void 0);
+  if (textWrap) {
+    styleMap.set("text-wrap", textWrap);
+  }
+  if (collapseValue) {
+    styleMap.delete("white-space-collapse");
+    styleMap.set("white-space-collapse", collapseValue);
+  }
+};
+var mergeBackgroundPosition = (styleMap) => {
+  const x = styleMap.get("background-position-x");
+  const y = styleMap.get("background-position-y");
+  if (x?.type === "layers" && y?.type === "layers" && x.value.length === y.value.length) {
+    const position = x.value.map((xValue, index) => {
+      const yValue = y.value[index];
+      return {
+        type: "tuple",
+        value: [xValue, yValue]
+      };
+    });
+    styleMap.delete("background-position-x");
+    styleMap.delete("background-position-y");
+    styleMap.set("background-position", {
+      type: "layers",
+      value: position
+    });
+  }
+};
+var mergeStyles = (styleMap) => {
+  const newStyle = new Map(styleMap);
+  mergeBorder(newStyle, "border-top");
+  mergeBorder(newStyle, "border-right");
+  mergeBorder(newStyle, "border-bottom");
+  mergeBorder(newStyle, "border-left");
+  mergeBorder(newStyle, "border");
+  mergeBorder(newStyle, "outline");
+  mergeBox(newStyle, "border");
+  mergeBox(newStyle, "margin");
+  mergeBox(newStyle, "padding");
+  mergeWhiteSpaceAndTextWrap(newStyle);
+  mergeBackgroundPosition(newStyle);
+  return newStyle;
+};
+
+// src/core/to-property.ts
+var hyphenateProperty = (property) => property.replace(
+  /[A-Z]/g,
+  (match) => "-" + match.toLowerCase()
+);
+
+// src/core/rules.ts
+var mapGroupBy = (array, getKey) => {
+  const groups = /* @__PURE__ */ new Map();
+  for (const item of array) {
+    const key = getKey(item);
+    let group = groups.get(key);
+    if (group === void 0) {
+      group = [];
+      groups.set(key, group);
+    }
+    group.push(item);
+  }
+  return groups;
+};
+var mergeDeclarations = (declarations) => {
+  const newDeclarations = [];
+  const groups = mapGroupBy(
+    declarations,
+    (declaration) => declaration.breakpoint + declaration.selector
+  );
+  for (const groupDeclarations of groups.values()) {
+    const { breakpoint, selector } = groupDeclarations[0];
+    const merged = mergeStyles(
+      new Map(
+        groupDeclarations.map((item) => [item.property, item.value])
+      )
+    );
+    for (const [property, value] of merged) {
+      newDeclarations.push({
+        breakpoint,
+        selector,
+        property,
+        value
+      });
+    }
+  }
+  return newDeclarations;
+};
+var generateStyleMap = (style, {
+  indent = 0,
+  transformValue
+} = {}) => {
+  const spaces = " ".repeat(indent);
+  let lines = "";
+  for (const [property, value] of style) {
+    const propertyString = hyphenateProperty(property);
+    const valueString = toValue(value, transformValue);
+    const line = `${spaces}${propertyString}: ${valueString}`;
+    lines += lines === "" ? line : `;
+${line}`;
+  }
+  return lines;
+};
+var normalizeDeclaration = (declaration) => ({
+  ...declaration,
+  property: hyphenateProperty(declaration.property)
+});
+var getDeclarationKey = (declaraionKey) => {
+  const { breakpoint, selector, property } = declaraionKey;
+  return `${breakpoint}:${selector}:${property}`;
+};
+var MixinRule = class {
+  // use map to avoid duplicated properties
+  #declarations = /* @__PURE__ */ new Map();
+  #dirtyBreakpoints = /* @__PURE__ */ new Set();
+  /*
+   * check if breakpoint was updated
+   */
+  isDirtyBreakpoint(breakpoint) {
+    return this.#dirtyBreakpoints.has(breakpoint);
+  }
+  /**
+   * reset breakpoints invalidation
+   */
+  clearBreakpoints() {
+    this.#dirtyBreakpoints.clear();
+  }
+  setDeclaration(declaration) {
+    declaration = normalizeDeclaration(declaration);
+    this.#declarations.set(getDeclarationKey(declaration), declaration);
+    this.#dirtyBreakpoints.add(declaration.breakpoint);
+  }
+  deleteDeclaration(declaration) {
+    declaration = normalizeDeclaration(declaration);
+    this.#declarations.delete(getDeclarationKey(declaration));
+    this.#dirtyBreakpoints.add(declaration.breakpoint);
+  }
+  getDeclarations() {
+    return this.#declarations.values();
+  }
+};
+var NestingRule = class {
+  #selector;
+  #descendantSuffix;
+  #mixinRules = /* @__PURE__ */ new Map();
+  #mixins = /* @__PURE__ */ new Set();
+  // use map to avoid duplicated properties
+  #declarations = /* @__PURE__ */ new Map();
+  // cached generated rule by breakpoint
+  #cache = /* @__PURE__ */ new Map();
+  constructor(mixinRules, selector, descendantSuffix) {
+    this.#selector = selector;
+    this.#descendantSuffix = descendantSuffix;
+    this.#mixinRules = mixinRules;
+  }
+  getSelector() {
+    return this.#selector;
+  }
+  setSelector(selector) {
+    this.#selector = selector;
+    this.#cache.clear();
+  }
+  getDescendantSuffix() {
+    return this.#descendantSuffix;
+  }
+  addMixin(mixin) {
+    this.#mixins.add(mixin);
+    this.#cache.clear();
+  }
+  applyMixins(mixins) {
+    this.#mixins = new Set(mixins);
+    this.#cache.clear();
+  }
+  setDeclaration(declaration) {
+    declaration = normalizeDeclaration(declaration);
+    this.#declarations.set(getDeclarationKey(declaration), declaration);
+    this.#cache.delete(declaration.breakpoint);
+  }
+  deleteDeclaration(declaration) {
+    declaration = normalizeDeclaration(declaration);
+    this.#declarations.delete(getDeclarationKey(declaration));
+    this.#cache.delete(declaration.breakpoint);
+  }
+  #getDeclarations() {
+    const declarations = /* @__PURE__ */ new Map();
+    for (const mixin of this.#mixins) {
+      const rule = this.#mixinRules.get(mixin);
+      if (rule === void 0) {
+        continue;
+      }
+      for (const declaration of rule.getDeclarations()) {
+        declarations.set(getDeclarationKey(declaration), declaration);
+      }
+    }
+    for (const declaration of this.#declarations.values()) {
+      declarations.set(getDeclarationKey(declaration), declaration);
+    }
+    return declarations.values();
+  }
+  getMergedDeclarations() {
+    return mergeDeclarations(this.#getDeclarations());
+  }
+  toString({
+    breakpoint,
+    indent = 0,
+    transformValue
+  }) {
+    for (const mixin of this.#mixins) {
+      const rule = this.#mixinRules.get(mixin);
+      if (rule?.isDirtyBreakpoint(breakpoint)) {
+        this.#cache.delete(breakpoint);
+      }
+    }
+    const cached = this.#cache.get(breakpoint);
+    if (cached && cached.indent === indent && cached.transformValue === transformValue) {
+      return cached.generated;
+    }
+    const styleBySelector = /* @__PURE__ */ new Map();
+    for (const declaration of this.getMergedDeclarations()) {
+      if (declaration.breakpoint !== breakpoint) {
+        continue;
+      }
+      let nestedSelector = declaration.selector;
+      if (nestedSelector === ":local-link") {
+        nestedSelector = "[aria-current=page]";
+      }
+      const selector = this.#selector + this.#descendantSuffix + nestedSelector;
+      let style = styleBySelector.get(selector);
+      if (style === void 0) {
+        style = /* @__PURE__ */ new Map();
+        styleBySelector.set(selector, style);
+      }
+      style.set(declaration.property, declaration.value);
+    }
+    const spaces = " ".repeat(indent);
+    const generated = Array.from(styleBySelector).sort(
+      ([leftSelector], [rightSelector]) => leftSelector.localeCompare(rightSelector)
+    ).map(([selector, style]) => {
+      const content = generateStyleMap(prefixStyles(style), {
+        indent: indent + 2,
+        transformValue
+      });
+      return `${spaces}${selector} {
+${content}
+${spaces}}
+`;
+    }).join("").trimEnd();
+    this.#cache.set(breakpoint, { generated, indent, transformValue });
+    return generated;
+  }
+};
+var MediaRule = class {
+  #name;
+  options;
+  rules;
+  #mediaType;
+  constructor(name, options = {}) {
+    this.#name = name;
+    this.options = options;
+    this.rules = /* @__PURE__ */ new Map();
+    this.#mediaType = options.mediaType ?? "all";
+  }
+  insertRule(rule) {
+    this.rules.set(rule.cssText, rule);
+    return rule;
+  }
+  get cssText() {
+    return this.toString();
+  }
+  toString() {
+    return this.generateRule({ nestingRules: [] });
+  }
+  generateRule({
+    nestingRules,
+    transformValue
+  }) {
+    if (this.rules.size === 0 && nestingRules.length === 0) {
+      return "";
+    }
+    const rules = [];
+    for (const rule of this.rules.values()) {
+      rules.push(rule.toString());
+    }
+    for (const rule of nestingRules) {
+      const generatedRule = rule.toString({
+        breakpoint: this.#name,
+        indent: 2,
+        transformValue
+      });
+      if (generatedRule !== "") {
+        rules.push(generatedRule);
+      }
+    }
+    if (rules.length === 0) {
+      return "";
+    }
+    let conditionText = "";
+    const { minWidth, maxWidth } = this.options;
+    if (minWidth !== void 0) {
+      conditionText = ` and (min-width: ${minWidth}px)`;
+    }
+    if (maxWidth !== void 0) {
+      conditionText += ` and (max-width: ${maxWidth}px)`;
+    }
+    return `@media ${this.#mediaType}${conditionText} {
+${rules.join(
+      "\n"
+    )}
+}`;
+  }
+};
+var PlaintextRule = class {
+  cssText;
+  constructor(cssText) {
+    this.cssText = cssText;
+  }
+  toString() {
+    return this.cssText;
+  }
+};
+var FontFaceRule = class {
+  #cached;
+  #options;
+  constructor(options) {
+    this.#options = options;
+  }
+  get cssText() {
+    return this.toString();
+  }
+  toString() {
+    if (this.#cached) {
+      return this.#cached;
+    }
+    const decls = [];
+    const { fontFamily, fontStyle, fontWeight, fontDisplay, src } = this.#options;
+    const value = toValue(
+      { type: "fontFamily", value: [fontFamily] },
+      // Avoids adding a fallback automatically which needs to happen for font family in general but not for font face.
+      (value2) => value2
+    );
+    decls.push(`font-family: ${value}`);
+    decls.push(`font-style: ${fontStyle}`);
+    decls.push(`font-weight: ${fontWeight}`);
+    decls.push(`font-display: ${fontDisplay}`);
+    decls.push(`src: ${src}`);
+    this.#cached = `@font-face {
+  ${decls.join("; ")};
+}`;
+    return this.#cached;
+  }
+};
+
+// src/core/compare-media.ts
+var compareMedia = (optionA, optionB) => {
+  if (optionA.minWidth === void 0 && optionA.maxWidth === void 0) {
+    return -1;
+  }
+  if (optionB.minWidth === void 0 && optionB.maxWidth === void 0) {
+    return 1;
+  }
+  if (optionA.minWidth !== void 0 && optionB.minWidth !== void 0) {
+    return optionA.minWidth - optionB.minWidth;
+  }
+  if (optionA.maxWidth !== void 0 && optionB.maxWidth !== void 0) {
+    return optionB.maxWidth - optionA.maxWidth;
+  }
+  return "minWidth" in optionA ? 1 : -1;
+};
+
+// src/core/style-element.ts
+var StyleElement = class {
+  #element;
+  #name;
+  constructor(name = "") {
+    this.#name = name;
+  }
+  get isMounted() {
+    return this.#element?.parentElement != null;
+  }
+  mount() {
+    if (this.isMounted === false) {
+      this.#element = document.createElement("style");
+      this.#element.setAttribute("data-webstudio", this.#name);
+      document.head.appendChild(this.#element);
+    }
+  }
+  unmount() {
+    if (this.isMounted) {
+      this.#element?.parentElement?.removeChild(this.#element);
+      this.#element = void 0;
+    }
+  }
+  render(cssText) {
+    if (this.#element) {
+      this.#element.textContent = cssText;
+    }
+  }
+  setAttribute(name, value) {
+    if (this.#element) {
+      this.#element.setAttribute(name, value);
+    }
+  }
+  getAttribute(name) {
+    if (this.#element) {
+      return this.#element.getAttribute(name);
+    }
+  }
+};
+
+// src/core/style-sheet.ts
+var StyleSheet = class {
+  #cssText = "";
+  #mediaRules = /* @__PURE__ */ new Map();
+  #plainRules = /* @__PURE__ */ new Map();
+  #mixinRules = /* @__PURE__ */ new Map();
+  nestingRules = /* @__PURE__ */ new Map();
+  #fontFaceRules = [];
+  #transformValue;
+  #element;
+  constructor(element) {
+    this.#element = element;
+  }
+  setTransformer(transformValue) {
+    this.#transformValue = transformValue;
+  }
+  addMediaRule(id, options) {
+    let mediaRule = this.#mediaRules.get(id);
+    if (mediaRule === void 0) {
+      mediaRule = new MediaRule(id, options);
+      this.#mediaRules.set(id, mediaRule);
+      return mediaRule;
+    }
+    if (options) {
+      mediaRule.options = options;
+    }
+    if (mediaRule === void 0) {
+      throw new Error("No media rule found");
+    }
+    return mediaRule;
+  }
+  addPlaintextRule(cssText) {
+    const rule = this.#plainRules.get(cssText);
+    if (rule !== void 0) {
+      return rule;
+    }
+    return this.#plainRules.set(cssText, new PlaintextRule(cssText));
+  }
+  addMixinRule(name) {
+    let rule = this.#mixinRules.get(name);
+    if (rule === void 0) {
+      rule = new MixinRule();
+      this.#mixinRules.set(name, rule);
+    }
+    return rule;
+  }
+  addNestingRule(selector, descendantSuffix = "") {
+    const key = selector + descendantSuffix;
+    let rule = this.nestingRules.get(key);
+    if (rule === void 0) {
+      rule = new NestingRule(this.#mixinRules, selector, descendantSuffix);
+      this.nestingRules.set(key, rule);
+    }
+    return rule;
+  }
+  addFontFaceRule(options) {
+    return this.#fontFaceRules.push(new FontFaceRule(options));
+  }
+  generateWith({
+    nestingRules,
+    transformValue
+  }) {
+    const css = [];
+    css.push(...this.#fontFaceRules.map((rule) => rule.cssText));
+    for (const plaintextRule of this.#plainRules.values()) {
+      css.push(plaintextRule.cssText);
+    }
+    const sortedMediaRules = Array.from(this.#mediaRules.values()).sort(
+      (ruleA, ruleB) => compareMedia(ruleA.options, ruleB.options)
+    );
+    for (const mediaRule of sortedMediaRules) {
+      const cssText = mediaRule.generateRule({
+        nestingRules,
+        transformValue
+      });
+      if (cssText !== "") {
+        css.push(cssText);
+      }
+    }
+    for (const rule of this.#mixinRules.values()) {
+      rule.clearBreakpoints();
+    }
+    this.#cssText = css.join("\n");
+    return this.#cssText;
+  }
+  get cssText() {
+    return this.generateWith({
+      nestingRules: Array.from(this.nestingRules.values()),
+      transformValue: this.#transformValue
+    });
+  }
+  clear() {
+    this.#mediaRules.clear();
+    this.#mixinRules.clear();
+    this.nestingRules.clear();
+    this.#plainRules.clear();
+    this.#fontFaceRules = [];
+  }
+  render() {
+    this.#element.mount();
+    this.#element.render(this.cssText);
+  }
+  unmount() {
+    this.#element.unmount();
+  }
+  setAttribute(name, value) {
+    this.#element.setAttribute(name, value);
+  }
+  getAttribute(name) {
+    return this.#element.getAttribute(name);
+  }
+};
+
+// src/core/style-sheet-regular.ts
+var StyleSheetRegular = class extends StyleSheet {
+};
+
+// src/core/create-style-sheet.ts
+var createRegularStyleSheet = (options) => {
+  const element = new StyleElement(options?.name);
+  return new StyleSheetRegular(element);
+};
+
+// src/core/match-media.ts
+var matchMedia = (options, width) => {
+  const minWidth = options.minWidth ?? Number.MIN_SAFE_INTEGER;
+  const maxWidth = options.maxWidth ?? Number.MAX_SAFE_INTEGER;
+  return width >= minWidth && width <= maxWidth;
+};
+
+// src/core/equal-media.ts
+var equalMedia = (left, right) => {
+  return left.minWidth === right.minWidth && left.maxWidth === right.maxWidth;
+};
+
+// src/core/find-applicable-media.ts
+var findApplicableMedia = (media, width) => {
+  const sortedMedia = [...media].sort(compareMedia).reverse();
+  for (const options of sortedMedia) {
+    if (matchMedia(options, width)) {
+      return options;
+    }
+  }
+};
+
+// src/core/atomic.ts
+import hash from "@emotion/hash";
+var generateAtomic = (sheet, options) => {
+  const { getKey, transformValue } = options;
+  const atomicRules = /* @__PURE__ */ new Map();
+  const classes = options.classes ?? /* @__PURE__ */ new Map();
+  for (const rule of sheet.nestingRules.values()) {
+    const descendantSuffix = rule.getDescendantSuffix();
+    const groupKey = getKey(rule);
+    if (groupKey === void 0) {
+      atomicRules.set(rule.getSelector(), rule);
+      continue;
+    }
+    let classList = classes.get(groupKey);
+    if (classList === void 0) {
+      classList = [];
+      classes.set(groupKey, classList);
+    }
+    for (const declaration of rule.getMergedDeclarations()) {
+      const atomicHash = hash(
+        descendantSuffix + declaration.breakpoint + declaration.selector + declaration.property + toValue(declaration.value, transformValue)
+      );
+      const className = `c${atomicHash}`;
+      let atomicRule = atomicRules.get(atomicHash);
+      if (atomicRule === void 0) {
+        atomicRule = new NestingRule(
+          /* @__PURE__ */ new Map(),
+          `.${className}`,
+          descendantSuffix
+        );
+        atomicRule.setDeclaration(declaration);
+        atomicRules.set(atomicHash, atomicRule);
+      }
+      classList.push(className);
+    }
+  }
+  const cssText = sheet.generateWith({
+    nestingRules: Array.from(atomicRules.values()),
+    transformValue
+  });
+  return { cssText, classes };
+};
+export {
+  FunctionValue,
+  GuaranteedInvalidValue,
+  ImageValue,
+  InvalidValue,
+  KeywordValue,
+  LayersValue,
+  ShadowValue,
+  StyleValue,
+  TupleValue,
+  TupleValueItem,
+  UnitValue,
+  UnparsedValue,
+  VarFallback,
+  compareMedia,
+  createRegularStyleSheet,
+  cssWideKeywords,
+  equalMedia,
+  findApplicableMedia,
+  generateAtomic,
+  generateStyleMap,
+  hyphenateProperty,
+  matchMedia,
+  mergeStyles,
+  prefixStyles,
+  toValue,
+  toVarFallback
+};