@webstudio-is/css-engine 0.4.1 → 0.15.0

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

@@ -114,7 +114,7 @@ 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 !== "") {
         css.push(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());
@@ -109,12 +109,16 @@ 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;
@@ -128,7 +132,7 @@ class MediaRule {
       rules.push(`  ${rule.cssText}`);
     }
     let conditionText = "";
-    const { minWidth, maxWidth } = __privateGet(this, _options);
+    const { minWidth, maxWidth } = this.options;
     if (minWidth !== void 0) {
       conditionText = `min-width: ${minWidth}px`;
     }
@@ -145,7 +149,6 @@ ${rules.join(
 }`;
   }
 }
-_options = new WeakMap();
 _mediaType = new WeakMap();
 class PlaintextRule {
   constructor(cssText) {
@@ -155,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,6 +25,9 @@ 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) {
     return "";
@@ -51,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

@@ -96,7 +96,7 @@ 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 !== "") {
         css.push(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 {
@@ -77,12 +77,16 @@ 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;
@@ -96,7 +100,7 @@ class MediaRule {
       rules.push(`  ${rule.cssText}`);
     }
     let conditionText = "";
-    const { minWidth, maxWidth } = __privateGet(this, _options);
+    const { minWidth, maxWidth } = this.options;
     if (minWidth !== void 0) {
       conditionText = `min-width: ${minWidth}px`;
     }
@@ -113,7 +117,6 @@ ${rules.join(
 }`;
   }
 }
-_options = new WeakMap();
 _mediaType = new WeakMap();
 class PlaintextRule {
   constructor(cssText) {
@@ -123,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,6 +2,9 @@ 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) {
     return "";
@@ -28,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.1",
+  "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

@@ -82,7 +82,7 @@ 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);

package/src/core/rules.ts

@@ -65,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) {
@@ -85,7 +96,7 @@ export class MediaRule {
       rules.push(`  ${rule.cssText}`);
     }
     let conditionText = "";
-    const { minWidth, maxWidth } = this.#options;
+    const { minWidth, maxWidth } = this.options;
     if (minWidth !== undefined) {
       conditionText = `min-width: ${minWidth}px`;
     }
@@ -118,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,6 +9,11 @@ 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
@@ -39,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");
 };