@webstudio-is/css-engine 0.252.1 → 0.253.0

package/lib/index.js

@@ -678,12 +678,10 @@ var MediaRule = class {
   #name;
   options;
   rules;
-  #mediaType;
   constructor(name, options = {}) {
     this.#name = name;
     this.options = options;
     this.rules = /* @__PURE__ */ new Map();
-    this.#mediaType = options.mediaType ?? "all";
   }
   insertRule(rule) {
     this.rules.set(rule.cssText, rule);
@@ -720,7 +718,7 @@ var MediaRule = class {
       return "";
     }
     let conditionText = "";
-    const { minWidth, maxWidth, condition } = this.options;
+    const { minWidth, maxWidth, condition, mediaType = "all" } = this.options;
     if (condition !== void 0) {
       conditionText = ` and (${condition})`;
     } else {
@@ -731,10 +729,8 @@ var MediaRule = class {
         conditionText += ` and (max-width: ${maxWidth}px)`;
       }
     }
-    return `@media ${this.#mediaType}${conditionText} {
-${rules.join(
-      "\n"
-    )}
+    return `@media ${mediaType}${conditionText} {
+${rules.join("\n")}
 }`;
   }
 };
@@ -780,17 +776,21 @@ var FontFaceRule = class {
 };
 
 // src/core/compare-media.ts
+var isSimulatedCondition = (options) => options.mediaType !== void 0 && options.condition === void 0 && options.minWidth === void 0 && options.maxWidth === void 0;
+var isCondition = (options) => options.condition !== void 0 || isSimulatedCondition(options);
 var compareMedia = (optionA, optionB) => {
-  if (optionA.condition !== void 0 && optionB.condition !== void 0) {
-    return optionA.condition.localeCompare(optionB.condition);
+  const aIsCondition = isCondition(optionA);
+  const bIsCondition = isCondition(optionB);
+  if (aIsCondition && bIsCondition) {
+    return (optionA.condition ?? "").localeCompare(optionB.condition ?? "");
   }
-  if (optionA.condition !== void 0) {
+  if (aIsCondition) {
     if (optionB.minWidth === void 0 && optionB.maxWidth === void 0) {
       return 1;
     }
     return -1;
   }
-  if (optionB.condition !== void 0) {
+  if (bIsCondition) {
     if (optionA.minWidth === void 0 && optionA.maxWidth === void 0) {
       return -1;
     }

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

@@ -1,4 +1,4 @@
-export type { StyleMap, NestingRule, MediaRule, PlaintextRule, FontFaceRule, } from "./rules";
+export type { StyleMap, NestingRule, MediaRule, MediaRuleOptions, PlaintextRule, FontFaceRule, } from "./rules";
 export { prefixStyles } from "./prefixer";
 export { mergeStyles } from "./merger";
 export { generateStyleMap } from "./rules";

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

@@ -78,7 +78,7 @@ export type MediaRuleOptions = {
     minWidth?: number;
     maxWidth?: number;
     condition?: string;
-    mediaType?: "all" | "screen" | "print";
+    mediaType?: "all" | "not all" | "screen" | "print";
 };
 export declare class MediaRule {
     #private;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/css-engine",
-  "version": "0.252.1",
+  "version": "0.253.0",
   "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.252.1"
+    "@webstudio-is/fonts": "0.253.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.70",