@webstudio-is/css-engine 0.238.0 → 0.252.1

package/lib/index.js

@@ -720,12 +720,16 @@ var MediaRule = class {
       return "";
     }
     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)`;
+    const { minWidth, maxWidth, condition } = this.options;
+    if (condition !== void 0) {
+      conditionText = ` and (${condition})`;
+    } else {
+      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(
@@ -777,6 +781,21 @@ var FontFaceRule = class {
 
 // src/core/compare-media.ts
 var compareMedia = (optionA, optionB) => {
+  if (optionA.condition !== void 0 && optionB.condition !== void 0) {
+    return optionA.condition.localeCompare(optionB.condition);
+  }
+  if (optionA.condition !== void 0) {
+    if (optionB.minWidth === void 0 && optionB.maxWidth === void 0) {
+      return 1;
+    }
+    return -1;
+  }
+  if (optionB.condition !== void 0) {
+    if (optionA.minWidth === void 0 && optionA.maxWidth === void 0) {
+      return -1;
+    }
+    return 1;
+  }
   if (optionA.minWidth === void 0 && optionA.maxWidth === void 0) {
     return -1;
   }
@@ -831,6 +850,22 @@ var StyleElement = class {
     }
   }
 };
+var FakeStyleElement = class {
+  get isMounted() {
+    return false;
+  }
+  mount() {
+  }
+  unmount() {
+  }
+  render(_cssText) {
+  }
+  setAttribute(_name, _value) {
+  }
+  getAttribute(_name) {
+    return;
+  }
+};
 
 // src/core/style-sheet.ts
 var StyleSheet = class {
@@ -951,7 +986,7 @@ var StyleSheetRegular = class extends StyleSheet {
 
 // src/core/create-style-sheet.ts
 var createRegularStyleSheet = (options) => {
-  const element = new StyleElement(options?.name);
+  const element = options?.element ?? new StyleElement(options?.name);
   return new StyleSheetRegular(element);
 };
 
@@ -964,7 +999,7 @@ var matchMedia = (options, width) => {
 
 // src/core/equal-media.ts
 var equalMedia = (left, right) => {
-  return left.minWidth === right.minWidth && left.maxWidth === right.maxWidth;
+  return left.minWidth === right.minWidth && left.maxWidth === right.maxWidth && left.condition === right.condition;
 };
 
 // src/core/find-applicable-media.ts
@@ -1021,6 +1056,7 @@ var generateAtomic = (sheet, options) => {
 };
 export {
   ColorValue,
+  FakeStyleElement,
   FunctionValue,
   GuaranteedInvalidValue,
   ImageValue,

package/lib/types/core/compare-media.d.ts

@@ -1,6 +1,9 @@
 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.
+ * Sort media queries for CSS cascade order.
+ * Width-based: minWidth descending, then maxWidth ascending
+ * Custom conditions: sorted alphabetically, placed between base and width-based
+ *
+ * Note: minWidth/maxWidth and condition are mutually exclusive in MediaRuleOptions.
  */
 export declare const compareMedia: (optionA: MediaRuleOptions, optionB: MediaRuleOptions) => number;

package/lib/types/core/create-style-sheet.d.ts

@@ -1,4 +1,6 @@
 import { StyleSheetRegular } from "./style-sheet-regular";
+import { StyleElement, FakeStyleElement } from "./style-element";
 export declare const createRegularStyleSheet: (options?: {
     name?: string;
+    element?: StyleElement | FakeStyleElement;
 }) => StyleSheetRegular;

package/lib/types/core/equal-media.d.ts

@@ -1,2 +1,6 @@
 import type { MediaRuleOptions } from "./rules";
+/**
+ * Compare two media query options for equality.
+ * Note: minWidth/maxWidth and condition are mutually exclusive.
+ */
 export declare const equalMedia: (left: MediaRuleOptions, right: MediaRuleOptions) => boolean;

package/lib/types/core/find-applicable-media.d.ts

@@ -1,2 +1,7 @@
 import type { MediaRuleOptions } from "./rules";
+/**
+ * Find the applicable media rule that matches the given width.
+ * Only matches width-based breakpoints (minWidth/maxWidth).
+ * Custom condition breakpoints are not matched by this function.
+ */
 export declare const findApplicableMedia: <Media extends MediaRuleOptions>(media: Array<Media>, width: number) => Media | undefined;

package/lib/types/core/index.d.ts

@@ -4,6 +4,7 @@ export { mergeStyles } from "./merger";
 export { generateStyleMap } from "./rules";
 export type { StyleSheetRegular } from "./style-sheet-regular";
 export * from "./create-style-sheet";
+export { FakeStyleElement } from "./style-element";
 export * from "./to-value";
 export { hyphenateProperty } from "./to-property";
 export * from "./match-media";

package/lib/types/core/match-media.d.ts

@@ -1,2 +1,7 @@
 import type { MediaRuleOptions } from "./rules";
+/**
+ * Check if a media query matches a given width.
+ * Only applies to width-based breakpoints (minWidth/maxWidth).
+ * Custom condition breakpoints are not matched by this function.
+ */
 export declare const matchMedia: (options: MediaRuleOptions, width: number) => boolean;

package/lib/types/core/rules.d.ts

@@ -68,9 +68,16 @@ export declare class NestingRule {
         transformValue?: TransformValue;
     }): string;
 }
+/**
+ * Options for media queries.
+ * Note: minWidth/maxWidth and condition are mutually exclusive.
+ * If condition is set, minWidth and maxWidth must be undefined.
+ * If minWidth or maxWidth is set, condition must be undefined.
+ */
 export type MediaRuleOptions = {
     minWidth?: number;
     maxWidth?: number;
+    condition?: string;
     mediaType?: "all" | "screen" | "print";
 };
 export declare class MediaRule {

package/lib/types/core/rules.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/types/core/style-element.d.ts

@@ -8,3 +8,15 @@ export declare class StyleElement {
     setAttribute(name: string, value: string): void;
     getAttribute(name: string): string | null | undefined;
 }
+/**
+ * A fake style element that does nothing.
+ * Useful for testing stylesheets without DOM.
+ */
+export declare class FakeStyleElement {
+    get isMounted(): boolean;
+    mount(): void;
+    unmount(): void;
+    render(_cssText: string): void;
+    setAttribute(_name: string, _value: string): void;
+    getAttribute(_name: string): void;
+}

package/lib/types/core/style-sheet.d.ts

@@ -1,10 +1,10 @@
 import { MediaRule, MixinRule, NestingRule, PlaintextRule, type FontFaceOptions, type MediaRuleOptions } from "./rules";
-import { StyleElement } from "./style-element";
+import { StyleElement, FakeStyleElement } from "./style-element";
 import type { TransformValue } from "./to-value";
 export declare class StyleSheet {
     #private;
     nestingRules: Map<string, NestingRule>;
-    constructor(element: StyleElement);
+    constructor(element: StyleElement | FakeStyleElement);
     setTransformer(transformValue: TransformValue): void;
     addMediaRule(id: string, options?: MediaRuleOptions): MediaRule;
     addPlaintextRule(cssText: string): PlaintextRule | Map<string, PlaintextRule>;
@@ -20,5 +20,5 @@ export declare class StyleSheet {
     render(): void;
     unmount(): void;
     setAttribute(name: string, value: string): void;
-    getAttribute(name: string): string | null | undefined;
+    getAttribute(name: string): string | void | null;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/css-engine",
-  "version": "0.238.0",
+  "version": "0.252.1",
   "description": "CSS Renderer for Webstudio",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -8,7 +8,7 @@
   "dependencies": {
     "@emotion/hash": "^0.9.2",
     "zod": "^3.24.2",
-    "@webstudio-is/fonts": "0.238.0"
+    "@webstudio-is/fonts": "0.252.1"
   },
   "devDependencies": {
     "@types/react": "^18.2.70",
@@ -38,7 +38,7 @@
   "private": false,
   "sideEffects": false,
   "scripts": {
-    "typecheck": "tsc",
+    "typecheck": "tsgo --noEmit",
     "build": "rm -rf lib && esbuild src/index.ts --outdir=lib --bundle --format=esm --packages=external && esbuild src/runtime.ts --outdir=lib --bundle --format=esm --packages=external",
     "dts": "tsc --project tsconfig.dts.json",
     "test": "vitest run"