@webstudio-is/css-engine 0.27.0 → 0.28.0

package/lib/cjs/core/rules.cjs

@@ -169,9 +169,17 @@ class FontFaceRule {
     this.options = options;
   }
   get cssText() {
+    const decls = [];
     const { fontFamily, fontStyle, fontWeight, fontDisplay, src } = this.options;
+    decls.push(
+      `font-family: ${/\s/.test(fontFamily) ? `"${fontFamily}"` : fontFamily}`
+    );
+    decls.push(`font-style: ${fontStyle}`);
+    decls.push(`font-weight: ${fontWeight}`);
+    decls.push(`font-display: ${fontDisplay}`);
+    decls.push(`src: ${src}`);
     return `@font-face {
-  font-family: ${fontFamily}; font-style: ${fontStyle}; font-weight: ${fontWeight}; font-display: ${fontDisplay}; src: ${src};
+  ${decls.join("; ")};
 }`;
   }
 }

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

@@ -71,6 +71,9 @@ const toValue = (value, options = defaultOptions) => {
       (imageAsset) => `url(${imageAsset.value.path}) /* id=${imageAsset.value.id} */`
     ).join(", ");
   }
+  if (value.type === "unparsed") {
+    return value.value;
+  }
   assertUnreachable(value, `Unknown value type`);
   throw new Error("Unknown value type");
 };

package/lib/core/rules.js

@@ -137,9 +137,17 @@ class FontFaceRule {
     this.options = options;
   }
   get cssText() {
+    const decls = [];
     const { fontFamily, fontStyle, fontWeight, fontDisplay, src } = this.options;
+    decls.push(
+      `font-family: ${/\s/.test(fontFamily) ? `"${fontFamily}"` : fontFamily}`
+    );
+    decls.push(`font-style: ${fontStyle}`);
+    decls.push(`font-weight: ${fontWeight}`);
+    decls.push(`font-display: ${fontDisplay}`);
+    decls.push(`src: ${src}`);
     return `@font-face {
-  font-family: ${fontFamily}; font-style: ${fontStyle}; font-weight: ${fontWeight}; font-display: ${fontDisplay}; src: ${src};
+  ${decls.join("; ")};
 }`;
   }
 }

package/lib/core/to-value.js

@@ -48,6 +48,9 @@ const toValue = (value, options = defaultOptions) => {
       (imageAsset) => `url(${imageAsset.value.path}) /* id=${imageAsset.value.id} */`
     ).join(", ");
   }
+  if (value.type === "unparsed") {
+    return value.value;
+  }
   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.27.0",
+  "version": "0.28.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.27.0"
+    "@webstudio-is/fonts": "^0.28.0"
   },
   "devDependencies": {
     "@jest/globals": "^29.3.1",
@@ -21,7 +21,7 @@
     "@types/react-dom": "^17.0.9",
     "jest": "^29.3.1",
     "typescript": "4.7.4",
-    "@webstudio-is/css-data": "^0.27.0",
+    "@webstudio-is/css-data": "^0.28.0",
     "@webstudio-is/jest-config": "^1.0.2",
     "@webstudio-is/scripts": "^0.0.0",
     "@webstudio-is/storybook-config": "^0.0.0",

package/src/core/rules.ts

@@ -130,8 +130,8 @@ export class PlaintextRule {
 
 export type FontFaceOptions = {
   fontFamily: string;
-  fontStyle: "normal" | "italic" | "oblique";
-  fontWeight: number;
+  fontStyle?: "normal" | "italic" | "oblique";
+  fontWeight?: number | string;
   fontDisplay: "swap" | "auto" | "block" | "fallback" | "optional";
   src: string;
 };
@@ -142,9 +142,17 @@ export class FontFaceRule {
     this.options = options;
   }
   get cssText() {
+    const decls = [];
     const { fontFamily, fontStyle, fontWeight, fontDisplay, src } =
       this.options;
-    return `@font-face {\n  font-family: ${fontFamily}; font-style: ${fontStyle}; font-weight: ${fontWeight}; font-display: ${fontDisplay}; src: ${src};\n}`;
+    decls.push(
+      `font-family: ${/\s/.test(fontFamily) ? `"${fontFamily}"` : fontFamily}`
+    );
+    decls.push(`font-style: ${fontStyle}`);
+    decls.push(`font-weight: ${fontWeight}`);
+    decls.push(`font-display: ${fontDisplay}`);
+    decls.push(`src: ${src}`);
+    return `@font-face {\n  ${decls.join("; ")};\n}`;
   }
 }
 

package/src/core/to-value.ts

@@ -71,6 +71,10 @@ export const toValue = (
       .join(", ");
   }
 
+  if (value.type === "unparsed") {
+    return value.value;
+  }
+
   // Will give ts error in case of missing type
   assertUnreachable(value, `Unknown value type`);