@webstudio-is/css-engine 0.205.0 → 0.207.0

package/lib/index.js

@@ -249,7 +249,6 @@ var StyleValue = z.union([
   UnsetValue,
   VarValue
 ]);
-var Style = z.record(z.string(), StyleValue);
 
 // src/css.ts
 var cssWideKeywords = /* @__PURE__ */ new Set([
@@ -380,7 +379,10 @@ var mergeStyles = (styleMap) => {
 };
 
 // src/core/to-property.ts
-var hyphenateProperty = (property) => property.replace(/[A-Z]/g, (match) => "-" + match.toLowerCase());
+var hyphenateProperty = (property) => property.replace(
+  /[A-Z]/g,
+  (match) => "-" + match.toLowerCase()
+);
 
 // src/core/rules.ts
 var mapGroupBy = (array, getKey) => {

package/lib/runtime.js

@@ -0,0 +1,98 @@
+// src/core/to-value.ts
+import { DEFAULT_FONT_FALLBACK, SYSTEM_FONTS } from "@webstudio-is/fonts";
+var fallbackTransform = (styleValue) => {
+  if (styleValue.type !== "fontFamily") {
+    return;
+  }
+  let { value } = styleValue;
+  if (value.length === 0) {
+    value = [DEFAULT_FONT_FALLBACK];
+  }
+  if (value.length === 1) {
+    const stack = SYSTEM_FONTS.get(value[0])?.stack;
+    value = stack ?? [value[0], DEFAULT_FONT_FALLBACK];
+  }
+  return {
+    type: "fontFamily",
+    value: Array.from(new Set(value))
+  };
+};
+var sanitizeCssUrl = (str) => JSON.stringify(str);
+var toValue = (styleValue, transformValue) => {
+  if (styleValue === void 0) {
+    return "";
+  }
+  const transformedValue = transformValue?.(styleValue) ?? fallbackTransform(styleValue);
+  const value = transformedValue ?? styleValue;
+  if (value.type === "unit") {
+    return value.value + (value.unit === "number" ? "" : value.unit);
+  }
+  if (value.type === "fontFamily") {
+    const families = [];
+    for (const family of value.value) {
+      families.push(family.includes(" ") ? `"${family}"` : family);
+    }
+    return families.join(", ");
+  }
+  if (value.type === "var") {
+    if (value.hidden) {
+      return "";
+    }
+    let fallbacksString = "";
+    if (value.fallback) {
+      fallbacksString = `, ${toValue(value.fallback, transformValue)}`;
+    }
+    return `var(--${value.value}${fallbacksString})`;
+  }
+  if (value.type === "keyword") {
+    if (value.hidden === true) {
+      return "";
+    }
+    return value.value;
+  }
+  if (value.type === "invalid") {
+    return value.value;
+  }
+  if (value.type === "unset") {
+    return value.value;
+  }
+  if (value.type === "rgb") {
+    return `rgba(${value.r}, ${value.g}, ${value.b}, ${value.alpha})`;
+  }
+  if (value.type === "image") {
+    if (value.hidden || value.value.type !== "url") {
+      return "none";
+    }
+    return `url(${sanitizeCssUrl(value.value.url)})`;
+  }
+  if (value.type === "unparsed") {
+    if (value.hidden === true) {
+      return "none";
+    }
+    return value.value;
+  }
+  if (value.type === "layers") {
+    const valueString = value.value.filter((layer) => layer.hidden !== true).map((layer) => toValue(layer, transformValue)).join(", ");
+    return valueString === "" ? "none" : valueString;
+  }
+  if (value.type === "tuple") {
+    if (value.hidden === true) {
+      return "none";
+    }
+    return value.value.filter((value2) => value2.hidden !== true).map((value2) => toValue(value2, transformValue)).join(" ");
+  }
+  if (value.type === "function") {
+    if (value.hidden === true) {
+      return "";
+    }
+    return `${value.name}(${toValue(value.args, transformValue)})`;
+  }
+  if (value.type === "guaranteedInvalid") {
+    return "";
+  }
+  value;
+  return "";
+};
+export {
+  toValue
+};

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

@@ -1,5 +1,9 @@
 import type { StyleValue } from "../schema";
 import { type TransformValue } from "./to-value";
+/**
+ * Use CssStyleMap instead to enforce hyphenated properties.
+ * @deprecated
+ */
 export type StyleMap = Map<string, StyleValue>;
 export declare const generateStyleMap: (style: StyleMap, { indent, transformValue, }?: {
     indent?: number;

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

@@ -1,4 +1,5 @@
+import type { CssProperty } from "../schema";
 /**
  * Hyphenates a camelcased CSS property name
  */
-export declare const hyphenateProperty: (property: string) => string;
+export declare const hyphenateProperty: (property: string) => CssProperty;

package/lib/types/index.d.ts

@@ -2,3 +2,4 @@ export * from "./core/index";
 export * from "./schema";
 export * from "./css";
 export type { Unit as __Unit } from "./__generated__/types";
+export type { HyphenatedProperty as __HyphenatedProperty } from "./__generated__/types";

package/lib/types/runtime.d.ts

@@ -0,0 +1 @@
+export { toValue } from "./core/to-value";

package/lib/types/schema.d.ts

@@ -4,6 +4,7 @@ import { type TransformValue } from "./core/to-value";
 export type CustomProperty = `--${string}`;
 export type StyleProperty = CamelCasedProperty | CustomProperty;
 export type CssProperty = HyphenatedProperty | CustomProperty;
+export type CssStyleMap = Map<CssProperty, StyleValue>;
 declare const Unit: z.ZodType<GeneratedUnit | "number">;
 export type Unit = z.infer<typeof Unit>;
 export declare const UnitValue: z.ZodObject<{
@@ -3922,9 +3923,4 @@ export declare const StyleValue: z.ZodUnion<[z.ZodObject<{
     hidden?: boolean | undefined;
 }>]>;
 export type StyleValue = z.infer<typeof StyleValue>;
-export type Style = {
-    [property in StyleProperty]?: StyleValue;
-} & {
-    [property: CustomProperty]: StyleValue;
-};
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/css-engine",
-  "version": "0.205.0",
+  "version": "0.207.0",
   "description": "CSS Renderer for Webstudio",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -8,20 +8,27 @@
   "dependencies": {
     "@emotion/hash": "^0.9.2",
     "zod": "^3.22.4",
-    "@webstudio-is/fonts": "0.205.0"
+    "@webstudio-is/fonts": "0.207.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.70",
     "@types/react-dom": "^18.2.25",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
-    "vitest": "^3.0.4",
+    "vitest": "^3.0.8",
     "@webstudio-is/tsconfig": "1.0.7"
   },
   "exports": {
-    "webstudio": "./src/index.ts",
-    "types": "./lib/types/index.d.ts",
-    "import": "./lib/index.js"
+    ".": {
+      "webstudio": "./src/index.ts",
+      "types": "./lib/types/index.d.ts",
+      "import": "./lib/index.js"
+    },
+    "./runtime": {
+      "webstudio": "./src/runtime.ts",
+      "types": "./lib/types/runtime.d.ts",
+      "import": "./lib/runtime.js"
+    }
   },
   "files": [
     "lib/*",
@@ -32,7 +39,7 @@
   "sideEffects": false,
   "scripts": {
     "typecheck": "tsc",
-    "build": "rm -rf lib && esbuild src/index.ts --outdir=lib --bundle --format=esm --packages=external",
+    "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"
   }