@webstudio-is/css-engine 0.4.0 → 0.15.0

package/lib/cjs/core/css-engine.cjs

@@ -81,8 +81,9 @@ class CssEngine {
   }
   addPlaintextRule(cssText) {
     const rule = __privateGet(this, _plainRules).get(cssText);
-    if (rule !== void 0)
+    if (rule !== void 0) {
       return rule;
+    }
     __privateSet(this, _isDirty, true);
     return __privateGet(this, _plainRules).set(cssText, new import_rules.PlaintextRule(cssText));
   }
@@ -113,10 +114,11 @@ class CssEngine {
     for (const plaintextRule of __privateGet(this, _plainRules).values()) {
       css.push(plaintextRule.cssText);
     }
-    for (const mediaRule of __privateGet(this, _mediaRules).values()) {
+    for (const mediaRule of import_rules.MediaRule.sort(__privateGet(this, _mediaRules).values())) {
       const { cssText } = mediaRule;
-      if (cssText !== "")
+      if (cssText !== "") {
         css.push(cssText);
+      }
     }
     __privateSet(this, _cssText, css.join("\n"));
     return __privateGet(this, _cssText);

package/lib/cjs/core/rules.cjs

@@ -50,7 +50,7 @@ __export(rules_exports, {
 module.exports = __toCommonJS(rules_exports);
 var import_hyphenate_style_name = __toESM(require("hyphenate-style-name"), 1);
 var import_to_value = require("./to-value");
-var _styleMap, _isDirty, _string, _onChange, _options, _mediaType, _options2;
+var _styleMap, _isDirty, _string, _onChange, _mediaType;
 class StylePropertyMap {
   constructor() {
     __privateAdd(this, _styleMap, /* @__PURE__ */ new Map());
@@ -76,8 +76,9 @@ class StylePropertyMap {
     }
     const block = [];
     for (const [property, value] of __privateGet(this, _styleMap)) {
-      if (value === void 0)
+      if (value === void 0) {
         continue;
+      }
       block.push(`${(0, import_hyphenate_style_name.default)(property)}: ${(0, import_to_value.toValue)(value)}`);
     }
     __privateSet(this, _string, block.join("; "));
@@ -108,31 +109,39 @@ class StyleRule {
 _onChange = new WeakMap();
 class MediaRule {
   constructor(options = {}) {
-    __privateAdd(this, _options, void 0);
     this.rules = [];
     __privateAdd(this, _mediaType, void 0);
-    __privateSet(this, _options, options);
+    this.options = options;
     __privateSet(this, _mediaType, options.mediaType ?? "all");
   }
+  static sort(mediaRules) {
+    return Array.from(mediaRules).sort((ruleA, ruleB) => {
+      return (ruleA.options.minWidth ?? -Number.MAX_SAFE_INTEGER) - (ruleB.options.minWidth ?? -Number.MAX_SAFE_INTEGER);
+    });
+  }
   insertRule(rule) {
     this.rules.push(rule);
     return rule;
   }
   get cssText() {
-    if (this.rules.length === 0)
+    if (this.rules.length === 0) {
       return "";
+    }
     const rules = [];
     for (const rule of this.rules) {
       rules.push(`  ${rule.cssText}`);
     }
     let conditionText = "";
-    const { minWidth, maxWidth } = __privateGet(this, _options);
-    if (minWidth !== void 0)
+    const { minWidth, maxWidth } = this.options;
+    if (minWidth !== void 0) {
       conditionText = `min-width: ${minWidth}px`;
-    if (maxWidth !== void 0)
+    }
+    if (maxWidth !== void 0) {
       conditionText = `max-width: ${maxWidth}px`;
-    if (conditionText)
+    }
+    if (conditionText) {
       conditionText = `and (${conditionText}) `;
+    }
     return `@media ${__privateGet(this, _mediaType)} ${conditionText}{
 ${rules.join(
       "\n"
@@ -140,7 +149,6 @@ ${rules.join(
 }`;
   }
 }
-_options = new WeakMap();
 _mediaType = new WeakMap();
 class PlaintextRule {
   constructor(cssText) {
@@ -150,14 +158,12 @@ class PlaintextRule {
 }
 class FontFaceRule {
   constructor(options) {
-    __privateAdd(this, _options2, void 0);
-    __privateSet(this, _options2, options);
+    this.options = options;
   }
   get cssText() {
-    const { fontFamily, fontStyle, fontWeight, fontDisplay, src } = __privateGet(this, _options2);
+    const { fontFamily, fontStyle, fontWeight, fontDisplay, src } = this.options;
     return `@font-face {
   font-family: ${fontFamily}; font-style: ${fontStyle}; font-weight: ${fontWeight}; font-display: ${fontDisplay}; src: ${src};
 }`;
   }
 }
-_options2 = new WeakMap();

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

@@ -25,9 +25,13 @@ var import_fonts = require("@webstudio-is/fonts");
 const defaultOptions = {
   withFallback: true
 };
+const assertUnreachable = (_arg, errorMessage) => {
+  throw new Error(errorMessage);
+};
 const toValue = (value, options = defaultOptions) => {
-  if (value === void 0)
+  if (value === void 0) {
     return "";
+  }
   if (value.type === "unit") {
     return value.value + (value.unit === "number" ? "" : value.unit);
   }
@@ -50,5 +54,18 @@ const toValue = (value, options = defaultOptions) => {
     const fallbacksString = fallbacks.length > 0 ? `, ${fallbacks.join(", ")}` : "";
     return `var(--${value.value}${fallbacksString})`;
   }
-  return value.value;
+  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})`;
+  }
+  assertUnreachable(value, `Unknown value type`);
+  throw new Error("Unknown value type");
 };

package/lib/core/css-engine.js

@@ -63,8 +63,9 @@ class CssEngine {
   }
   addPlaintextRule(cssText) {
     const rule = __privateGet(this, _plainRules).get(cssText);
-    if (rule !== void 0)
+    if (rule !== void 0) {
       return rule;
+    }
     __privateSet(this, _isDirty, true);
     return __privateGet(this, _plainRules).set(cssText, new PlaintextRule(cssText));
   }
@@ -95,10 +96,11 @@ class CssEngine {
     for (const plaintextRule of __privateGet(this, _plainRules).values()) {
       css.push(plaintextRule.cssText);
     }
-    for (const mediaRule of __privateGet(this, _mediaRules).values()) {
+    for (const mediaRule of MediaRule.sort(__privateGet(this, _mediaRules).values())) {
       const { cssText } = mediaRule;
-      if (cssText !== "")
+      if (cssText !== "") {
         css.push(cssText);
+      }
     }
     __privateSet(this, _cssText, css.join("\n"));
     return __privateGet(this, _cssText);

package/lib/core/rules.js

@@ -16,7 +16,7 @@ var __privateSet = (obj, member, value, setter) => {
   setter ? setter.call(obj, value) : member.set(obj, value);
   return value;
 };
-var _styleMap, _isDirty, _string, _onChange, _options, _mediaType, _options2;
+var _styleMap, _isDirty, _string, _onChange, _mediaType;
 import hyphenate from "hyphenate-style-name";
 import { toValue } from "./to-value";
 class StylePropertyMap {
@@ -44,8 +44,9 @@ class StylePropertyMap {
     }
     const block = [];
     for (const [property, value] of __privateGet(this, _styleMap)) {
-      if (value === void 0)
+      if (value === void 0) {
         continue;
+      }
       block.push(`${hyphenate(property)}: ${toValue(value)}`);
     }
     __privateSet(this, _string, block.join("; "));
@@ -76,31 +77,39 @@ class StyleRule {
 _onChange = new WeakMap();
 class MediaRule {
   constructor(options = {}) {
-    __privateAdd(this, _options, void 0);
     this.rules = [];
     __privateAdd(this, _mediaType, void 0);
-    __privateSet(this, _options, options);
+    this.options = options;
     __privateSet(this, _mediaType, options.mediaType ?? "all");
   }
+  static sort(mediaRules) {
+    return Array.from(mediaRules).sort((ruleA, ruleB) => {
+      return (ruleA.options.minWidth ?? -Number.MAX_SAFE_INTEGER) - (ruleB.options.minWidth ?? -Number.MAX_SAFE_INTEGER);
+    });
+  }
   insertRule(rule) {
     this.rules.push(rule);
     return rule;
   }
   get cssText() {
-    if (this.rules.length === 0)
+    if (this.rules.length === 0) {
       return "";
+    }
     const rules = [];
     for (const rule of this.rules) {
       rules.push(`  ${rule.cssText}`);
     }
     let conditionText = "";
-    const { minWidth, maxWidth } = __privateGet(this, _options);
-    if (minWidth !== void 0)
+    const { minWidth, maxWidth } = this.options;
+    if (minWidth !== void 0) {
       conditionText = `min-width: ${minWidth}px`;
-    if (maxWidth !== void 0)
+    }
+    if (maxWidth !== void 0) {
       conditionText = `max-width: ${maxWidth}px`;
-    if (conditionText)
+    }
+    if (conditionText) {
       conditionText = `and (${conditionText}) `;
+    }
     return `@media ${__privateGet(this, _mediaType)} ${conditionText}{
 ${rules.join(
       "\n"
@@ -108,7 +117,6 @@ ${rules.join(
 }`;
   }
 }
-_options = new WeakMap();
 _mediaType = new WeakMap();
 class PlaintextRule {
   constructor(cssText) {
@@ -118,17 +126,15 @@ class PlaintextRule {
 }
 class FontFaceRule {
   constructor(options) {
-    __privateAdd(this, _options2, void 0);
-    __privateSet(this, _options2, options);
+    this.options = options;
   }
   get cssText() {
-    const { fontFamily, fontStyle, fontWeight, fontDisplay, src } = __privateGet(this, _options2);
+    const { fontFamily, fontStyle, fontWeight, fontDisplay, src } = this.options;
     return `@font-face {
   font-family: ${fontFamily}; font-style: ${fontStyle}; font-weight: ${fontWeight}; font-display: ${fontDisplay}; src: ${src};
 }`;
   }
 }
-_options2 = new WeakMap();
 export {
   FontFaceRule,
   MediaRule,

package/lib/core/to-value.js

@@ -2,9 +2,13 @@ import { DEFAULT_FONT_FALLBACK, SYSTEM_FONTS } from "@webstudio-is/fonts";
 const defaultOptions = {
   withFallback: true
 };
+const assertUnreachable = (_arg, errorMessage) => {
+  throw new Error(errorMessage);
+};
 const toValue = (value, options = defaultOptions) => {
-  if (value === void 0)
+  if (value === void 0) {
     return "";
+  }
   if (value.type === "unit") {
     return value.value + (value.unit === "number" ? "" : value.unit);
   }
@@ -27,7 +31,20 @@ const toValue = (value, options = defaultOptions) => {
     const fallbacksString = fallbacks.length > 0 ? `, ${fallbacks.join(", ")}` : "";
     return `var(--${value.value}${fallbacksString})`;
   }
-  return value.value;
+  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})`;
+  }
+  assertUnreachable(value, `Unknown value type`);
+  throw new Error("Unknown value type");
 };
 export {
   toValue

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/css-engine",
-  "version": "0.4.0",
+  "version": "0.15.0",
   "description": "CSS Renderer for Webstudio",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",

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

@@ -5,16 +5,25 @@ const style0 = {
 } as const;
 
 const mediaRuleOptions0 = { minWidth: 0 } as const;
-const mediaId = "0";
+const mediaId0 = "0";
+
+const style1 = {
+  display: { type: "keyword", value: "flex" },
+} as const;
+
+const mediaRuleOptions1 = { minWidth: 300 } as const;
+const mediaId1 = "1";
 
 describe("CssEngine", () => {
   let engine: CssEngine;
 
-  beforeEach(() => {
+  const reset = () => {
     engine = new CssEngine();
-  });
+  };
 
-  test("use default media rule when there is no matching one registrered", () => {
+  beforeEach(reset);
+
+  test("use default media rule when there is no matching one registered", () => {
     engine.addStyleRule(".c", {
       style: style0,
       breakpoint: "x",
@@ -35,10 +44,10 @@ describe("CssEngine", () => {
       }"
     `);
 
-    engine.addMediaRule(mediaId, mediaRuleOptions0);
+    engine.addMediaRule(mediaId0, mediaRuleOptions0);
     engine.addStyleRule(".c1", {
       style: { color: { type: "keyword", value: "blue" } },
-      breakpoint: mediaId,
+      breakpoint: mediaId0,
     });
     // Default media query should allways be the first to have the lowest source order specificity
     expect(engine.cssText).toMatchInlineSnapshot(`
@@ -52,8 +61,74 @@ describe("CssEngine", () => {
     `);
   });
 
+  test("sort media queries based on lower min-width", () => {
+    engine.addMediaRule(mediaId1, mediaRuleOptions1);
+    engine.addStyleRule(".c2", {
+      style: style1,
+      breakpoint: mediaId1,
+    });
+
+    engine.addMediaRule(mediaId0, mediaRuleOptions0);
+    engine.addStyleRule(".c1", {
+      style: style0,
+      breakpoint: mediaId0,
+    });
+
+    engine.addStyleRule(".c3", {
+      style: style0,
+      breakpoint: "x",
+    });
+
+    // Default media query should allways be the first to have the lowest source order specificity
+    expect(engine.cssText).toMatchInlineSnapshot(`
+      "@media all {
+        .c3 { display: block }
+      }
+      @media all and (min-width: 0px) {
+        .c1 { display: block }
+      }
+      @media all and (min-width: 300px) {
+        .c2 { display: flex }
+      }"
+    `);
+  });
+
+  test("keep the sort order when minWidth is not defined", () => {
+    engine.addStyleRule(".c0", {
+      style: style0,
+      breakpoint: "x",
+    });
+    engine.addStyleRule(".c1", {
+      style: style1,
+      breakpoint: "x",
+    });
+    expect(engine.cssText).toMatchInlineSnapshot(`
+      "@media all {
+        .c0 { display: block }
+        .c1 { display: flex }
+      }"
+    `);
+
+    reset();
+
+    engine.addStyleRule(".c1", {
+      style: style1,
+      breakpoint: "x",
+    });
+    engine.addStyleRule(".c0", {
+      style: style0,
+      breakpoint: "x",
+    });
+    expect(engine.cssText).toMatchInlineSnapshot(`
+      "@media all {
+        .c1 { display: flex }
+        .c0 { display: block }
+      }"
+    `);
+  });
+
   test("rule with multiple properties", () => {
-    engine.addMediaRule(mediaId, mediaRuleOptions0);
+    engine.addMediaRule(mediaId0, mediaRuleOptions0);
     engine.addStyleRule(".c", {
       style: {
         ...style0,
@@ -69,7 +144,7 @@ describe("CssEngine", () => {
   });
 
   test("hyphenate property", () => {
-    engine.addMediaRule(mediaId, mediaRuleOptions0);
+    engine.addMediaRule(mediaId0, mediaRuleOptions0);
     engine.addStyleRule(".c", {
       style: {
         backgroundColor: { type: "keyword", value: "red" },
@@ -84,7 +159,7 @@ describe("CssEngine", () => {
   });
 
   test("add rule", () => {
-    engine.addMediaRule(mediaId, mediaRuleOptions0);
+    engine.addMediaRule(mediaId0, mediaRuleOptions0);
     const rule1 = engine.addStyleRule(".c", {
       style: {
         ...style0,
@@ -116,7 +191,7 @@ describe("CssEngine", () => {
   });
 
   test("update rule", () => {
-    engine.addMediaRule(mediaId, mediaRuleOptions0);
+    engine.addMediaRule(mediaId0, mediaRuleOptions0);
     const rule = engine.addStyleRule(".c", {
       style: {
         ...style0,
@@ -147,7 +222,7 @@ describe("CssEngine", () => {
   });
 
   test("don't override media queries", () => {
-    engine.addMediaRule(mediaId, mediaRuleOptions0);
+    engine.addMediaRule(mediaId0, mediaRuleOptions0);
     engine.addStyleRule(".c", {
       style: style0,
       breakpoint: "0",
@@ -157,7 +232,7 @@ describe("CssEngine", () => {
         .c { display: block }
       }"
     `);
-    engine.addMediaRule(mediaId, mediaRuleOptions0);
+    engine.addMediaRule(mediaId0, mediaRuleOptions0);
     expect(engine.cssText).toMatchInlineSnapshot(`
       "@media all and (min-width: 0px) {
         .c { display: block }

package/src/core/css-engine.ts

@@ -47,7 +47,9 @@ export class CssEngine {
   }
   addPlaintextRule(cssText: string) {
     const rule = this.#plainRules.get(cssText);
-    if (rule !== undefined) return rule;
+    if (rule !== undefined) {
+      return rule;
+    }
     this.#isDirty = true;
     return this.#plainRules.set(cssText, new PlaintextRule(cssText));
   }
@@ -80,9 +82,11 @@ export class CssEngine {
     for (const plaintextRule of this.#plainRules.values()) {
       css.push(plaintextRule.cssText);
     }
-    for (const mediaRule of this.#mediaRules.values()) {
+    for (const mediaRule of MediaRule.sort(this.#mediaRules.values())) {
       const { cssText } = mediaRule;
-      if (cssText !== "") css.push(cssText);
+      if (cssText !== "") {
+        css.push(cssText);
+      }
     }
     this.#cssText = css.join("\n");
     return this.#cssText;

package/src/core/rules.ts

@@ -26,7 +26,9 @@ class StylePropertyMap {
     }
     const block: Array<string> = [];
     for (const [property, value] of this.#styleMap) {
-      if (value === undefined) continue;
+      if (value === undefined) {
+        continue;
+      }
       block.push(`${hyphenate(property)}: ${toValue(value)}`);
     }
     this.#string = block.join("; ");
@@ -63,11 +65,22 @@ export type MediaRuleOptions = {
 };
 
 export class MediaRule {
-  #options: MediaRuleOptions;
+  // Sort media rules by minWidth.
+  // Needed to ensure that more specific media rules are inserted after less specific ones.
+  // So that they get a higher specificity.
+  static sort(mediaRules: Iterable<MediaRule>) {
+    return Array.from(mediaRules).sort((ruleA, ruleB) => {
+      return (
+        (ruleA.options.minWidth ?? -Number.MAX_SAFE_INTEGER) -
+        (ruleB.options.minWidth ?? -Number.MAX_SAFE_INTEGER)
+      );
+    });
+  }
+  options: MediaRuleOptions;
   rules: Array<StyleRule | PlaintextRule> = [];
   #mediaType;
   constructor(options: MediaRuleOptions = {}) {
-    this.#options = options;
+    this.options = options;
     this.#mediaType = options.mediaType ?? "all";
   }
   insertRule(rule: StyleRule | PlaintextRule) {
@@ -75,16 +88,24 @@ export class MediaRule {
     return rule;
   }
   get cssText() {
-    if (this.rules.length === 0) return "";
+    if (this.rules.length === 0) {
+      return "";
+    }
     const rules = [];
     for (const rule of this.rules) {
       rules.push(`  ${rule.cssText}`);
     }
     let conditionText = "";
-    const { minWidth, maxWidth } = this.#options;
-    if (minWidth !== undefined) conditionText = `min-width: ${minWidth}px`;
-    if (maxWidth !== undefined) conditionText = `max-width: ${maxWidth}px`;
-    if (conditionText) conditionText = `and (${conditionText}) `;
+    const { minWidth, maxWidth } = this.options;
+    if (minWidth !== undefined) {
+      conditionText = `min-width: ${minWidth}px`;
+    }
+    if (maxWidth !== undefined) {
+      conditionText = `max-width: ${maxWidth}px`;
+    }
+    if (conditionText) {
+      conditionText = `and (${conditionText}) `;
+    }
     return `@media ${this.#mediaType} ${conditionText}{\n${rules.join(
       "\n"
     )}\n}`;
@@ -108,13 +129,13 @@ export type FontFaceOptions = {
 };
 
 export class FontFaceRule {
-  #options: FontFaceOptions;
+  options: FontFaceOptions;
   constructor(options: FontFaceOptions) {
-    this.#options = options;
+    this.options = options;
   }
   get cssText() {
     const { fontFamily, fontStyle, fontWeight, fontDisplay, src } =
-      this.#options;
+      this.options;
     return `@font-face {\n  font-family: ${fontFamily}; font-style: ${fontStyle}; font-weight: ${fontWeight}; font-display: ${fontDisplay}; src: ${src};\n}`;
   }
 }

package/src/core/to-value.ts

@@ -9,11 +9,18 @@ const defaultOptions = {
   withFallback: true,
 };
 
+// exhaustive check, should never happen in runtime as ts would give error
+const assertUnreachable = (_arg: never, errorMessage: string) => {
+  throw new Error(errorMessage);
+};
+
 export const toValue = (
   value?: StyleValue,
   options: ToCssOptions = defaultOptions
 ): string => {
-  if (value === undefined) return "";
+  if (value === undefined) {
+    return "";
+  }
   if (value.type === "unit") {
     return value.value + (value.unit === "number" ? "" : value.unit);
   }
@@ -37,5 +44,26 @@ export const toValue = (
       fallbacks.length > 0 ? `, ${fallbacks.join(", ")}` : "";
     return `var(--${value.value}${fallbacksString})`;
   }
-  return value.value;
+
+  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})`;
+  }
+
+  // Will give ts error in case of missing type
+  assertUnreachable(value, `Unknown value type`);
+
+  // Will never happen
+  throw new Error("Unknown value type");
 };