@webstudio-is/css-engine 0.3.0 → 0.4.0

package/src/core/to-value.test.ts

@@ -0,0 +1,66 @@
+import { toValue } from "./to-value";
+
+describe("Convert WS CSS Values to native CSS strings", () => {
+  test("keyword", () => {
+    const value = toValue({ type: "keyword", value: "red" });
+    expect(value).toBe("red");
+  });
+
+  test("unit", () => {
+    const value = toValue({ type: "unit", value: 10, unit: "px" });
+    expect(value).toBe("10px");
+  });
+
+  test("invalid", () => {
+    const value = toValue({ type: "invalid", value: "bad" });
+    expect(value).toBe("bad");
+  });
+
+  test("unset", () => {
+    const value = toValue({ type: "unset", value: "" });
+    expect(value).toBe("");
+  });
+
+  test("var", () => {
+    const value = toValue({ type: "var", value: "namespace", fallbacks: [] });
+    expect(value).toBe("var(--namespace)");
+  });
+
+  test("var with fallbacks", () => {
+    const value = toValue({
+      type: "var",
+      value: "namespace",
+      fallbacks: [
+        {
+          type: "keyword",
+          value: "normal",
+        },
+        {
+          type: "unit",
+          value: 10,
+          unit: "px",
+        },
+      ],
+    });
+    expect(value).toBe("var(--namespace, normal, 10px)");
+  });
+
+  test("fontFamily", () => {
+    const value = toValue({
+      type: "fontFamily",
+      value: ["Courier New"],
+    });
+    expect(value).toBe("Courier New, monospace");
+  });
+
+  test("withFallback=false", () => {
+    const value = toValue(
+      {
+        type: "fontFamily",
+        value: ["Courier New"],
+      },
+      { withFallback: false }
+    );
+    expect(value).toBe("Courier New");
+  });
+});

package/src/core/to-value.ts

@@ -0,0 +1,41 @@
+import type { StyleValue } from "@webstudio-is/css-data";
+import { DEFAULT_FONT_FALLBACK, SYSTEM_FONTS } from "@webstudio-is/fonts";
+
+type ToCssOptions = {
+  withFallback: boolean;
+};
+
+const defaultOptions = {
+  withFallback: true,
+};
+
+export const toValue = (
+  value?: StyleValue,
+  options: ToCssOptions = defaultOptions
+): string => {
+  if (value === undefined) return "";
+  if (value.type === "unit") {
+    return value.value + (value.unit === "number" ? "" : value.unit);
+  }
+  if (value.type === "fontFamily") {
+    if (options.withFallback === false) {
+      return value.value[0];
+    }
+    const family = value.value[0];
+    const fallbacks = SYSTEM_FONTS.get(family);
+    if (Array.isArray(fallbacks)) {
+      return [...value.value, ...fallbacks].join(", ");
+    }
+    return [...value.value, DEFAULT_FONT_FALLBACK].join(", ");
+  }
+  if (value.type === "var") {
+    const fallbacks = [];
+    for (const fallback of value.fallbacks) {
+      fallbacks.push(toValue(fallback, options));
+    }
+    const fallbacksString =
+      fallbacks.length > 0 ? `, ${fallbacks.join(", ")}` : "";
+    return `var(--${value.value}${fallbacksString})`;
+  }
+  return value.value;
+};

package/src/index.ts

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

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

@@ -1,3 +0,0 @@
-import { CssEngine } from "./css-engine";
-export declare const createCssEngine: () => CssEngine;
-//# sourceMappingURL=create-css-engine.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"create-css-engine.d.ts","sourceRoot":"","sources":["../../src/core/create-css-engine.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,eAAO,MAAM,eAAe,iBAE3B,CAAC"}

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

