@webstudio-is/css-engine 0.72.0 → 0.73.0

package/lib/cjs/core/rules.js

@@ -44,12 +44,13 @@ __export(rules_exports, {
 module.exports = __toCommonJS(rules_exports);
 var import_to_value = require("./to-value");
 var import_to_property = require("./to-property");
-var _styleMap, _isDirty, _string, _transformValue, _onChange, _mediaType;
+var _styleMap, _isDirty, _string, _indent, _transformValue, _onChange, _mediaType;
 class StylePropertyMap {
   constructor(transformValue) {
     __privateAdd(this, _styleMap, /* @__PURE__ */ new Map());
     __privateAdd(this, _isDirty, false);
     __privateAdd(this, _string, "");
+    __privateAdd(this, _indent, 0);
     __privateAdd(this, _transformValue, void 0);
     __privateSet(this, _transformValue, transformValue);
   }
@@ -77,20 +78,25 @@ class StylePropertyMap {
     __privateSet(this, _isDirty, true);
     this.onChange?.();
   }
-  toString() {
-    if (__privateGet(this, _isDirty) === false) {
+  toString({ indent = 0 } = {}) {
+    if (__privateGet(this, _isDirty) === false && indent === __privateGet(this, _indent)) {
       return __privateGet(this, _string);
     }
+    __privateSet(this, _indent, indent);
     const block = [];
+    const spaces = " ".repeat(indent);
     for (const [property, value] of __privateGet(this, _styleMap)) {
       if (value === void 0) {
         continue;
       }
       block.push(
-        `${(0, import_to_property.toProperty)(property)}: ${(0, import_to_value.toValue)(value, __privateGet(this, _transformValue))}`
+        `${spaces}${(0, import_to_property.toProperty)(property)}: ${(0, import_to_value.toValue)(
+          value,
+          __privateGet(this, _transformValue)
+        )}`
       );
     }
-    __privateSet(this, _string, block.join("; "));
+    __privateSet(this, _string, block.join(";\n"));
     __privateSet(this, _isDirty, false);
     return __privateGet(this, _string);
   }
@@ -98,6 +104,7 @@ class StylePropertyMap {
 _styleMap = new WeakMap();
 _isDirty = new WeakMap();
 _string = new WeakMap();
+_indent = new WeakMap();
 _transformValue = new WeakMap();
 class StyleRule {
   constructor(selectorText, style, transformValue) {
@@ -113,7 +120,15 @@ class StyleRule {
     this.styleMap.onChange = __privateGet(this, _onChange);
   }
   get cssText() {
-    return `${this.selectorText} { ${this.styleMap} }`;
+    return this.toString();
+  }
+  toString(options = { indent: 0 }) {
+    const spaces = " ".repeat(options.indent);
+    return `${spaces}${this.selectorText} {
+${this.styleMap.toString({
+      indent: options.indent + 2
+    })}
+${spaces}}`;
   }
 }
 _onChange = new WeakMap();
@@ -129,12 +144,15 @@ class MediaRule {
     return rule;
   }
   get cssText() {
+    return this.toString();
+  }
+  toString() {
     if (this.rules.length === 0) {
       return "";
     }
     const rules = [];
     for (const rule of this.rules) {
-      rules.push(`  ${rule.cssText}`);
+      rules.push(rule.toString({ indent: 2 }));
     }
     let conditionText = "";
     const { minWidth, maxWidth } = this.options;
@@ -157,12 +175,18 @@ class PlaintextRule {
     this.styleMap = new StylePropertyMap();
     this.cssText = cssText;
   }
+  toString() {
+    return this.cssText;
+  }
 }
 class FontFaceRule {
   constructor(options) {
     this.options = options;
   }
   get cssText() {
+    return this.toString();
+  }
+  toString() {
     const decls = [];
     const { fontFamily, fontStyle, fontWeight, fontDisplay, src } = this.options;
     decls.push(

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

@@ -86,7 +86,7 @@ const toValue = (styleValue, transformValue) => {
     return value.value;
   }
   if (value.type === "layers") {
-    return value.value.map((value2) => toValue(value2, transformValue)).join(",");
+    return value.value.map((value2) => toValue(value2, transformValue)).join(", ");
   }
   if (value.type === "tuple") {
     return value.value.map((value2) => toValue(value2, transformValue)).join(" ");

package/lib/core/rules.js

@@ -16,7 +16,7 @@ var __privateSet = (obj, member, value, setter) => {
   setter ? setter.call(obj, value) : member.set(obj, value);
   return value;
 };
-var _styleMap, _isDirty, _string, _transformValue, _onChange, _mediaType;
+var _styleMap, _isDirty, _string, _indent, _transformValue, _onChange, _mediaType;
 import { toValue } from "./to-value";
 import { toProperty } from "./to-property";
 class StylePropertyMap {
@@ -24,6 +24,7 @@ class StylePropertyMap {
     __privateAdd(this, _styleMap, /* @__PURE__ */ new Map());
     __privateAdd(this, _isDirty, false);
     __privateAdd(this, _string, "");
+    __privateAdd(this, _indent, 0);
     __privateAdd(this, _transformValue, void 0);
     __privateSet(this, _transformValue, transformValue);
   }
@@ -51,20 +52,25 @@ class StylePropertyMap {
     __privateSet(this, _isDirty, true);
     this.onChange?.();
   }
-  toString() {
-    if (__privateGet(this, _isDirty) === false) {
+  toString({ indent = 0 } = {}) {
+    if (__privateGet(this, _isDirty) === false && indent === __privateGet(this, _indent)) {
       return __privateGet(this, _string);
     }
+    __privateSet(this, _indent, indent);
     const block = [];
+    const spaces = " ".repeat(indent);
     for (const [property, value] of __privateGet(this, _styleMap)) {
       if (value === void 0) {
         continue;
       }
       block.push(
-        `${toProperty(property)}: ${toValue(value, __privateGet(this, _transformValue))}`
+        `${spaces}${toProperty(property)}: ${toValue(
+          value,
+          __privateGet(this, _transformValue)
+        )}`
       );
     }
-    __privateSet(this, _string, block.join("; "));
+    __privateSet(this, _string, block.join(";\n"));
     __privateSet(this, _isDirty, false);
     return __privateGet(this, _string);
   }
@@ -72,6 +78,7 @@ class StylePropertyMap {
 _styleMap = new WeakMap();
 _isDirty = new WeakMap();
 _string = new WeakMap();
+_indent = new WeakMap();
 _transformValue = new WeakMap();
 class StyleRule {
   constructor(selectorText, style, transformValue) {
@@ -87,7 +94,15 @@ class StyleRule {
     this.styleMap.onChange = __privateGet(this, _onChange);
   }
   get cssText() {
-    return `${this.selectorText} { ${this.styleMap} }`;
+    return this.toString();
+  }
+  toString(options = { indent: 0 }) {
+    const spaces = " ".repeat(options.indent);
+    return `${spaces}${this.selectorText} {
+${this.styleMap.toString({
+      indent: options.indent + 2
+    })}
+${spaces}}`;
   }
 }
 _onChange = new WeakMap();
@@ -103,12 +118,15 @@ class MediaRule {
     return rule;
   }
   get cssText() {
+    return this.toString();
+  }
+  toString() {
     if (this.rules.length === 0) {
       return "";
     }
     const rules = [];
     for (const rule of this.rules) {
-      rules.push(`  ${rule.cssText}`);
+      rules.push(rule.toString({ indent: 2 }));
     }
     let conditionText = "";
     const { minWidth, maxWidth } = this.options;
@@ -131,12 +149,18 @@ class PlaintextRule {
     this.styleMap = new StylePropertyMap();
     this.cssText = cssText;
   }
+  toString() {
+    return this.cssText;
+  }
 }
 class FontFaceRule {
   constructor(options) {
     this.options = options;
   }
   get cssText() {
+    return this.toString();
+  }
+  toString() {
     const decls = [];
     const { fontFamily, fontStyle, fontWeight, fontDisplay, src } = this.options;
     decls.push(

package/lib/core/to-value.js

@@ -63,7 +63,7 @@ const toValue = (styleValue, transformValue) => {
     return value.value;
   }
   if (value.type === "layers") {
-    return value.value.map((value2) => toValue(value2, transformValue)).join(",");
+    return value.value.map((value2) => toValue(value2, transformValue)).join(", ");
   }
   if (value.type === "tuple") {
     return value.value.map((value2) => toValue(value2, transformValue)).join(" ");

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

@@ -10,7 +10,9 @@ declare class StylePropertyMap {
     keys(): IterableIterator<"clip" | "top" | "right" | `--${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" | "bottom" | "boxDecorationBreak" | "boxShadow" | "boxSizing" | "breakAfter" | "breakBefore" | "breakInside" | "captionSide" | "caretColor" | "caretShape" | "clear" | "clipPath" | "color" | "printColorAdjust" | "colorScheme" | "columnCount" | "columnFill" | "columnGap" | "columnRuleColor" | "columnRuleStyle" | "columnRuleWidth" | "columnSpan" | "columnWidth" | "contain" | "containIntrinsicBlockSize" | "containIntrinsicHeight" | "containIntrinsicInlineSize" | "containIntrinsicWidth" | "content" | "contentVisibility" | "counterIncrement" | "counterReset" | "counterSet" | "cursor" | "direction" | "display" | "emptyCells" | "filter" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "float" | "fontFamily" | "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" | "height" | "hyphenateCharacter" | "hyphens" | "imageOrientation" | "imageRendering" | "imageResolution" | "initialLetter" | "initialLetterAlign" | "inlineSize" | "inputSecurity" | "insetBlockEnd" | "insetBlockStart" | "insetInlineEnd" | "insetInlineStart" | "isolation" | "justifyContent" | "justifyItems" | "justifySelf" | "justifyTracks" | "left" | "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" | "width" | "willChange" | "wordBreak" | "wordSpacing" | "wordWrap" | "writingMode" | "zIndex">;
     delete(property: StyleProperty): void;
     clear(): void;
-    toString(): string;
+    toString({ indent }?: {
+        indent?: number | undefined;
+    }): string;
 }
 export declare class StyleRule {
     #private;
@@ -19,6 +21,9 @@ export declare class StyleRule {
     onChange?: () => void;
     constructor(selectorText: string, style: Style, transformValue?: TransformValue);
     get cssText(): string;
+    toString(options?: {
+        indent: number;
+    }): string;
 }
 export type MediaRuleOptions = {
     minWidth?: number;
@@ -32,11 +37,13 @@ export declare class MediaRule {
     constructor(options?: MediaRuleOptions);
     insertRule(rule: StyleRule | PlaintextRule): StyleRule | PlaintextRule;
     get cssText(): string;
+    toString(): string;
 }
 export declare class PlaintextRule {
     cssText: string;
     styleMap: StylePropertyMap;
     constructor(cssText: string);
+    toString(): string;
 }
 export type FontFaceOptions = {
     fontFamily: string;
@@ -49,6 +56,7 @@ export declare class FontFaceRule {
     options: FontFaceOptions;
     constructor(options: FontFaceOptions);
     get cssText(): string;
+    toString(): string;
 }
 export type AnyRule = StyleRule | MediaRule | PlaintextRule | FontFaceRule;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/css-engine",
-  "version": "0.72.0",
+  "version": "0.73.0",
   "description": "CSS Renderer for Webstudio",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -9,8 +9,8 @@
     "hyphenate-style-name": "^1.0.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@webstudio-is/css-data": "^0.72.0",
-    "@webstudio-is/fonts": "^0.72.0"
+    "@webstudio-is/css-data": "^0.73.0",
+    "@webstudio-is/fonts": "^0.73.0"
   },
   "devDependencies": {
     "@jest/globals": "^29.3.1",
@@ -19,7 +19,7 @@
     "@types/react": "^18.0.35",
     "@types/react-dom": "^18.0.11",
     "jest": "^29.3.1",
-    "typescript": "5.0.3",
+    "typescript": "5.1.3",
     "@webstudio-is/jest-config": "^1.0.6",
     "@webstudio-is/scripts": "^0.0.0",
     "@webstudio-is/storybook-config": "^0.0.0",

package/src/core/css-engine.test.ts

@@ -37,7 +37,9 @@ describe("CssEngine", () => {
     });
     expect(engine.cssText).toMatchInlineSnapshot(`
       "@media all and (min-width: 0px) {
-        .c1 { color: red }
+        .c1 {
+          color: red
+        }
       }"
     `);
   });
@@ -50,7 +52,9 @@ describe("CssEngine", () => {
     });
     expect(engine.cssText).toMatchInlineSnapshot(`
       "@media all and (max-width: 1000px) {
-        .c1 { color: red }
+        .c1 {
+          color: red
+        }
       }"
     `);
   });
@@ -63,7 +67,9 @@ describe("CssEngine", () => {
     });
     expect(engine.cssText).toMatchInlineSnapshot(`
       "@media all and (min-width: 360px) and (max-width: 1000px) {
-        .c1 { color: red }
+        .c1 {
+          color: red
+        }
       }"
     `);
   });
@@ -75,7 +81,9 @@ describe("CssEngine", () => {
     });
     expect(engine.cssText).toMatchInlineSnapshot(`
       "@media all {
-        .c { display: block }
+        .c {
+          display: block
+        }
       }"
     `);
     engine.addStyleRule(".c1", {
@@ -84,8 +92,12 @@ describe("CssEngine", () => {
     });
     expect(engine.cssText).toMatchInlineSnapshot(`
       "@media all {
-        .c { display: block }
-        .c1 { color: red }
+        .c {
+          display: block
+        }
+        .c1 {
+          color: red
+        }
       }"
     `);
 
@@ -97,11 +109,17 @@ describe("CssEngine", () => {
     // 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 }
+        .c {
+          display: block
+        }
+        .c1 {
+          color: red
+        }
       }
       @media all and (min-width: 0px) {
-        .c1 { color: blue }
+        .c1 {
+          color: blue
+        }
       }"
     `);
   });
@@ -127,13 +145,19 @@ describe("CssEngine", () => {
     // Default media query should allways be the first to have the lowest source order specificity
     expect(engine.cssText).toMatchInlineSnapshot(`
       "@media all {
-        .c3 { display: block }
+        .c3 {
+          display: block
+        }
       }
       @media all and (min-width: 0px) {
-        .c1 { display: block }
+        .c1 {
+          display: block
+        }
       }
       @media all and (min-width: 300px) {
-        .c2 { display: flex }
+        .c2 {
+          display: flex
+        }
       }"
     `);
   });
@@ -149,8 +173,12 @@ describe("CssEngine", () => {
     });
     expect(engine.cssText).toMatchInlineSnapshot(`
       "@media all {
-        .c0 { display: block }
-        .c1 { display: flex }
+        .c0 {
+          display: block
+        }
+        .c1 {
+          display: flex
+        }
       }"
     `);
 
@@ -166,8 +194,12 @@ describe("CssEngine", () => {
     });
     expect(engine.cssText).toMatchInlineSnapshot(`
       "@media all {
-        .c1 { display: flex }
-        .c0 { display: block }
+        .c1 {
+          display: flex
+        }
+        .c0 {
+          display: block
+        }
       }"
     `);
   });
@@ -183,7 +215,10 @@ describe("CssEngine", () => {
     });
     expect(engine.cssText).toMatchInlineSnapshot(`
       "@media all and (min-width: 0px) {
-        .c { display: block; color: red }
+        .c {
+          display: block;
+          color: red
+        }
       }"
     `);
   });
@@ -198,7 +233,9 @@ describe("CssEngine", () => {
     });
     expect(engine.cssText).toMatchInlineSnapshot(`
       "@media all and (min-width: 0px) {
-        .c { background-color: red }
+        .c {
+          background-color: red
+        }
       }"
     `);
   });
@@ -214,12 +251,18 @@ describe("CssEngine", () => {
     });
     expect(engine.cssText).toMatchInlineSnapshot(`
       "@media all and (min-width: 0px) {
-        .c { display: block; color: red }
+        .c {
+          display: block;
+          color: red
+        }
+      }"
+    `);
+    expect(rule1.cssText).toMatchInlineSnapshot(`
+      ".c {
+        display: block;
+        color: red
       }"
     `);
-    expect(rule1.cssText).toMatchInlineSnapshot(
-      `".c { display: block; color: red }"`
-    );
     engine.addStyleRule(".c2", {
       style: {
         ...style0,
@@ -229,8 +272,14 @@ describe("CssEngine", () => {
     });
     expect(engine.cssText).toMatchInlineSnapshot(`
       "@media all and (min-width: 0px) {
-        .c { display: block; color: red }
-        .c2 { display: block; color: green }
+        .c {
+          display: block;
+          color: red
+        }
+        .c2 {
+          display: block;
+          color: green
+        }
       }"
     `);
   });
@@ -246,22 +295,34 @@ describe("CssEngine", () => {
     });
     expect(engine.cssText).toMatchInlineSnapshot(`
       "@media all and (min-width: 0px) {
-        .c { display: block; color: red }
+        .c {
+          display: block;
+          color: red
+        }
+      }"
+    `);
+    expect(rule.cssText).toMatchInlineSnapshot(`
+      ".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(rule.cssText).toMatchInlineSnapshot(`
+      ".c {
+        display: block;
+        color: green
+      }"
+    `);
 
     expect(engine.cssText).toMatchInlineSnapshot(`
       "@media all and (min-width: 0px) {
-        .c { display: block; color: green }
+        .c {
+          display: block;
+          color: green
+        }
       }"
     `);
   });
@@ -276,13 +337,17 @@ describe("CssEngine", () => {
     });
     expect(engine.cssText).toMatchInlineSnapshot(`
       "@media all and (min-width: 0px) {
-        .c { color: red }
+        .c {
+          color: red
+        }
       }"
     `);
     engine.addMediaRule(mediaId0, { minWidth: 10 });
     expect(engine.cssText).toMatchInlineSnapshot(`
       "@media all and (min-width: 10px) {
-        .c { color: red }
+        .c {
+          color: red
+        }
       }"
     `);
   });
@@ -295,13 +360,17 @@ describe("CssEngine", () => {
     });
     expect(engine.cssText).toMatchInlineSnapshot(`
       "@media all and (min-width: 0px) {
-        .c { display: block }
+        .c {
+          display: block
+        }
       }"
     `);
     engine.addMediaRule(mediaId0, mediaRuleOptions0);
     expect(engine.cssText).toMatchInlineSnapshot(`
       "@media all and (min-width: 0px) {
-        .c { display: block }
+        .c {
+          display: block
+        }
       }"
     `);
   });
@@ -366,7 +435,9 @@ describe("CssEngine", () => {
     rule.styleMap.delete("display");
     expect(engine.cssText).toMatchInlineSnapshot(`
       "@media all {
-        .c { color: black }
+        .c {
+          color: black
+        }
       }"
     `);
   });
@@ -408,7 +479,9 @@ describe("CssEngine", () => {
     rule.styleMap.delete("display");
     expect(engine.cssText).toMatchInlineSnapshot(`
       "@media all {
-        .c { background-image: url(foo.png) }
+        .c {
+          background-image: url(foo.png)
+        }
       }"
     `);
   });

package/src/core/rules.ts

@@ -6,6 +6,7 @@ class StylePropertyMap {
   #styleMap: Map<StyleProperty, StyleValue | undefined> = new Map();
   #isDirty = false;
   #string = "";
+  #indent = 0;
   #transformValue?: TransformValue;
   onChange?: () => void;
   constructor(transformValue?: TransformValue) {
@@ -35,20 +36,25 @@ class StylePropertyMap {
     this.#isDirty = true;
     this.onChange?.();
   }
-  toString() {
-    if (this.#isDirty === false) {
+  toString({ indent = 0 } = {}) {
+    if (this.#isDirty === false && indent === this.#indent) {
       return this.#string;
     }
+    this.#indent = indent;
     const block: Array<string> = [];
+    const spaces = " ".repeat(indent);
     for (const [property, value] of this.#styleMap) {
       if (value === undefined) {
         continue;
       }
       block.push(
-        `${toProperty(property)}: ${toValue(value, this.#transformValue)}`
+        `${spaces}${toProperty(property)}: ${toValue(
+          value,
+          this.#transformValue
+        )}`
       );
     }
-    this.#string = block.join("; ");
+    this.#string = block.join(";\n");
     this.#isDirty = false;
     return this.#string;
   }
