@webstudio-is/css-engine 0.50.0 → 0.51.0

package/lib/cjs/core/index.cjs

@@ -25,3 +25,4 @@ module.exports = __toCommonJS(core_exports);
 var import_css_engine = require("./css-engine");
 __reExport(core_exports, require("./create-css-engine"), module.exports);
 __reExport(core_exports, require("./to-value"), module.exports);
+__reExport(core_exports, require("./match-media"), module.exports);

package/lib/cjs/core/match-media.cjs

@@ -0,0 +1,28 @@
+"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 match_media_exports = {};
+__export(match_media_exports, {
+  matchMedia: () => matchMedia
+});
+module.exports = __toCommonJS(match_media_exports);
+const matchMedia = (options, width) => {
+  const minWidth = options.minWidth ?? Number.MIN_SAFE_INTEGER;
+  const maxWidth = options.maxWidth ?? Number.MAX_SAFE_INTEGER;
+  return width >= minWidth && width <= maxWidth;
+};

package/lib/cjs/core/rules.cjs

@@ -119,6 +119,7 @@ class MediaRule {
   // 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.
+  // @todo remove this once we have ability to control order from the UI
   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);
@@ -139,15 +140,12 @@ class MediaRule {
     let conditionText = "";
     const { minWidth, maxWidth } = this.options;
     if (minWidth !== void 0) {
-      conditionText = `min-width: ${minWidth}px`;
+      conditionText = ` and (min-width: ${minWidth}px)`;
     }
     if (maxWidth !== void 0) {
-      conditionText = `max-width: ${maxWidth}px`;
+      conditionText += ` and (max-width: ${maxWidth}px)`;
     }
-    if (conditionText) {
-      conditionText = `and (${conditionText}) `;
-    }
-    return `@media ${__privateGet(this, _mediaType)} ${conditionText}{
+    return `@media ${__privateGet(this, _mediaType)}${conditionText} {
 ${rules.join(
       "\n"
     )}

package/lib/core/index.js

@@ -1,6 +1,7 @@
 import { CssEngine } from "./css-engine";
 export * from "./create-css-engine";
 export * from "./to-value";
+export * from "./match-media";
 export {
   CssEngine
 };

package/lib/core/match-media.js

@@ -0,0 +1,8 @@
+const matchMedia = (options, width) => {
+  const minWidth = options.minWidth ?? Number.MIN_SAFE_INTEGER;
+  const maxWidth = options.maxWidth ?? Number.MAX_SAFE_INTEGER;
+  return width >= minWidth && width <= maxWidth;
+};
+export {
+  matchMedia
+};

package/lib/core/rules.js

@@ -93,6 +93,7 @@ class MediaRule {
   // 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.
+  // @todo remove this once we have ability to control order from the UI
   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);
@@ -113,15 +114,12 @@ class MediaRule {
     let conditionText = "";
     const { minWidth, maxWidth } = this.options;
     if (minWidth !== void 0) {
-      conditionText = `min-width: ${minWidth}px`;
+      conditionText = ` and (min-width: ${minWidth}px)`;
     }
     if (maxWidth !== void 0) {
-      conditionText = `max-width: ${maxWidth}px`;
+      conditionText += ` and (max-width: ${maxWidth}px)`;
     }
-    if (conditionText) {
-      conditionText = `and (${conditionText}) `;
-    }
-    return `@media ${__privateGet(this, _mediaType)} ${conditionText}{
+    return `@media ${__privateGet(this, _mediaType)}${conditionText} {
 ${rules.join(
       "\n"
     )}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/css-engine",
-  "version": "0.50.0",
+  "version": "0.51.0",
   "description": "CSS Renderer for Webstudio",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -9,7 +9,7 @@
     "hyphenate-style-name": "^1.0.4",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "@webstudio-is/fonts": "^0.50.0"
+    "@webstudio-is/fonts": "^0.51.0"
   },
   "devDependencies": {
     "@jest/globals": "^29.3.1",
@@ -19,7 +19,7 @@
     "@types/react-dom": "^17.0.9",
     "jest": "^29.3.1",
     "typescript": "4.9.5",
-    "@webstudio-is/css-data": "^0.50.0",
+    "@webstudio-is/css-data": "^0.51.0",
     "@webstudio-is/jest-config": "^1.0.2",
     "@webstudio-is/scripts": "^0.0.0",
     "@webstudio-is/storybook-config": "^0.0.0",

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

@@ -29,6 +29,45 @@ describe("CssEngine", () => {
 
   beforeEach(reset);
 
+  test("minWidth media rule", () => {
+    engine.addMediaRule("0", { minWidth: 0 });
+    engine.addStyleRule(".c1", {
+      style: { color: { type: "keyword", value: "red" } },
+      breakpoint: "0",
+    });
+    expect(engine.cssText).toMatchInlineSnapshot(`
+      "@media all and (min-width: 0px) {
+        .c1 { color: red }
+      }"
+    `);
+  });
+
+  test("maxWidth media rule", () => {
+    engine.addMediaRule("0", { maxWidth: 1000 });
+    engine.addStyleRule(".c1", {
+      style: { color: { type: "keyword", value: "red" } },
+      breakpoint: "0",
+    });
+    expect(engine.cssText).toMatchInlineSnapshot(`
+      "@media all and (max-width: 1000px) {
+        .c1 { color: red }
+      }"
+    `);
+  });
+
+  test("maxWidth and maxWith media rule", () => {
+    engine.addMediaRule("0", { maxWidth: 1000, minWidth: 360 });
+    engine.addStyleRule(".c1", {
+      style: { color: { type: "keyword", value: "red" } },
+      breakpoint: "0",
+    });
+    expect(engine.cssText).toMatchInlineSnapshot(`
+      "@media all and (min-width: 360px) and (max-width: 1000px) {
+        .c1 { color: red }
+      }"
+    `);
+  });
+
   test("use default media rule when there is no matching one registered", () => {
     engine.addStyleRule(".c", {
       style: style0,

package/src/core/index.ts

@@ -8,3 +8,4 @@ export type {
 } from "./rules";
 export * from "./create-css-engine";
 export * from "./to-value";
+export * from "./match-media";

package/src/core/match-media.test.ts

@@ -0,0 +1,24 @@
+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/src/core/match-media.ts

@@ -0,0 +1,7 @@
+import type { MediaRuleOptions } from "./rules";
+
+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

@@ -76,6 +76,7 @@ export class MediaRule {
   // 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.
+  // @todo remove this once we have ability to control order from the UI
   static sort(mediaRules: Iterable<MediaRule>) {
     return Array.from(mediaRules).sort((ruleA, ruleB) => {
       return (
@@ -106,15 +107,12 @@ export class MediaRule {
     let conditionText = "";
     const { minWidth, maxWidth } = this.options;
     if (minWidth !== undefined) {
-      conditionText = `min-width: ${minWidth}px`;
+      conditionText = ` and (min-width: ${minWidth}px)`;
     }
     if (maxWidth !== undefined) {
-      conditionText = `max-width: ${maxWidth}px`;
+      conditionText += ` and (max-width: ${maxWidth}px)`;
     }
-    if (conditionText) {
-      conditionText = `and (${conditionText}) `;
-    }
-    return `@media ${this.#mediaType} ${conditionText}{\n${rules.join(
+    return `@media ${this.#mediaType}${conditionText} {\n${rules.join(
       "\n"
     )}\n}`;
   }