@@ -1,15 +0,0 @@
-import type { CssRule } from "@webstudio-is/css-data";
-import { MediaRule, PlaintextRule, StyleRule, type FontFaceOptions, type MediaRuleOptions } from "./rules";
-export declare class CssEngine {
-    #private;
-    constructor();
-    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;
-    get cssText(): string;
-}
-//# sourceMappingURL=css-engine.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"css-engine.d.ts","sourceRoot":"","sources":["../../src/core/css-engine.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACtD,OAAO,EAEL,SAAS,EACT,aAAa,EACb,SAAS,EACT,KAAK,eAAe,EACpB,KAAK,gBAAgB,EACtB,MAAM,SAAS,CAAC;AAMjB,qBAAa,SAAS;;;IAYpB,YAAY,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,gBAAgB;IASnD,YAAY,CAAC,YAAY,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO;IAYhD,gBAAgB,CAAC,OAAO,EAAE,MAAM;IAMhC,eAAe,CAAC,OAAO,EAAE,eAAe;IAIxC,KAAK;IAML,MAAM;IAKN,OAAO;IAGP,IAAI,OAAO,WAiBV;CAKF"}

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

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-declare const _default: {
-    component: string;
-};
-export default _default;
-export declare const Basic: () => JSX.Element;
-//# sourceMappingURL=css-engine.stories.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"css-engine.stories.d.ts","sourceRoot":"","sources":["../../src/core/css-engine.stories.tsx"],"names":[],"mappings":";;;;AAEA,wBAEE;AASF,eAAO,MAAM,KAAK,mBAkCjB,CAAC"}

package/lib/core/css-engine.stories.js

@@ -1,31 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { CssEngine } from "./css-engine";
-export default {
-    component: "CssEngine",
-};
-const style0 = {
-    color: { type: "keyword", value: "red" },
-};
-const mediaRuleOptions0 = { minWidth: 0 };
-const mediaId = "0";
-export const Basic = () => {
-    const engine = new CssEngine();
-    engine.addMediaRule(mediaId, mediaRuleOptions0);
-    const rule = engine.addStyleRule(".test", {
-        style: style0,
-        breakpoint: "0",
-    });
-    engine.render();
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "test", children: "Should be red" }), _jsx("button", { onClick: () => {
-                    rule.styleMap.set("color", { type: "keyword", value: "green" });
-                    engine.render();
-                }, children: "Make it green" }), _jsx("button", { onClick: () => {
-                    engine.addStyleRule(".test", {
-                        style: {
-                            background: { type: "keyword", value: "yellow" },
-                        },
-                        breakpoint: "0",
-                    });
-                    engine.render();
-                }, children: "Add rule with yellow background" })] }));
-};

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

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=css-engine.test.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"css-engine.test.d.ts","sourceRoot":"","sources":["../../src/core/css-engine.test.ts"],"names":[],"mappings":""}

package/lib/core/css-engine.test.js

