@webstudio-is/css-engine 0.48.0 → 0.50.0

package/lib/cjs/core/rules.cjs

@@ -116,6 +116,9 @@ 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.
   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);

package/lib/cjs/core/to-property.cjs

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));

package/lib/cjs/core/to-value.cjs

@@ -28,7 +28,7 @@ const defaultOptions = {
 const assertUnreachable = (_arg, errorMessage) => {
   throw new Error(errorMessage);
 };
-const toValue = (value, options = defaultOptions, isEditMode) => {
+const toValue = (value, options = defaultOptions) => {
   if (value === void 0) {
     return "";
   }
@@ -47,10 +47,9 @@ const toValue = (value, options = defaultOptions, isEditMode) => {
     return [...value.value, import_fonts.DEFAULT_FONT_FALLBACK].join(", ");
   }
   if (value.type === "var") {
-    const isEditMode2 = true;
     const fallbacks = [];
     for (const fallback of value.fallbacks) {
-      fallbacks.push(toValue(fallback, options, isEditMode2));
+      fallbacks.push(toValue(fallback, options));
     }
     const fallbacksString = fallbacks.length > 0 ? `, ${fallbacks.join(", ")}` : "";
     return `var(--${value.value}${fallbacksString})`;
@@ -68,22 +67,22 @@ const toValue = (value, options = defaultOptions, isEditMode) => {
     return `rgba(${value.r}, ${value.g}, ${value.b}, ${value.alpha})`;
   }
   if (value.type === "image") {
-    if (isEditMode && value.hidden) {
+    if (value.hidden) {
       return "none";
     }
     return `url(${value.value.value.path}) /* id=${value.value.value.id} */`;
   }
   if (value.type === "unparsed") {
-    if (isEditMode && value.hidden) {
+    if (value.hidden) {
       return "none";
     }
     return value.value;
   }
   if (value.type === "layers") {
-    return value.value.map((value2) => toValue(value2, options, isEditMode)).join(",");
+    return value.value.map((value2) => toValue(value2, options)).join(",");
   }
   if (value.type === "tuple") {
-    return value.value.map((value2) => toValue(value2, options, isEditMode)).join(" ");
+    return value.value.map((value2) => toValue(value2, options)).join(" ");
   }
   assertUnreachable(value, `Unknown value type`);
   throw new Error("Unknown value type");

package/lib/core/rules.js

@@ -90,6 +90,9 @@ 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.
   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);

package/lib/core/to-value.js

@@ -5,7 +5,7 @@ const defaultOptions = {
 const assertUnreachable = (_arg, errorMessage) => {
   throw new Error(errorMessage);
 };
-const toValue = (value, options = defaultOptions, isEditMode) => {
+const toValue = (value, options = defaultOptions) => {
   if (value === void 0) {
     return "";
   }
@@ -24,10 +24,9 @@ const toValue = (value, options = defaultOptions, isEditMode) => {
     return [...value.value, DEFAULT_FONT_FALLBACK].join(", ");
   }
   if (value.type === "var") {
-    const isEditMode2 = true;
     const fallbacks = [];
     for (const fallback of value.fallbacks) {
-      fallbacks.push(toValue(fallback, options, isEditMode2));
+      fallbacks.push(toValue(fallback, options));
     }
     const fallbacksString = fallbacks.length > 0 ? `, ${fallbacks.join(", ")}` : "";
     return `var(--${value.value}${fallbacksString})`;
@@ -45,22 +44,22 @@ const toValue = (value, options = defaultOptions, isEditMode) => {
     return `rgba(${value.r}, ${value.g}, ${value.b}, ${value.alpha})`;
   }
   if (value.type === "image") {
-    if (isEditMode && value.hidden) {
+    if (value.hidden) {
       return "none";
     }
     return `url(${value.value.value.path}) /* id=${value.value.value.id} */`;
   }
   if (value.type === "unparsed") {
-    if (isEditMode && value.hidden) {
+    if (value.hidden) {
       return "none";
     }
     return value.value;
   }
   if (value.type === "layers") {
-    return value.value.map((value2) => toValue(value2, options, isEditMode)).join(",");
+    return value.value.map((value2) => toValue(value2, options)).join(",");
   }
   if (value.type === "tuple") {
-    return value.value.map((value2) => toValue(value2, options, isEditMode)).join(" ");
+    return value.value.map((value2) => toValue(value2, options)).join(" ");
   }
   assertUnreachable(value, `Unknown value type`);
   throw new Error("Unknown value type");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/css-engine",
-  "version": "0.48.0",
+  "version": "0.50.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.48.0"
+    "@webstudio-is/fonts": "^0.50.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.48.0",
+    "@webstudio-is/css-data": "^0.50.0",
     "@webstudio-is/jest-config": "^1.0.2",
     "@webstudio-is/scripts": "^0.0.0",
     "@webstudio-is/storybook-config": "^0.0.0",

package/src/core/to-value.ts

@@ -16,8 +16,7 @@ const assertUnreachable = (_arg: never, errorMessage: string) => {
 
 export const toValue = (
   value?: StyleValue,
-  options: ToCssOptions = defaultOptions,
-  isEditMode?: boolean
+  options: ToCssOptions = defaultOptions
 ): string => {
   if (value === undefined) {
     return "";
@@ -37,11 +36,9 @@ export const toValue = (
     return [...value.value, DEFAULT_FONT_FALLBACK].join(", ");
   }
   if (value.type === "var") {
-    // We use var() in edit mode only
-    const isEditMode = true;
     const fallbacks = [];
     for (const fallback of value.fallbacks) {
-      fallbacks.push(toValue(fallback, options, isEditMode));
+      fallbacks.push(toValue(fallback, options));
     }
     const fallbacksString =
       fallbacks.length > 0 ? `, ${fallbacks.join(", ")}` : "";
@@ -65,7 +62,7 @@ export const toValue = (
   }
 
   if (value.type === "image") {
-    if (isEditMode && value.hidden) {
+    if (value.hidden) {
       // We assume that property is background-image and use this to hide background layers
       // In the future we might want to have a more generic way to hide values
       // i.e. have knowledge about property-name, as none is property specific
@@ -77,7 +74,7 @@ export const toValue = (
   }
 
   if (value.type === "unparsed") {
-    if (isEditMode && value.hidden) {
+    if (value.hidden) {
       // We assume that property is background-image and use this to hide background layers
       // In the future we might want to have a more generic way to hide values
       // i.e. have knowledge about property-name, as none is property specific
@@ -88,15 +85,11 @@ export const toValue = (
   }
 
   if (value.type === "layers") {
-    return value.value
-      .map((value) => toValue(value, options, isEditMode))
-      .join(",");
+    return value.value.map((value) => toValue(value, options)).join(",");
   }
 
   if (value.type === "tuple") {
-    return value.value
-      .map((value) => toValue(value, options, isEditMode))
-      .join(" ");
+    return value.value.map((value) => toValue(value, options)).join(" ");
   }
 
   // Will give ts error in case of missing type