@webstudio-is/css-engine 0.95.0 → 0.96.0

package/lib/index.js

@@ -1,3 +1,561 @@
-"use strict";
-export * from "./core";
-export * from "./schema";
+// src/core/to-value.ts
+import { captureError } from "@webstudio-is/error-utils";
+import { DEFAULT_FONT_FALLBACK, SYSTEM_FONTS } from "@webstudio-is/fonts";
+var 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
+    };
+  }
+};
+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") {
+    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);
+};
+
+// src/core/to-property.ts
+import hyphenate from "hyphenate-style-name";
+var toProperty = (property) => {
+  if (property === "backgroundClip") {
+    return "-webkit-background-clip";
+  }
+  return hyphenate(property);
+};
+
+// src/core/rules.ts
+var StylePropertyMap = class {
+  #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;
+  }
+};
+var StyleRule = class {
+  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}}`;
+  }
+};
+var MediaRule = class {
+  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"
+    )}
+}`;
+  }
+};
+var PlaintextRule = class {
+  cssText;
+  styleMap = new StylePropertyMap();
+  constructor(cssText) {
+    this.cssText = cssText;
+  }
+  toString() {
+    return this.cssText;
+  }
+};
+var FontFaceRule = class {
+  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("; ")};
+}`;
+  }
+};
+
+// 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 = "";
+  #element;
+  constructor(element) {
+    this.#element = element;
+  }
+  replaceSync(cssText) {
+    if (cssText !== this.#cssText) {
+      this.#cssText = cssText;
+      this.#element.render(cssText);
+    }
+  }
+};
+
+// src/core/css-engine.ts
+var defaultMediaRuleId = "__default-media-rule__";
+var CssEngine = class {
+  #element;
+  #mediaRules = /* @__PURE__ */ new Map();
+  #plainRules = /* @__PURE__ */ new Map();
+  #fontFaceRules = [];
+  #sheet;
+  #isDirty = false;
+  #cssText = "";
+  constructor({ name }) {
+    this.#element = new StyleElement(name);
+    this.#sheet = new StyleSheet(this.#element);
+  }
+  addMediaRule(id, options) {
+    let mediaRule = this.#mediaRules.get(id);
+    if (mediaRule === void 0) {
+      mediaRule = new MediaRule(options);
+      this.#mediaRules.set(id, mediaRule);
+      this.#isDirty = true;
+      return mediaRule;
+    }
+    if (options) {
+      mediaRule.options = options;
+      this.#isDirty = true;
+    }
+    return mediaRule;
+  }
+  addStyleRule(selectorText, rule, transformValue) {
+    const mediaRule = this.addMediaRule(rule.breakpoint || defaultMediaRuleId);
+    this.#isDirty = true;
+    const styleRule = new StyleRule(selectorText, rule.style, transformValue);
+    styleRule.onChange = this.#onChangeRule;
+    if (mediaRule === void 0) {
+      throw new Error("No media rule found");
+    }
+    mediaRule.insertRule(styleRule);
+    return styleRule;
+  }
+  addPlaintextRule(cssText) {
+    const rule = this.#plainRules.get(cssText);
+    if (rule !== void 0) {
+      return rule;
+    }
+    this.#isDirty = true;
+    return this.#plainRules.set(cssText, new PlaintextRule(cssText));
+  }
+  addFontFaceRule(options) {
+    this.#isDirty = true;
+    return this.#fontFaceRules.push(new FontFaceRule(options));
+  }
+  clear() {
+    this.#mediaRules.clear();
+    this.#plainRules.clear();
+    this.#fontFaceRules = [];
+    this.#isDirty = true;
+  }
+  render() {
+    this.#element.mount();
+    this.#sheet.replaceSync(this.cssText);
+  }
+  unmount() {
+    this.#element.unmount();
+  }
+  setAttribute(name, value) {
+    this.#element.setAttribute(name, value);
+  }
+  getAttribute(name) {
+    return this.#element.getAttribute(name);
+  }
+  get cssText() {
+    if (this.#isDirty === false) {
+      return this.#cssText;
+    }
+    this.#isDirty = false;
+    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;
+      if (cssText !== "") {
+        css.push(cssText);
+      }
+    }
+    this.#cssText = css.join("\n");
+    return this.#cssText;
+  }
+  #onChangeRule = () => {
+    this.#isDirty = true;
+  };
+};
+
+// src/core/create-css-engine.ts
+var createCssEngine = (options = {}) => {
+  return new CssEngine(options);
+};
+
+// 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/schema.ts
+import { z } from "zod";
+var Unit = z.string();
+var UnitValue = z.object({
+  type: z.literal("unit"),
+  unit: Unit,
+  value: z.number()
+});
+var KeywordValue = z.object({
+  type: z.literal("keyword"),
+  // @todo use exact type
+  value: z.string()
+});
+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())
+});
+var RgbValue = z.object({
+  type: z.literal("rgb"),
+  r: z.number(),
+  g: z.number(),
+  b: z.number(),
+  alpha: z.number()
+});
+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 InvalidValue = z.object({
+  type: z.literal("invalid"),
+  value: z.string()
+});
+var UnsetValue = z.object({
+  type: z.literal("unset"),
+  value: z.literal("")
+});
+var TupleValueItem = z.union([
+  UnitValue,
+  KeywordValue,
+  UnparsedValue,
+  RgbValue
+]);
+var TupleValue = z.object({
+  type: z.literal("tuple"),
+  value: z.array(TupleValueItem),
+  hidden: z.boolean().optional()
+});
+var LayerValueItem = z.union([
+  UnitValue,
+  KeywordValue,
+  UnparsedValue,
+  ImageValue,
+  TupleValue,
+  InvalidValue
+]);
+var LayersValue = z.object({
+  type: z.literal("layers"),
+  value: z.array(LayerValueItem)
+});
+var ValidStaticStyleValue = z.union([
+  ImageValue,
+  LayersValue,
+  UnitValue,
+  KeywordValue,
+  FontFamilyValue,
+  RgbValue,
+  UnparsedValue,
+  TupleValue
+]);
+var 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";
+};
+var VarValue = z.object({
+  type: z.literal("var"),
+  value: z.string(),
+  fallbacks: z.array(ValidStaticStyleValue)
+});
+var StyleValue = z.union([
+  ValidStaticStyleValue,
+  InvalidValue,
+  UnsetValue,
+  VarValue
+]);
+var Style = z.record(z.string(), StyleValue);
+export {
+  CssEngine,
+  ImageValue,
+  InvalidValue,
+  KeywordValue,
+  LayersValue,
+  StyleValue,
+  TupleValue,
+  TupleValueItem,
+  UnitValue,
+  UnparsedValue,
+  compareMedia,
+  createCssEngine,
+  equalMedia,
+  findApplicableMedia,
+  isValidStaticStyleValue,
+  matchMedia,
+  toProperty,
+  toValue
+};

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@webstudio-is/css-engine",
-  "version": "0.95.0",
+  "version": "0.96.0",
   "description": "CSS Renderer for Webstudio",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
   "type": "module",
   "dependencies": {
     "hyphenate-style-name": "^1.0.4",
-    "@webstudio-is/error-utils": "^0.95.0",
-    "@webstudio-is/fonts": "^0.95.0"
+    "@webstudio-is/error-utils": "^0.96.0",
+    "@webstudio-is/fonts": "^0.96.0"
   },
   "devDependencies": {
     "@jest/globals": "^29.6.4",
@@ -39,8 +39,8 @@
   "scripts": {
     "typecheck": "tsc",
     "checks": "pnpm typecheck && pnpm test",
-    "dev": "pnpm build --watch",
-    "build": "rm -rf lib && esbuild 'src/**/*.ts' 'src/**/*.tsx' --outdir=lib",
+    "dev": "rm -rf lib && esbuild 'src/**/*.ts' 'src/**/*.tsx' --outdir=lib --watch",
+    "build": "rm -rf lib && esbuild src/index.ts --outdir=lib --bundle --format=esm --packages=external",
     "dts": "tsc --project tsconfig.dts.json",
     "test": "NODE_OPTIONS=--experimental-vm-modules jest",
     "storybook:dev": "storybook dev -p 6006",

package/lib/__generated__/types.js

@@ -1 +0,0 @@
-"use strict";

package/lib/core/compare-media.js

@@ -1,16 +0,0 @@
-"use strict";
-export const 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;
-};

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

@@ -1,63 +0,0 @@
-"use strict";
-import { describe, test, expect } from "@jest/globals";
-import { compareMedia } from "./compare-media";
-describe("Compare media", () => {
-  test("min-width", () => {
-    const initial = [
-      {},
-      { minWidth: 1280 },
-      { minWidth: 0 },
-      { minWidth: 1024 },
-      { minWidth: 768 }
-    ];
-    const expected = [
-      {},
-      { minWidth: 0 },
-      { minWidth: 768 },
-      { minWidth: 1024 },
-      { minWidth: 1280 }
-    ];
-    const sorted = initial.sort(compareMedia);
-    expect(sorted).toStrictEqual(expected);
-  });
-  test("max-width", () => {
-    const initial = [
-      {},
-      { maxWidth: 1280 },
-      { maxWidth: 0 },
-      { maxWidth: 1024 },
-      { maxWidth: 768 }
-    ];
-    const expected = [
-      {},
-      { maxWidth: 1280 },
-      { maxWidth: 1024 },
-      { maxWidth: 768 },
-      { maxWidth: 0 }
-    ];
-    const sorted = initial.sort(compareMedia);
-    expect(sorted).toStrictEqual(expected);
-  });
-  test("mixed max and min", () => {
-    const initial = [
-      {},
-      { maxWidth: 991 },
-      { maxWidth: 479 },
-      { maxWidth: 767 },
-      { minWidth: 1440 },
-      { minWidth: 1280 },
-      { minWidth: 1920 }
-    ];
-    const expected = [
-      {},
-      { maxWidth: 991 },
-      { maxWidth: 767 },
-      { maxWidth: 479 },
-      { minWidth: 1280 },
-      { minWidth: 1440 },
-      { minWidth: 1920 }
-    ];
-    const sorted = initial.sort(compareMedia);
-    expect(sorted).toStrictEqual(expected);
-  });
-});

package/lib/core/create-css-engine.js

@@ -1,5 +0,0 @@
-"use strict";
-import { CssEngine } from "./css-engine";
-export const createCssEngine = (options = {}) => {
-  return new CssEngine(options);
-};