@@ -1,182 +0,0 @@
-import { CssEngine } from "./css-engine";
-const style0 = {
-    display: { type: "keyword", value: "block" },
-};
-const mediaRuleOptions0 = { minWidth: 0 };
-const mediaId = "0";
-describe("CssEngine", () => {
-    let engine;
-    beforeEach(() => {
-        engine = new CssEngine();
-    });
-    test("use default media rule when there is no matching one registrered", () => {
-        engine.addStyleRule(".c", {
-            style: style0,
-            breakpoint: "x",
-        });
-        expect(engine.cssText).toMatchInlineSnapshot(`
-      "@media all {
-        .c { display: block }
-      }"
-    `);
-        engine.addStyleRule(".c1", {
-            style: { color: { type: "keyword", value: "red" } },
-            breakpoint: "x",
-        });
-        expect(engine.cssText).toMatchInlineSnapshot(`
-      "@media all {
-        .c { display: block }
-        .c1 { color: red }
-      }"
-    `);
-        engine.addMediaRule(mediaId, mediaRuleOptions0);
-        engine.addStyleRule(".c1", {
-            style: { color: { type: "keyword", value: "blue" } },
-            breakpoint: mediaId,
-        });
-        // Default media query should allways be the first to have the lowest source order specificity
-        expect(engine.cssText).toMatchInlineSnapshot(`
-      "@media all {
-        .c { display: block }
-        .c1 { color: red }
-      }
-      @media all and (min-width: 0px) {
-        .c1 { color: blue }
-      }"
-    `);
-    });
-    test("rule with multiple properties", () => {
-        engine.addMediaRule(mediaId, mediaRuleOptions0);
-        engine.addStyleRule(".c", {
-            style: {
-                ...style0,
-                color: { type: "keyword", value: "red" },
-            },
-            breakpoint: "0",
-        });
-        expect(engine.cssText).toMatchInlineSnapshot(`
-      "@media all and (min-width: 0px) {
-        .c { display: block; color: red }
-      }"
-    `);
-    });
-    test("hyphenate property", () => {
-        engine.addMediaRule(mediaId, mediaRuleOptions0);
-        engine.addStyleRule(".c", {
-            style: {
-                backgroundColor: { type: "keyword", value: "red" },
-            },
-            breakpoint: "0",
-        });
-        expect(engine.cssText).toMatchInlineSnapshot(`
-      "@media all and (min-width: 0px) {
-        .c { background-color: red }
-      }"
-    `);
-    });
-    test("add rule", () => {
-        engine.addMediaRule(mediaId, mediaRuleOptions0);
-        const rule1 = engine.addStyleRule(".c", {
-            style: {
-                ...style0,
-                color: { type: "keyword", value: "red" },
-            },
-            breakpoint: "0",
-        });
-        expect(engine.cssText).toMatchInlineSnapshot(`
-      "@media all and (min-width: 0px) {
-        .c { display: block; color: red }
-      }"
-    `);
-        expect(rule1.cssText).toMatchInlineSnapshot(`".c { display: block; color: red }"`);
-        engine.addStyleRule(".c2", {
-            style: {
-                ...style0,
-                color: { type: "keyword", value: "green" },
-            },
-            breakpoint: "0",
-        });
-        expect(engine.cssText).toMatchInlineSnapshot(`
-      "@media all and (min-width: 0px) {
-        .c { display: block; color: red }
-        .c2 { display: block; color: green }
-      }"
-    `);
-    });
-    test("update rule", () => {
-        engine.addMediaRule(mediaId, mediaRuleOptions0);
-        const rule = engine.addStyleRule(".c", {
-            style: {
-                ...style0,
-                color: { type: "keyword", value: "red" },
-            },
-            breakpoint: "0",
-        });
-        expect(engine.cssText).toMatchInlineSnapshot(`
-      "@media all and (min-width: 0px) {
-        .c { display: block; color: red }
-      }"
-    `);
-        expect(rule.cssText).toMatchInlineSnapshot(`".c { display: block; color: red }"`);
-        rule.styleMap.set("color", { type: "keyword", value: "green" });
-        expect(rule.cssText).toMatchInlineSnapshot(`".c { display: block; color: green }"`);
-        expect(engine.cssText).toMatchInlineSnapshot(`
-      "@media all and (min-width: 0px) {
-        .c { display: block; color: green }
-      }"
-    `);
-    });
-    test("don't override media queries", () => {
-        engine.addMediaRule(mediaId, mediaRuleOptions0);
-        engine.addStyleRule(".c", {
-            style: style0,
-            breakpoint: "0",
-        });
-        expect(engine.cssText).toMatchInlineSnapshot(`
-      "@media all and (min-width: 0px) {
-        .c { display: block }
-      }"
-    `);
-        engine.addMediaRule(mediaId, mediaRuleOptions0);
-        expect(engine.cssText).toMatchInlineSnapshot(`
-      "@media all and (min-width: 0px) {
-        .c { display: block }
-      }"
-    `);
-    });
-    test("plaintext rule", () => {
-        engine.addPlaintextRule(".c { color: red }");
-        expect(engine.cssText).toMatchInlineSnapshot(`".c { color: red }"`);
-    });
-    test("plaintext - no duplicates", () => {
-        engine.addPlaintextRule(".c { color: red }");
-        engine.addPlaintextRule(".c { color: red }");
-        engine.addPlaintextRule(".c { color: green }");
-        expect(engine.cssText).toMatchInlineSnapshot(`
-      ".c { color: red }
-      .c { color: green }"
-    `);
-    });
-    test("font family rule", () => {
-        engine.addFontFaceRule({
-            fontFamily: "Roboto",
-            fontStyle: "normal",
-            fontWeight: 400,
-            fontDisplay: "swap",
-            src: "url(/src)",
-        });
-        expect(engine.cssText).toMatchInlineSnapshot(`
-      "@font-face {
-        font-family: Roboto; font-style: normal; font-weight: 400; font-display: swap; src: url(/src);
-      }"
-    `);
-    });
-    test("clear", () => {
-        engine.addStyleRule(".c", {
-            style: style0,
-            breakpoint: "0",
-        });
-        engine.clear();
-        expect(engine.cssText).toMatchInlineSnapshot(`""`);
-    });
-});

