@webstudio-is/css-engine 0.51.0 → 0.52.0

package/lib/cjs/core/compare-media.js

@@ -0,0 +1,32 @@
+"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 compare_media_exports = {};
+__export(compare_media_exports, {
+  compareMedia: () => compareMedia
+});
+module.exports = __toCommonJS(compare_media_exports);
+const compareMedia = (optionA, optionB) => {
+  if (optionA?.minWidth !== void 0 && optionB?.minWidth !== void 0) {
+    return optionA.minWidth - optionB.minWidth;
+  }
+  if (optionA?.maxWidth !== void 0 && optionB?.maxWidth !== void 0) {
+    return optionB.maxWidth - optionA.maxWidth;
+  }
+  return "minWidth" in optionA ? 1 : -1;
+};

package/lib/cjs/core/{css-engine.cjs → css-engine.js}

@@ -40,6 +40,7 @@ __export(css_engine_exports, {
 });
 module.exports = __toCommonJS(css_engine_exports);
 var import_rules = require("./rules");
+var import_compare_media = require("./compare-media");
 var import_style_element = require("./style-element");
 var import_style_sheet = require("./style-sheet");
 var _element, _mediaRules, _plainRules, _fontFaceRules, _sheet, _isDirty, _cssText, _onChangeRule;