@@ -75,7 +81,13 @@ export class StyleRule {
     this.onChange?.();
   };
   get cssText() {
-    return `${this.selectorText} { ${this.styleMap} }`;
+    return this.toString();
+  }
+  toString(options = { indent: 0 }) {
+    const spaces = " ".repeat(options.indent);
+    return `${spaces}${this.selectorText} {\n${this.styleMap.toString({
+      indent: options.indent + 2,
+    })}\n${spaces}}`;
   }
 }
 
@@ -98,12 +110,15 @@ export class MediaRule {
     return rule;
   }
   get cssText() {
+    return this.toString();
+  }
+  toString() {
     if (this.rules.length === 0) {
       return "";
     }
     const rules = [];
     for (const rule of this.rules) {
-      rules.push(`  ${rule.cssText}`);
+      rules.push(rule.toString({ indent: 2 }));
     }
     let conditionText = "";
     const { minWidth, maxWidth } = this.options;
@@ -125,6 +140,9 @@ export class PlaintextRule {
   constructor(cssText: string) {
     this.cssText = cssText;
   }
+  toString() {
+    return this.cssText;
+  }
 }
 
 export type FontFaceOptions = {
@@ -141,6 +159,9 @@ export class FontFaceRule {
     this.options = options;
   }
   get cssText() {
+    return this.toString();
+  }
+  toString() {
     const decls = [];
     const { fontFamily, fontStyle, fontWeight, fontDisplay, src } =
       this.options;

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

@@ -116,7 +116,7 @@ describe("Convert WS CSS Values to native CSS strings", () => {
       }
     );
 
-    expect(value).toBe("auto,10px,calc(10px),url(foo.png)");
+    expect(value).toBe("auto, 10px, calc(10px), url(foo.png)");
   });
 
   test("tuple", () => {

package/src/core/to-value.ts

@@ -91,7 +91,9 @@ export const toValue = (
   }
 
   if (value.type === "layers") {
-    return value.value.map((value) => toValue(value, transformValue)).join(",");
+    return value.value
+      .map((value) => toValue(value, transformValue))
+      .join(", ");
   }
 
   if (value.type === "tuple") {