package/lib/core/index.d.ts

@@ -1,5 +0,0 @@
-export { CssEngine } from "./css-engine";
-export type { AnyRule, StyleRule, MediaRule, PlaintextRule, FontFaceRule, } from "./rules";
-export * from "./create-css-engine";
-export * from "./to-value";
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/core/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,YAAY,EACV,OAAO,EACP,SAAS,EACT,SAAS,EACT,aAAa,EACb,YAAY,GACb,MAAM,SAAS,CAAC;AACjB,cAAc,qBAAqB,CAAC;AACpC,cAAc,YAAY,CAAC"}

package/lib/core/rules.d.ts

@@ -1,48 +0,0 @@
-import type { Style, StyleProperty, StyleValue } from "@webstudio-is/css-data";
-declare class StylePropertyMap {
-    #private;
-    onChange?: () => void;
-    set(property: StyleProperty, value?: StyleValue): 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 declare type MediaRuleOptions = {
-    minWidth?: number;
-    maxWidth?: number;
-    mediaType?: "all" | "screen" | "print";
-};
-export declare class MediaRule {
-    #private;
-    rules: Array<StyleRule | PlaintextRule>;
-    constructor(options?: MediaRuleOptions);
-    insertRule(rule: StyleRule | PlaintextRule): StyleRule | PlaintextRule;
-    get cssText(): string;
-}
-export declare class PlaintextRule {
-    cssText: string;
-    styleMap: Map<any, any>;
-    constructor(cssText: string);
-}
-export declare type FontFaceOptions = {
-    fontFamily: string;
-    fontStyle: "normal" | "italic" | "oblique";
-    fontWeight: number;
-    fontDisplay: "swap" | "auto" | "block" | "fallback" | "optional";
-    src: string;
-};
-export declare class FontFaceRule {
-    #private;
-    constructor(options: FontFaceOptions);
-    get cssText(): string;
-}
-export declare type AnyRule = StyleRule | MediaRule | PlaintextRule | FontFaceRule;
-export {};
-//# sourceMappingURL=rules.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"rules.d.ts","sourceRoot":"","sources":["../../src/core/rules.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAI/E,cAAM,gBAAgB;;IAIpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,GAAG,CAAC,QAAQ,EAAE,aAAa,EAAE,KAAK,CAAC,EAAE,UAAU;IAK/C,KAAK;IAKL,QAAQ;CAaT;AAED,qBAAa,SAAS;;IACpB,QAAQ,mBAAC;IACT,YAAY,SAAC;IACb,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;gBACV,YAAY,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK;IAY9C,IAAI,OAAO,WAEV;CACF;AAED,oBAAY,gBAAgB,GAAG;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,OAAO,CAAC;CACxC,CAAC;AAEF,qBAAa,SAAS;;IAEpB,KAAK,EAAE,KAAK,CAAC,SAAS,GAAG,aAAa,CAAC,CAAM;gBAEjC,OAAO,GAAE,gBAAqB;IAI1C,UAAU,CAAC,IAAI,EAAE,SAAS,GAAG,aAAa;IAI1C,IAAI,OAAO,WAcV;CACF;AAED,qBAAa,aAAa;IACxB,OAAO,SAAC;IACR,QAAQ,gBAAa;gBACT,OAAO,EAAE,MAAM;CAG5B;AAED,oBAAY,eAAe,GAAG;IAC5B,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC;IAC3C,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,UAAU,CAAC;IACjE,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,qBAAa,YAAY;;gBAEX,OAAO,EAAE,eAAe;IAGpC,IAAI,OAAO,WAIV;CACF;AAED,oBAAY,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,aAAa,GAAG,YAAY,CAAC"}

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

@@ -1,8 +0,0 @@
-export declare class StyleElement {
-    #private;
-    get isMounted(): boolean;
-    mount(): void;
-    unmount(): void;
-    render(cssText: string): void;
-}
-//# sourceMappingURL=style-element.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"style-element.d.ts","sourceRoot":"","sources":["../../src/core/style-element.ts"],"names":[],"mappings":"AAAA,qBAAa,YAAY;;IAEvB,IAAI,SAAS,YAEZ;IACD,KAAK;IAOL,OAAO;IAMP,MAAM,CAAC,OAAO,EAAE,MAAM;CAKvB"}

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

@@ -1,7 +0,0 @@
-import { StyleElement } from "./style-element";
-export declare class StyleSheet {
-    #private;
-    constructor(element: StyleElement);
-    replaceSync(cssText: string): void;
-}
-//# sourceMappingURL=style-sheet.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"style-sheet.d.ts","sourceRoot":"","sources":["../../src/core/style-sheet.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,qBAAa,UAAU;;gBAGT,OAAO,EAAE,YAAY;IAGjC,WAAW,CAAC,OAAO,EAAE,MAAM;CAM5B"}

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

@@ -1,7 +0,0 @@
-import type { StyleValue } from "@webstudio-is/css-data";
-declare type ToCssOptions = {
-    withFallback: boolean;
-};
-export declare const toValue: (value?: StyleValue, options?: ToCssOptions) => string;
-export {};
-//# sourceMappingURL=to-value.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"to-value.d.ts","sourceRoot":"","sources":["../../src/core/to-value.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAGzD,aAAK,YAAY,GAAG;IAClB,YAAY,EAAE,OAAO,CAAC;CACvB,CAAC;AAMF,eAAO,MAAM,OAAO,WACV,UAAU,YACT,YAAY,KACpB,MA0BF,CAAC"}

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

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=to-value.test.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"to-value.test.d.ts","sourceRoot":"","sources":["../../src/core/to-value.test.ts"],"names":[],"mappings":""}

