@webstudio-is/css-engine 0.95.0 → 0.97.0

package/lib/core/match-media.test.js

@@ -1,22 +0,0 @@
-"use strict";
-import { describe, expect, test } from "@jest/globals";
-import { matchMedia } from "./match-media";
-describe("matchMedia", () => {
-  test("minWidth", () => {
-    expect(matchMedia({ minWidth: 100 }, 10)).toBe(false);
-    expect(matchMedia({ minWidth: 100 }, 100)).toBe(true);
-    expect(matchMedia({ minWidth: 100 }, 101)).toBe(true);
-  });
-  test("maxWidth", () => {
-    expect(matchMedia({ maxWidth: 100 }, 101)).toBe(false);
-    expect(matchMedia({ maxWidth: 100 }, 100)).toBe(true);
-    expect(matchMedia({ maxWidth: 100 }, 10)).toBe(true);
-  });
-  test("minWidth and maxWidth", () => {
-    expect(matchMedia({ maxWidth: 100, minWidth: 10 }, 9)).toBe(false);
-    expect(matchMedia({ maxWidth: 100, minWidth: 10 }, 101)).toBe(false);
-    expect(matchMedia({ maxWidth: 100, minWidth: 10 }, 100)).toBe(true);
-    expect(matchMedia({ maxWidth: 100, minWidth: 10 }, 10)).toBe(true);
-    expect(matchMedia({ maxWidth: 100, minWidth: 10 }, 11)).toBe(true);
-  });
-});

package/lib/core/rules.js

