@webstudio-is/css-engine 0.91.0 → 0.93.0

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

@@ -1,40 +0,0 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var to_property_exports = {};
-__export(to_property_exports, {
-  toProperty: () => toProperty
-});
-module.exports = __toCommonJS(to_property_exports);
-var import_hyphenate_style_name = __toESM(require("hyphenate-style-name"), 1);
-const toProperty = (property) => {
-  if (property === "backgroundClip") {
-    return "-webkit-background-clip";
-  }
-  return (0, import_hyphenate_style_name.default)(property);
-};

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

@@ -1,98 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var to_value_exports = {};
-__export(to_value_exports, {
-  toValue: () => toValue
-});
-module.exports = __toCommonJS(to_value_exports);
-var import_error_utils = require("@webstudio-is/error-utils");
-var import_fonts = require("@webstudio-is/fonts");
-const fallbackTransform = (styleValue) => {
-  if (styleValue.type === "fontFamily") {
-    const firstFontFamily = styleValue.value[0];
-    const fallbacks = import_fonts.SYSTEM_FONTS.get(firstFontFamily);
-    const fontFamily = [...styleValue.value];
-    if (Array.isArray(fallbacks)) {
-      fontFamily.push(...fallbacks);
-    } else {
-      fontFamily.push(import_fonts.DEFAULT_FONT_FALLBACK);
-    }
-    return {
-      type: "fontFamily",
-      value: fontFamily
-    };
-  }
-};
-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 (0, import_error_utils.captureError)(new Error("Unknown value type"), value);
-};

package/lib/cjs/index.js

@@ -1,18 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var src_exports = {};
-module.exports = __toCommonJS(src_exports);
-__reExport(src_exports, require("./core"), module.exports);

package/lib/cjs/package.json

@@ -1 +0,0 @@
-{"type":"commonjs"}

package/src/core/compare-media.ts

@@ -1,30 +0,0 @@
-import type { MediaRuleOptions } from "./rules";
-
-/**
- * Sort by minWidth descending or maxWidth ascending
- * We want media querries with bigger minWidth to override the smaller once, but the smaller maxWidth to override the bigger once.
- */
-export const compareMedia = (
-  optionA: MediaRuleOptions,
-  optionB: MediaRuleOptions
-) => {
-  // Ensures a media with no min/max is always first
-  if (optionA.minWidth === undefined && optionA.maxWidth === undefined) {
-    return -1;
-  }
-  if (optionB.minWidth === undefined && optionB.maxWidth === undefined) {
-    return 1;
-  }
-
-  // Both are defined by minWidth, put the bigger one first
-  if (optionA.minWidth !== undefined && optionB.minWidth !== undefined) {
-    return optionA.minWidth - optionB.minWidth;
-  }
-  // Both are defined by maxWidth, put the smaller one first
-  if (optionA.maxWidth !== undefined && optionB.maxWidth !== undefined) {
-    return optionB.maxWidth - optionA.maxWidth;
-  }
-
-  // Media with maxWith should render before minWith just to have the same sorting visually in the UI as in CSSOM.
-  return "minWidth" in optionA ? 1 : -1;
-};

package/src/core/create-css-engine.ts

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

package/src/core/css-engine.stories.tsx

@@ -1,48 +0,0 @@
-import { CssEngine } from "./css-engine";
-
-export default {
-  component: "CssEngine",
-};
-
-const style0 = {
-  color: { type: "keyword", value: "red" },
-} as const;
-
-const mediaRuleOptions0 = { minWidth: 0 } as const;
-const mediaId = "0";
-
-export const Basic = () => {
-  const engine = new CssEngine({ name: "test" });
-  engine.addMediaRule(mediaId, mediaRuleOptions0);
-  const rule = engine.addStyleRule(".test", {
-    style: style0,
-    breakpoint: "0",
-  });
-  engine.render();
-  return (
-    <>
-      <div className="test">Should be red</div>
-      <button
-        onClick={() => {
-          rule.styleMap.set("color", { type: "keyword", value: "green" });
-          engine.render();
-        }}
-      >
-        Make it green
-      </button>
-      <button
-        onClick={() => {
-          engine.addStyleRule(".test", {
-            style: {
-              backgroundColor: { type: "keyword", value: "yellow" },
-            },
-            breakpoint: "0",
-          });
-          engine.render();
-        }}
-      >
-        Add rule with yellow background
-      </button>
-    </>
-  );
-};

package/src/core/css-engine.ts