@@ -120,7 +121,10 @@ class CssEngine {
     for (const plaintextRule of __privateGet(this, _plainRules).values()) {
       css.push(plaintextRule.cssText);
     }
-    for (const mediaRule of import_rules.MediaRule.sort(__privateGet(this, _mediaRules).values())) {
+    const sortedMediaRules = Array.from(__privateGet(this, _mediaRules).values()).sort(
+      (ruleA, ruleB) => (0, import_compare_media.compareMedia)(ruleA.options, ruleB.options)
+    );
+    for (const mediaRule of sortedMediaRules) {
       const { cssText } = mediaRule;
       if (cssText !== "") {
         css.push(cssText);

package/lib/cjs/core/equal-media.js

@@ -0,0 +1,26 @@
+"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 equal_media_exports = {};
+__export(equal_media_exports, {
+  equalMedia: () => equalMedia
+});
+module.exports = __toCommonJS(equal_media_exports);
+const equalMedia = (left, right) => {
+  return left.minWidth === right.minWidth && left.maxWidth === right.maxWidth;
+};

package/lib/cjs/core/{index.cjs → index.js}

@@ -26,3 +26,5 @@ 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);
+__reExport(core_exports, require("./equal-media"), module.exports);
+__reExport(core_exports, require("./compare-media"), module.exports);

package/lib/cjs/core/{rules.cjs → rules.js}

@@ -116,15 +116,6 @@ class MediaRule {
     this.options = options;
     __privateSet(this, _mediaType, options.mediaType ?? "all");
   }
-  // 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);
-    });
-  }
   insertRule(rule) {
     this.rules.push(rule);
     return rule;

package/lib/cjs/package.json

@@ -0,0 +1 @@
+{"type":"commonjs"}

package/lib/core/compare-media.js

@@ -0,0 +1,12 @@
+const compareMedia = (optionA, optionB) => {
+  if (optionA?.minWidth !== void 0 && optionB?.minWidth !== void 0) {
+    return optionA.minWidth - optionB.minWidth;
+  }
+  if (optionA?.maxWidth !== void 0 && optionB?.maxWidth !== void 0) {
+    return optionB.maxWidth - optionA.maxWidth;
+  }
+  return "minWidth" in optionA ? 1 : -1;
+};
+export {
+  compareMedia
+};

package/lib/core/css-engine.js

@@ -23,6 +23,7 @@ import {
   PlaintextRule,
   StyleRule
 } from "./rules";
+import { compareMedia } from "./compare-media";
 import { StyleElement } from "./style-element";
 import { StyleSheet } from "./style-sheet";
 const defaultMediaRuleId = "__default-media-rule__";
@@ -102,7 +103,10 @@ class CssEngine {
     for (const plaintextRule of __privateGet(this, _plainRules).values()) {
       css.push(plaintextRule.cssText);
     }
-    for (const mediaRule of MediaRule.sort(__privateGet(this, _mediaRules).values())) {
+    const sortedMediaRules = Array.from(__privateGet(this, _mediaRules).values()).sort(
+      (ruleA, ruleB) => compareMedia(ruleA.options, ruleB.options)
+    );
+    for (const mediaRule of sortedMediaRules) {
       const { cssText } = mediaRule;
       if (cssText !== "") {
         css.push(cssText);

package/lib/core/equal-media.js

@@ -0,0 +1,6 @@
+const equalMedia = (left, right) => {
+  return left.minWidth === right.minWidth && left.maxWidth === right.maxWidth;
+};
+export {
+  equalMedia
+};

package/lib/core/index.js

@@ -2,6 +2,8 @@ import { CssEngine } from "./css-engine";
 export * from "./create-css-engine";
 export * from "./to-value";
 export * from "./match-media";
+export * from "./equal-media";
+export * from "./compare-media";
 export {
   CssEngine
 };

package/lib/core/rules.js

@@ -90,15 +90,6 @@ class MediaRule {
     this.options = options;
     __privateSet(this, _mediaType, options.mediaType ?? "all");
   }
-  // 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);
-    });
-  }
   insertRule(rule) {
     this.rules.push(rule);
     return rule;

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

@@ -0,0 +1,6 @@
+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.
+ */
+export declare const compareMedia: (optionA: MediaRuleOptions, optionB: MediaRuleOptions) => number;

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

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

package/lib/types/core/create-css-engine.d.ts

@@ -0,0 +1,2 @@
+import { CssEngine, type CssEngineOptions } from "./css-engine";
+export declare const createCssEngine: (options?: CssEngineOptions) => CssEngine;

package/lib/types/core/css-engine.d.ts

@@ -0,0 +1,19 @@
+import type { CssRule } from "@webstudio-is/css-data";
+import { MediaRule, PlaintextRule, StyleRule, type FontFaceOptions, type MediaRuleOptions } from "./rules";
+export type CssEngineOptions = {
+    name?: string;
+};
+export declare class CssEngine {
+    #private;
+    constructor({ name }: CssEngineOptions);
+    addMediaRule(id: string, options?: MediaRuleOptions): MediaRule;
+    addStyleRule(selectorText: string, rule: CssRule): StyleRule;
+    addPlaintextRule(cssText: string): PlaintextRule | Map<string, PlaintextRule>;
+    addFontFaceRule(options: FontFaceOptions): number;
+    clear(): void;
+    render(): void;
+    unmount(): void;
+    setAttribute(name: string, value: string): void;
+    getAttribute(name: string): string | null | undefined;
+    get cssText(): string;
+}

package/lib/types/core/css-engine.stories.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare const _default: {
+    component: string;
+};
+export default _default;
+export declare const Basic: () => JSX.Element;

package/lib/types/core/css-engine.test.d.ts

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

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

@@ -0,0 +1,2 @@
+import type { MediaRuleOptions } from "./rules";
+export declare const equalMedia: (left: MediaRuleOptions, right: MediaRuleOptions) => boolean;

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

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

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

@@ -0,0 +1,7 @@
+export { CssEngine } from "./css-engine";
+export type { AnyRule, StyleRule, MediaRule, PlaintextRule, FontFaceRule, } from "./rules";
+export * from "./create-css-engine";
+export * from "./to-value";
+export * from "./match-media";
+export * from "./equal-media";
+export * from "./compare-media";

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

@@ -0,0 +1,2 @@
+import type { MediaRuleOptions } from "./rules";
+export declare const matchMedia: (options: MediaRuleOptions, width: number) => boolean;

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

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

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

@@ -0,0 +1,51 @@
+import type { Style, StyleProperty, StyleValue } from "@webstudio-is/css-data";
+declare class StylePropertyMap {
+    #private;
+    onChange?: () => void;
+    set(property: StyleProperty, value?: StyleValue): void;
+    has(property: StyleProperty): boolean;
+    keys(): IterableIterator<"color" | "left" | "right" | "top" | "bottom" | "contain" | "clip" | "content" | "filter" | "float" | "fontFamily" | "width" | "height" | `--${string}` | "accentColor" | "alignContent" | "alignItems" | "alignSelf" | "alignTracks" | "animationComposition" | "animationDelay" | "animationDirection" | "animationDuration" | "animationFillMode" | "animationIterationCount" | "animationName" | "animationPlayState" | "animationTimingFunction" | "animationTimeline" | "appearance" | "aspectRatio" | "backdropFilter" | "backfaceVisibility" | "backgroundAttachment" | "backgroundBlendMode" | "backgroundClip" | "backgroundColor" | "backgroundImage" | "backgroundOrigin" | "backgroundPosition" | "backgroundPositionX" | "backgroundPositionY" | "backgroundRepeat" | "backgroundSize" | "blockOverflow" | "blockSize" | "borderBlockColor" | "borderBlockStyle" | "borderBlockWidth" | "borderBlockEndColor" | "borderBlockEndStyle" | "borderBlockEndWidth" | "borderBlockStartColor" | "borderBlockStartStyle" | "borderBlockStartWidth" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderEndEndRadius" | "borderEndStartRadius" | "borderImageOutset" | "borderImageRepeat" | "borderImageSlice" | "borderImageSource" | "borderImageWidth" | "borderInlineColor" | "borderInlineStyle" | "borderInlineWidth" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderStartEndRadius" | "borderStartStartRadius" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "boxDecorationBreak" | "boxShadow" | "boxSizing" | "breakAfter" | "breakBefore" | "breakInside" | "captionSide" | "caretColor" | "caretShape" | "clear" | "clipPath" | "printColorAdjust" | "colorScheme" | "columnCount" | "columnFill" | "columnGap" | "columnRuleColor" | "columnRuleStyle" | "columnRuleWidth" | "columnSpan" | "columnWidth" | "containIntrinsicBlockSize" | "containIntrinsicHeight" | "containIntrinsicInlineSize" | "containIntrinsicWidth" | "contentVisibility" | "counterIncrement" | "counterReset" | "counterSet" | "cursor" | "direction" | "display" | "emptyCells" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFeatureSettings" | "fontKerning" | "fontLanguageOverride" | "fontOpticalSizing" | "fontVariationSettings" | "fontSize" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontSynthesis" | "fontVariant" | "fontVariantAlternates" | "fontVariantCaps" | "fontVariantEastAsian" | "fontVariantLigatures" | "fontVariantNumeric" | "fontVariantPosition" | "fontWeight" | "forcedColorAdjust" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "hangingPunctuation" | "hyphenateCharacter" | "hyphens" | "imageOrientation" | "imageRendering" | "imageResolution" | "initialLetter" | "initialLetterAlign" | "inlineSize" | "inputSecurity" | "insetBlockEnd" | "insetBlockStart" | "insetInlineEnd" | "insetInlineStart" | "isolation" | "justifyContent" | "justifyItems" | "justifySelf" | "justifyTracks" | "letterSpacing" | "lineBreak" | "lineClamp" | "lineHeight" | "lineHeightStep" | "listStyleImage" | "listStylePosition" | "listStyleType" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "marginTrim" | "maskBorderMode" | "maskBorderOutset" | "maskBorderRepeat" | "maskBorderSlice" | "maskBorderSource" | "maskBorderWidth" | "maskClip" | "maskComposite" | "maskImage" | "maskMode" | "maskOrigin" | "maskPosition" | "maskRepeat" | "maskSize" | "maskType" | "masonryAutoFlow" | "mathDepth" | "mathShift" | "mathStyle" | "maxBlockSize" | "maxHeight" | "maxInlineSize" | "maxLines" | "maxWidth" | "minBlockSize" | "minHeight" | "minInlineSize" | "minWidth" | "mixBlendMode" | "objectFit" | "objectPosition" | "offsetAnchor" | "offsetDistance" | "offsetPath" | "offsetPosition" | "offsetRotate" | "opacity" | "order" | "orphans" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "overflow" | "overflowAnchor" | "overflowBlock" | "overflowClipMargin" | "overflowInline" | "overflowWrap" | "overflowX" | "overflowY" | "overscrollBehavior" | "overscrollBehaviorBlock" | "overscrollBehaviorInline" | "overscrollBehaviorX" | "overscrollBehaviorY" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "pageBreakAfter" | "pageBreakBefore" | "pageBreakInside" | "paintOrder" | "perspective" | "perspectiveOrigin" | "pointerEvents" | "position" | "quotes" | "resize" | "rotate" | "rowGap" | "rubyAlign" | "rubyMerge" | "rubyPosition" | "scale" | "scrollbarColor" | "scrollbarGutter" | "scrollbarWidth" | "scrollBehavior" | "scrollMarginBlockStart" | "scrollMarginBlockEnd" | "scrollMarginBottom" | "scrollMarginInlineStart" | "scrollMarginInlineEnd" | "scrollMarginLeft" | "scrollMarginRight" | "scrollMarginTop" | "scrollPaddingBlockStart" | "scrollPaddingBlockEnd" | "scrollPaddingBottom" | "scrollPaddingInlineStart" | "scrollPaddingInlineEnd" | "scrollPaddingLeft" | "scrollPaddingRight" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapStop" | "scrollSnapType" | "scrollTimelineAxis" | "scrollTimelineName" | "shapeImageThreshold" | "shapeMargin" | "shapeOutside" | "tabSize" | "tableLayout" | "textAlign" | "textAlignLast" | "textCombineUpright" | "textDecorationColor" | "textDecorationLine" | "textDecorationSkip" | "textDecorationSkipInk" | "textDecorationStyle" | "textDecorationThickness" | "textEmphasisColor" | "textEmphasisPosition" | "textEmphasisStyle" | "textIndent" | "textJustify" | "textOrientation" | "textOverflow" | "textRendering" | "textShadow" | "textSizeAdjust" | "textTransform" | "textUnderlineOffset" | "textUnderlinePosition" | "touchAction" | "transform" | "transformBox" | "transformOrigin" | "transformStyle" | "transitionDelay" | "transitionDuration" | "transitionProperty" | "transitionTimingFunction" | "translate" | "unicodeBidi" | "userSelect" | "verticalAlign" | "visibility" | "whiteSpace" | "widows" | "willChange" | "wordBreak" | "wordSpacing" | "wordWrap" | "writingMode" | "zIndex">;
+    delete(property: StyleProperty): void;
+    clear(): void;
+    toString(): string;
+}
+export declare class StyleRule {
+    #private;
+    styleMap: StylePropertyMap;
+    selectorText: string;
+    onChange?: () => void;
+    constructor(selectorText: string, style: Style);
+    get cssText(): string;
+}
+export type MediaRuleOptions = {
+    minWidth?: number;
+    maxWidth?: number;
+    mediaType?: "all" | "screen" | "print";
+};
+export declare class MediaRule {
+    #private;
+    options: MediaRuleOptions;
+    rules: Array<StyleRule | PlaintextRule>;
+    constructor(options?: MediaRuleOptions);
+    insertRule(rule: StyleRule | PlaintextRule): StyleRule | PlaintextRule;
+    get cssText(): string;
+}
+export declare class PlaintextRule {
+    cssText: string;
+    styleMap: StylePropertyMap;
+    constructor(cssText: string);
+}
+export type FontFaceOptions = {
+    fontFamily: string;
+    fontStyle?: "normal" | "italic" | "oblique";
+    fontWeight?: number | string;
+    fontDisplay: "swap" | "auto" | "block" | "fallback" | "optional";
+    src: string;
+};
+export declare class FontFaceRule {
+    options: FontFaceOptions;
+    constructor(options: FontFaceOptions);
+    get cssText(): string;
+}
+export type AnyRule = StyleRule | MediaRule | PlaintextRule | FontFaceRule;
+export {};

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

@@ -0,0 +1,10 @@
+export declare class StyleElement {
+    #private;
+    constructor(name?: string);
+    get isMounted(): boolean;
+    mount(): void;
+    unmount(): void;
+    render(cssText: string): void;
+    setAttribute(name: string, value: string): void;
+    getAttribute(name: string): string | null | undefined;
+}

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

@@ -0,0 +1,6 @@
+import type { StyleElement } from "./style-element";
+export declare class StyleSheet {
+    #private;
+    constructor(element: StyleElement);
+    replaceSync(cssText: string): void;
+}

package/lib/types/core/to-property.d.ts

@@ -0,0 +1,2 @@
+import type { StyleProperty } from "@webstudio-is/css-data";
+export declare const toProperty: (property: StyleProperty) => string;

package/lib/types/core/to-property.test.d.ts

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

package/lib/types/core/to-value.d.ts

@@ -0,0 +1,6 @@
+import type { StyleValue } from "@webstudio-is/css-data";
+type ToCssOptions = {
+    withFallback: boolean;
+};
+export declare const toValue: (value?: StyleValue, options?: ToCssOptions) => string;
+export {};

package/lib/types/core/to-value.test.d.ts

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

package/lib/types/index.d.ts

@@ -0,0 +1 @@
+export * from "./core";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/css-engine",
-  "version": "0.51.0",
+  "version": "0.52.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.51.0"
+    "@webstudio-is/fonts": "^0.52.0"
   },
   "devDependencies": {
     "@jest/globals": "^29.3.1",
@@ -18,8 +18,8 @@
     "@types/react": "^17.0.24",
     "@types/react-dom": "^17.0.9",
     "jest": "^29.3.1",
-    "typescript": "4.9.5",
-    "@webstudio-is/css-data": "^0.51.0",
+    "typescript": "5.0.3",
+    "@webstudio-is/css-data": "^0.52.0",
     "@webstudio-is/jest-config": "^1.0.2",
     "@webstudio-is/scripts": "^0.0.0",
     "@webstudio-is/storybook-config": "^0.0.0",
@@ -29,7 +29,7 @@
     "source": "./src/index.ts",
     "import": "./lib/index.js"
   },
-  "types": "src/index.ts",
+  "types": "lib/types/index.d.ts",
   "files": [
     "lib/*",
     "src/*",
@@ -43,6 +43,7 @@
     "checks": "pnpm typecheck && pnpm lint && pnpm test",
     "dev": "build-package --watch",
     "build": "build-package",
+    "dts": "tsc --emitDeclarationOnly --declaration --declarationDir lib/types",
     "test": "NODE_OPTIONS=--experimental-vm-modules jest",
     "lint": "eslint ./src --ext .ts,.tsx --max-warnings 0",
     "storybook:run": "start-storybook -p 6006",

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

@@ -0,0 +1,40 @@
+import { describe, test, expect } from "@jest/globals";
+import { compareMedia } from "./compare-media";
+
+describe("Compare media", () => {
+  test("mobile first", () => {
+    const initial = [
+      { minWidth: 0 },
+      { minWidth: 768 },
+      { minWidth: 1024 },
+      { minWidth: 1280 },
+    ];
+    expect(initial.sort(compareMedia)).toStrictEqual(initial);
+  });
+
+  test("random minWidth", () => {
+    const initial = [{ minWidth: 0 }, { minWidth: 3 }, { minWidth: 2 }];
+    const sorted = [{ minWidth: 0 }, { minWidth: 2 }, { minWidth: 3 }];
+    expect(initial.sort(compareMedia)).toStrictEqual(sorted);
+  });
+
+  test("webflow", () => {
+    const initial = [
+      { maxWidth: 991 },
+      { maxWidth: 767 },
+      { maxWidth: 479 },
+      { minWidth: 1280 },
+      { minWidth: 1440 },
+      { minWidth: 1920 },
+    ];
+    const sorted = [
+      { maxWidth: 991 },
+      { maxWidth: 767 },
+      { maxWidth: 479 },
+      { minWidth: 1280 },
+      { minWidth: 1440 },
+      { minWidth: 1920 },
+    ];
+    expect(initial.sort(compareMedia)).toStrictEqual(sorted);
+  });
+});

package/src/core/compare-media.ts

@@ -0,0 +1,18 @@
+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.
+ */
+export const compareMedia = (
+  optionA: MediaRuleOptions,
+  optionB: MediaRuleOptions
+) => {
+  if (optionA?.minWidth !== undefined && optionB?.minWidth !== undefined) {
+    return optionA.minWidth - optionB.minWidth;
+  }
+  if (optionA?.maxWidth !== undefined && optionB?.maxWidth !== undefined) {
+    return optionB.maxWidth - optionA.maxWidth;
+  }
+  return "minWidth" in optionA ? 1 : -1;
+};

package/src/core/css-engine.ts

@@ -7,6 +7,7 @@ import {
   type FontFaceOptions,
   type MediaRuleOptions,
 } from "./rules";
+import { compareMedia } from "./compare-media";
 import { StyleElement } from "./style-element";
 import { StyleSheet } from "./style-sheet";
 
@@ -90,7 +91,11 @@ export class CssEngine {
     for (const plaintextRule of this.#plainRules.values()) {
       css.push(plaintextRule.cssText);
     }
-    for (const mediaRule of MediaRule.sort(this.#mediaRules.values())) {
+
+    const sortedMediaRules = Array.from(this.#mediaRules.values()).sort(
+      (ruleA, ruleB) => compareMedia(ruleA.options, ruleB.options)
+    );
+    for (const mediaRule of sortedMediaRules) {
       const { cssText } = mediaRule;
       if (cssText !== "") {
         css.push(cssText);

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

@@ -0,0 +1,31 @@
+import { describe, expect, test } from "@jest/globals";
+import { equalMedia } from "./equal-media";
+
+describe("equalMedia", () => {
+  test("minWidth", () => {
+    expect(equalMedia({ minWidth: 100 }, { minWidth: 10 })).toBe(false);
+    expect(equalMedia({ minWidth: 100 }, { minWidth: 100 })).toBe(true);
+    expect(equalMedia({ minWidth: 100 }, { minWidth: 101 })).toBe(false);
+  });
+
+  test("maxWidth", () => {
+    expect(equalMedia({ maxWidth: 100 }, { maxWidth: 101 })).toBe(false);
+    expect(equalMedia({ maxWidth: 100 }, { maxWidth: 100 })).toBe(true);
+    expect(equalMedia({ maxWidth: 100 }, { maxWidth: 10 })).toBe(false);
+  });
+
+  test("minWidth and maxWidth", () => {
+    expect(equalMedia({ maxWidth: 100, minWidth: 10 }, { maxWidth: 100 })).toBe(
+      false
+    );
+    expect(equalMedia({ maxWidth: 100, minWidth: 10 }, { minWidth: 10 })).toBe(
+      false
+    );
+    expect(
+      equalMedia(
+        { maxWidth: 100, minWidth: 10 },
+        { maxWidth: 100, minWidth: 10 }
+      )
+    ).toBe(true);
+  });
+});

package/src/core/equal-media.ts

@@ -0,0 +1,5 @@
+import type { MediaRuleOptions } from "./rules";
+
+export const equalMedia = (left: MediaRuleOptions, right: MediaRuleOptions) => {
+  return left.minWidth === right.minWidth && left.maxWidth === right.maxWidth;
+};

package/src/core/index.ts

@@ -9,3 +9,5 @@ export type {
 export * from "./create-css-engine";
 export * from "./to-value";
 export * from "./match-media";
+export * from "./equal-media";
+export * from "./compare-media";

package/src/core/rules.ts

@@ -73,18 +73,6 @@ export type MediaRuleOptions = {
 };
 
 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 (
-        (ruleA.options.minWidth ?? -Number.MAX_SAFE_INTEGER) -
-        (ruleB.options.minWidth ?? -Number.MAX_SAFE_INTEGER)
-      );
-    });
-  }
   options: MediaRuleOptions;
   rules: Array<StyleRule | PlaintextRule> = [];
   #mediaType;