@@ -1,162 +0,0 @@
-"use strict";
-import { toValue } from "./to-value";
-import { toProperty } from "./to-property";
-class StylePropertyMap {
-  #styleMap = /* @__PURE__ */ new Map();
-  #isDirty = false;
-  #string = "";
-  #indent = 0;
-  #transformValue;
-  onChange;
-  constructor(transformValue) {
-    this.#transformValue = transformValue;
-  }
-  setTransformer(transformValue) {
-    this.#transformValue = transformValue;
-  }
-  set(property, value) {
-    this.#styleMap.set(property, value);
-    this.#isDirty = true;
-    this.onChange?.();
-  }
-  has(property) {
-    return this.#styleMap.has(property);
-  }
-  get size() {
-    return this.#styleMap.size;
-  }
-  keys() {
-    return this.#styleMap.keys();
-  }
-  delete(property) {
-    this.#styleMap.delete(property);
-    this.#isDirty = true;
-    this.onChange?.();
-  }
-  clear() {
-    this.#styleMap.clear();
-    this.#isDirty = true;
-    this.onChange?.();
-  }
-  toString({ indent = 0 } = {}) {
-    if (this.#isDirty === false && indent === this.#indent) {
-      return this.#string;
-    }
-    this.#indent = indent;
-    const block = [];
-    const spaces = " ".repeat(indent);
-    for (const [property, value] of this.#styleMap) {
-      if (value === void 0) {
-        continue;
-      }
-      block.push(
-        `${spaces}${toProperty(property)}: ${toValue(
-          value,
-          this.#transformValue
-        )}`
-      );
-    }
-    this.#string = block.join(";\n");
-    this.#isDirty = false;
-    return this.#string;
-  }
-}
-export class StyleRule {
-  styleMap;
-  selectorText;
-  onChange;
-  constructor(selectorText, style, transformValue) {
-    this.styleMap = new StylePropertyMap(transformValue);
-    this.selectorText = selectorText;
-    let property;
-    for (property in style) {
-      this.styleMap.set(property, style[property]);
-    }
-    this.styleMap.onChange = this.#onChange;
-  }
-  #onChange = () => {
-    this.onChange?.();
-  };
-  get cssText() {
-    return this.toString();
-  }
-  toString(options = { indent: 0 }) {
-    const spaces = " ".repeat(options.indent);
-    return `${spaces}${this.selectorText} {
-${this.styleMap.toString({
-      indent: options.indent + 2
-    })}
-${spaces}}`;
-  }
-}
-export class MediaRule {
-  options;
-  rules = [];
-  #mediaType;
-  constructor(options = {}) {
-    this.options = options;
-    this.#mediaType = options.mediaType ?? "all";
-  }
-  insertRule(rule) {
-    this.rules.push(rule);
-    return rule;
-  }
-  get cssText() {
-    return this.toString();
-  }
-  toString() {
-    if (this.rules.length === 0) {
-      return "";
-    }
-    const rules = [];
-    for (const rule of this.rules) {
-      rules.push(rule.toString({ indent: 2 }));
-    }
-    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"
-    )}
-}`;
-  }
-}
-export class PlaintextRule {
-  cssText;
-  styleMap = new StylePropertyMap();
-  constructor(cssText) {
-    this.cssText = cssText;
-  }
-  toString() {
-    return this.cssText;
-  }
-}
-export class FontFaceRule {
-  options;
-  constructor(options) {
-    this.options = options;
-  }
-  get cssText() {
-    return this.toString();
-  }
-  toString() {
-    const decls = [];
-    const { fontFamily, fontStyle, fontWeight, fontDisplay, src } = this.options;
-    decls.push(
-      `font-family: ${/\s/.test(fontFamily) ? `"${fontFamily}"` : fontFamily}`
-    );
-    decls.push(`font-style: ${fontStyle}`);
-    decls.push(`font-weight: ${fontWeight}`);
-    decls.push(`font-display: ${fontDisplay}`);
-    decls.push(`src: ${src}`);
-    return `@font-face {
-  ${decls.join("; ")};
-}`;
-  }
-}

package/lib/core/style-element.js

@@ -1,39 +0,0 @@
-"use strict";
-export class StyleElement {
-  #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);
-    }
-  }
-}

package/lib/core/style-sheet.js

@@ -1,14 +0,0 @@
-"use strict";
-export class StyleSheet {
-  #cssText = "";
-  #element;
-  constructor(element) {
-    this.#element = element;
-  }
-  replaceSync(cssText) {
-    if (cssText !== this.#cssText) {
-      this.#cssText = cssText;
-      this.#element.render(cssText);
-    }
-  }
-}

package/lib/core/to-property.js

@@ -1,8 +0,0 @@
-"use strict";
-import hyphenate from "hyphenate-style-name";
-export const toProperty = (property) => {
-  if (property === "backgroundClip") {
-    return "-webkit-background-clip";
-  }
-  return hyphenate(property);
-};

package/lib/core/to-property.test.js

@@ -1,11 +0,0 @@
-"use strict";
-import { describe, test, expect } from "@jest/globals";
-import { toProperty } from "./to-property";
-describe("toProperty", () => {
-  test("boxSizing", () => {
-    expect(toProperty("boxSizing")).toBe("box-sizing");
-  });
-  test("backgroundClip", () => {
-    expect(toProperty("backgroundClip")).toBe("-webkit-background-clip");
-  });
-});

package/lib/core/to-value.js

@@ -1,76 +0,0 @@
-"use strict";
-import { captureError } from "@webstudio-is/error-utils";
-import { DEFAULT_FONT_FALLBACK, SYSTEM_FONTS } from "@webstudio-is/fonts";
-const fallbackTransform = (styleValue) => {
-  if (styleValue.type === "fontFamily") {
-    const firstFontFamily = styleValue.value[0];
-    const fallbacks = SYSTEM_FONTS.get(firstFontFamily);
-    const fontFamily = [...styleValue.value];
-    if (Array.isArray(fallbacks)) {
-      fontFamily.push(...fallbacks);
-    } else {
-      fontFamily.push(DEFAULT_FONT_FALLBACK);
-    }
-    return {
-      type: "fontFamily",
-      value: fontFamily
-    };
-  }
-};
-export const 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") {
-    return value.value.join(", ");
-  }
-  if (value.type === "var") {
-    const fallbacks = [];
-    for (const fallback of value.fallbacks) {
-      fallbacks.push(toValue(fallback, transformValue));
-    }
-    const fallbacksString = fallbacks.length > 0 ? `, ${fallbacks.join(", ")}` : "";
-    return `var(--${value.value}${fallbacksString})`;
-  }
-  if (value.type === "keyword") {
-    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(${value.value.url})`;
-  }
-  if (value.type === "unparsed") {
-    if (value.hidden) {
-      return "none";
-    }
-    return value.value;
-  }
-  if (value.type === "layers") {
-    const valueString = value.value.filter(
-      (layer) => "hidden" in layer === false || "hidden" in layer && layer.hidden === false
-    ).map((layer) => {
-      return toValue(layer, transformValue);
-    }).join(", ");
-    return valueString === "" ? "none" : valueString;
-  }
-  if (value.type === "tuple") {
-    return value.value.map((value2) => toValue(value2, transformValue)).join(" ");
-  }
-  return captureError(new Error("Unknown value type"), value);
-};

package/lib/core/to-value.test.js