package/lib/core/to-value.test.js

@@ -1,55 +0,0 @@
-import { toValue } from "./to-value";
-describe("Convert WS CSS Values to native CSS strings", () => {
-    test("keyword", () => {
-        const value = toValue({ type: "keyword", value: "red" });
-        expect(value).toBe("red");
-    });
-    test("unit", () => {
-        const value = toValue({ type: "unit", value: 10, unit: "px" });
-        expect(value).toBe("10px");
-    });
-    test("invalid", () => {
-        const value = toValue({ type: "invalid", value: "bad" });
-        expect(value).toBe("bad");
-    });
-    test("unset", () => {
-        const value = toValue({ type: "unset", value: "" });
-        expect(value).toBe("");
-    });
-    test("var", () => {
-        const value = toValue({ type: "var", value: "namespace", fallbacks: [] });
-        expect(value).toBe("var(--namespace)");
-    });
-    test("var with fallbacks", () => {
-        const value = toValue({
-            type: "var",
-            value: "namespace",
-            fallbacks: [
-                {
-                    type: "keyword",
-                    value: "normal",
-                },
-                {
-                    type: "unit",
-                    value: 10,
-                    unit: "px",
-                },
-            ],
-        });
-        expect(value).toBe("var(--namespace, normal, 10px)");
-    });
-    test("fontFamily", () => {
-        const value = toValue({
-            type: "fontFamily",
-            value: ["Courier New"],
-        });
-        expect(value).toBe("Courier New, monospace");
-    });
-    test("withFallback=false", () => {
-        const value = toValue({
-            type: "fontFamily",
-            value: ["Courier New"],
-        }, { withFallback: false });
-        expect(value).toBe("Courier New");
-    });
-});

package/lib/index.d.ts

@@ -1,2 +0,0 @@
-export * from "./core";
-//# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC"}