@@ -1,128 +0,0 @@
-import type { Style } from "@webstudio-is/css-data";
-import {
-  FontFaceRule,
-  MediaRule,
-  PlaintextRule,
-  StyleRule,
-  type FontFaceOptions,
-  type MediaRuleOptions,
-} from "./rules";
-import { compareMedia } from "./compare-media";
-import { StyleElement } from "./style-element";
-import { StyleSheet } from "./style-sheet";
-import type { TransformValue } from "./to-value";
-
-const defaultMediaRuleId = "__default-media-rule__";
-
-type CssRule = {
-  style: Style;
-  breakpoint?: string;
-};
-
-export type CssEngineOptions = { name?: string };
-
-export class CssEngine {
-  #element;
-  #mediaRules: Map<string, MediaRule> = new Map();
-  #plainRules: Map<string, PlaintextRule> = new Map();
-  #fontFaceRules: Array<FontFaceRule> = [];
-  #sheet: StyleSheet;
-  #isDirty = false;
-  #cssText = "";
-  constructor({ name }: CssEngineOptions) {
-    this.#element = new StyleElement(name);
-    this.#sheet = new StyleSheet(this.#element);
-  }
-  addMediaRule(id: string, options?: MediaRuleOptions) {
-    let mediaRule = this.#mediaRules.get(id);
-    if (mediaRule === undefined) {
-      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: string,
-    rule: CssRule,
-    transformValue?: 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 === undefined) {
-      // Should be impossible to reach.
-      throw new Error("No media rule found");
-    }
-    mediaRule.insertRule(styleRule);
-    return styleRule;
-  }
-  addPlaintextRule(cssText: string) {
-    const rule = this.#plainRules.get(cssText);
-    if (rule !== undefined) {
-      return rule;
-    }
-    this.#isDirty = true;
-    return this.#plainRules.set(cssText, new PlaintextRule(cssText));
-  }
-  addFontFaceRule(options: FontFaceOptions) {
-    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 isn't going to do anything if the `cssText` hasn't changed.
-    this.#sheet.replaceSync(this.cssText);
-  }
-  unmount() {
-    this.#element.unmount();
-  }
-  setAttribute(name: string, value: string) {
-    this.#element.setAttribute(name, value);
-  }
-  getAttribute(name: string) {
-    return this.#element.getAttribute(name);
-  }
-  get cssText() {
-    if (this.#isDirty === false) {
-      return this.#cssText;
-    }
-    this.#isDirty = false;
-    const css: Array<string> = [];
-
-    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;
-  };
-}

package/src/core/equal-media.ts

@@ -1,5 +0,0 @@
-import type { MediaRuleOptions } from "./rules";
-
-export const equalMedia = (left: MediaRuleOptions, right: MediaRuleOptions) => {
-  return left.minWidth === right.minWidth && left.maxWidth === right.maxWidth;
-};

package/src/core/find-applicable-media.ts

@@ -1,20 +0,0 @@
-import { compareMedia } from "./compare-media";
-import { matchMedia } from "./match-media";
-import type { MediaRuleOptions } from "./rules";
-
-// Find media rule that matches the given width when rendered.
-export const findApplicableMedia = <Media extends MediaRuleOptions>(
-  media: Array<Media>,
-  width: number
-) => {
-  const sortedMedia = [...media]
-    .sort(compareMedia)
-    // Reverse order is needed because the last rule in CSSOM has higher source order specificity.
-    .reverse();
-
-  for (const options of sortedMedia) {
-    if (matchMedia(options, width)) {
-      return options;
-    }
-  }
-};

package/src/core/index.ts

@@ -1,15 +0,0 @@
-export { CssEngine } from "./css-engine";
-export type {
-  AnyRule,
-  StyleRule,
-  MediaRule,
-  PlaintextRule,
-  FontFaceRule,
-} from "./rules";
-export * from "./create-css-engine";
-export * from "./to-value";
-export * from "./to-property";
-export * from "./match-media";
-export * from "./equal-media";
-export * from "./compare-media";
-export * from "./find-applicable-media";

package/src/core/match-media.ts

@@ -1,8 +0,0 @@
-import type { MediaRuleOptions } from "./rules";
-
-// This will match a breakpoint that has no min/max.
-export const matchMedia = (options: MediaRuleOptions, width: number) => {
-  const minWidth = options.minWidth ?? Number.MIN_SAFE_INTEGER;
-  const maxWidth = options.maxWidth ?? Number.MAX_SAFE_INTEGER;
-  return width >= minWidth && width <= maxWidth;
-};

package/src/core/rules.ts