@@ -1,123 +0,0 @@
-"use strict";
-import { describe, test, expect } from "@jest/globals";
-import { toValue } from "./to-value";
-describe("Convert WS CSS Values to native CSS strings", () => {
-  test("keyword", () => {
-    const value = toValue({ type: "keyword", value: "red" });
-    expect(value).toBe("red");
-  });
-  test("unit", () => {
-    const value = toValue({ type: "unit", value: 10, unit: "px" });
-    expect(value).toBe("10px");
-  });
-  test("invalid", () => {
-    const value = toValue({ type: "invalid", value: "bad" });
-    expect(value).toBe("bad");
-  });
-  test("unset", () => {
-    const value = toValue({ type: "unset", value: "" });
-    expect(value).toBe("");
-  });
-  test("var", () => {
-    const value = toValue({ type: "var", value: "namespace", fallbacks: [] });
-    expect(value).toBe("var(--namespace)");
-  });
-  test("var with fallbacks", () => {
-    const value = toValue({
-      type: "var",
-      value: "namespace",
-      fallbacks: [
-        {
-          type: "keyword",
-          value: "normal"
-        },
-        {
-          type: "unit",
-          value: 10,
-          unit: "px"
-        }
-      ]
-    });
-    expect(value).toBe("var(--namespace, normal, 10px)");
-  });
-  test("fontFamily", () => {
-    const value = toValue({
-      type: "fontFamily",
-      value: ["Courier New"]
-    });
-    expect(value).toBe("Courier New, monospace");
-  });
-  test("Transform font family value to override default fallback", () => {
-    const value = toValue(
-      {
-        type: "fontFamily",
-        value: ["Courier New"]
-      },
-      (styleValue) => {
-        if (styleValue.type === "fontFamily") {
-          return {
-            type: "fontFamily",
-            value: [styleValue.value[0]]
-          };
-        }
-      }
-    );
-    expect(value).toBe("Courier New");
-  });
-  test("array", () => {
-    const assets = /* @__PURE__ */ new Map([
-      ["1234567890", { path: "foo.png" }]
-    ]);
-    const value = toValue(
-      {
-        type: "layers",
-        value: [
-          {
-            type: "keyword",
-            value: "auto"
-          },
-          { type: "unit", value: 10, unit: "px" },
-          { type: "unparsed", value: "calc(10px)" },
-          {
-            type: "image",
-            value: {
-              type: "asset",
-              value: "1234567890"
-            }
-          }
-        ]
-      },
-      (styleValue) => {
-        if (styleValue.type === "image" && styleValue.value.type === "asset") {
-          const asset = assets.get(styleValue.value.value);
-          if (asset === void 0) {
-            return {
-              type: "keyword",
-              value: "none"
-            };
-          }
-          return {
-            type: "image",
-            value: {
-              type: "url",
-              url: asset.path
-            }
-          };
-        }
-      }
-    );
-    expect(value).toBe("auto, 10px, calc(10px), url(foo.png)");
-  });
-  test("tuple", () => {
-    const value = toValue({
-      type: "tuple",
-      value: [
-        { type: "unit", value: 10, unit: "px" },
-        { type: "unit", value: 20, unit: "px" },
-        { type: "unit", value: 30, unit: "px" },
-        { type: "unit", value: 40, unit: "px" }
-      ]
-    });
-    expect(value).toBe("10px 20px 30px 40px");
-  });
-});

package/lib/schema.js

@@ -1,98 +0,0 @@
-"use strict";
-import { z } from "zod";
-const Unit = z.string();
-export const UnitValue = z.object({
-  type: z.literal("unit"),
-  unit: Unit,
-  value: z.number()
-});
-export const KeywordValue = z.object({
-  type: z.literal("keyword"),
-  // @todo use exact type
-  value: z.string()
-});
-export const 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()
-});
-const FontFamilyValue = z.object({
-  type: z.literal("fontFamily"),
-  value: z.array(z.string())
-});
-const RgbValue = z.object({
-  type: z.literal("rgb"),
-  r: z.number(),
-  g: z.number(),
-  b: z.number(),
-  alpha: z.number()
-});
-export const 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()
-});
-export const InvalidValue = z.object({
-  type: z.literal("invalid"),
-  value: z.string()
-});
-const UnsetValue = z.object({
-  type: z.literal("unset"),
-  value: z.literal("")
-});
-export const TupleValueItem = z.union([
-  UnitValue,
-  KeywordValue,
-  UnparsedValue,
-  RgbValue
-]);
-export const TupleValue = z.object({
-  type: z.literal("tuple"),
-  value: z.array(TupleValueItem),
-  hidden: z.boolean().optional()
-});
-const LayerValueItem = z.union([
-  UnitValue,
-  KeywordValue,
-  UnparsedValue,
-  ImageValue,
-  TupleValue,
-  InvalidValue
-]);
-export const LayersValue = z.object({
-  type: z.literal("layers"),
-  value: z.array(LayerValueItem)
-});
-const ValidStaticStyleValue = z.union([
-  ImageValue,
-  LayersValue,
-  UnitValue,
-  KeywordValue,
-  FontFamilyValue,
-  RgbValue,
-  UnparsedValue,
-  TupleValue
-]);
-export const isValidStaticStyleValue = (styleValue) => {
-  const staticStyleValue = styleValue;
-  return staticStyleValue.type === "image" || staticStyleValue.type === "layers" || staticStyleValue.type === "unit" || staticStyleValue.type === "keyword" || staticStyleValue.type === "fontFamily" || staticStyleValue.type === "rgb" || staticStyleValue.type === "unparsed" || staticStyleValue.type === "tuple";
-};
-const VarValue = z.object({
-  type: z.literal("var"),
-  value: z.string(),
-  fallbacks: z.array(ValidStaticStyleValue)
-});
-export const StyleValue = z.union([
-  ValidStaticStyleValue,
-  InvalidValue,
-  UnsetValue,
-  VarValue
-]);
-const Style = z.record(z.string(), StyleValue);