@@ -1,182 +0,0 @@
-import type { Style, StyleProperty, StyleValue } from "@webstudio-is/css-data";
-import { toValue, type TransformValue } from "./to-value";
-import { toProperty } from "./to-property";
-
-class StylePropertyMap {
-  #styleMap: Map<StyleProperty, StyleValue | undefined> = new Map();
-  #isDirty = false;
-  #string = "";
-  #indent = 0;
-  #transformValue?: TransformValue;
-  onChange?: () => void;
-  constructor(transformValue?: TransformValue) {
-    this.#transformValue = transformValue;
-  }
-  setTransformer(transformValue: TransformValue) {
-    this.#transformValue = transformValue;
-  }
-  set(property: StyleProperty, value?: StyleValue) {
-    this.#styleMap.set(property, value);
-    this.#isDirty = true;
-    this.onChange?.();
-  }
-  has(property: StyleProperty) {
-    return this.#styleMap.has(property);
-  }
-  get size() {
-    return this.#styleMap.size;
-  }
-  keys() {
-    return this.#styleMap.keys();
-  }
-  delete(property: StyleProperty) {
-    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: Array<string> = [];
-    const spaces = " ".repeat(indent);
-    for (const [property, value] of this.#styleMap) {
-      if (value === undefined) {
-        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?: () => void;
-  constructor(
-    selectorText: string,
-    style: Style,
-    transformValue?: TransformValue
-  ) {
-    this.styleMap = new StylePropertyMap(transformValue);
-    this.selectorText = selectorText;
-    let property: StyleProperty;
-    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} {\n${this.styleMap.toString({
-      indent: options.indent + 2,
-    })}\n${spaces}}`;
-  }
-}
-
-export type MediaRuleOptions = {
-  minWidth?: number;
-  maxWidth?: number;
-  mediaType?: "all" | "screen" | "print";
-};
-
-export class MediaRule {
-  options: MediaRuleOptions;
-  rules: Array<StyleRule | PlaintextRule> = [];
-  #mediaType;
-  constructor(options: MediaRuleOptions = {}) {
-    this.options = options;
-    this.#mediaType = options.mediaType ?? "all";
-  }
-  insertRule(rule: StyleRule | PlaintextRule) {
-    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 !== undefined) {
-      conditionText = ` and (min-width: ${minWidth}px)`;
-    }
-    if (maxWidth !== undefined) {
-      conditionText += ` and (max-width: ${maxWidth}px)`;
-    }
-    return `@media ${this.#mediaType}${conditionText} {\n${rules.join(
-      "\n"
-    )}\n}`;
-  }
-}
-
-export class PlaintextRule {
-  cssText;
-  styleMap = new StylePropertyMap();
-  constructor(cssText: string) {
-    this.cssText = cssText;
-  }
-  toString() {
-    return this.cssText;
-  }
-}
-
-export type FontFaceOptions = {
-  fontFamily: string;
-  fontStyle?: "normal" | "italic" | "oblique";
-  fontWeight?: number | string;
-  fontDisplay: "swap" | "auto" | "block" | "fallback" | "optional";
-  src: string;
-};
-
-export class FontFaceRule {
-  options: FontFaceOptions;
-  constructor(options: FontFaceOptions) {
-    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 {\n  ${decls.join("; ")};\n}`;
-  }
-}
-
-export type AnyRule = StyleRule | MediaRule | PlaintextRule | FontFaceRule;

package/src/core/style-element.ts

@@ -1,38 +0,0 @@
-export class StyleElement {
-  #element?: HTMLStyleElement;
-  #name: string;
-  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 = undefined;
-    }
-  }
-  render(cssText: string) {
-    if (this.#element) {
-      this.#element.textContent = cssText;
-    }
-  }
-  setAttribute(name: string, value: string) {
-    if (this.#element) {
-      this.#element.setAttribute(name, value);
-    }
-  }
-  getAttribute(name: string) {
-    if (this.#element) {
-      return this.#element.getAttribute(name);
-    }
-  }
-}

package/src/core/style-sheet.ts

@@ -1,15 +0,0 @@
-import type { StyleElement } from "./style-element";
-
-export class StyleSheet {
-  #cssText = "";
-  #element;
-  constructor(element: StyleElement) {
-    this.#element = element;
-  }
-  replaceSync(cssText: string) {
-    if (cssText !== this.#cssText) {
-      this.#cssText = cssText;
-      this.#element.render(cssText);
-    }
-  }
-}

package/src/core/to-property.ts

@@ -1,12 +0,0 @@
-import type { StyleProperty } from "@webstudio-is/css-data";
-import hyphenate from "hyphenate-style-name";
-
-export const toProperty = (property: StyleProperty) => {
-  // Currently its a non-standard property and is only officially supported via -webkit- prefix.
-  // Safari illegally supports it without the prefix.
-  // https://caniuse.com/background-clip-text
-  if (property === "backgroundClip") {
-    return "-webkit-background-clip";
-  }
-  return hyphenate(property);
-};