@webstudio-is/css-engine 0.145.0 → 0.163.0

package/lib/index.js

@@ -96,28 +96,150 @@ var toProperty = (property) => {
 };
 
 // src/core/rules.ts
+var getDeclarationKey = (declaraionKey) => {
+  const { breakpoint, selector, property } = declaraionKey;
+  return `${breakpoint}:${selector}:${property}`;
+};
+var MixinRule = class {
+  // use map to avoid duplicated properties
+  #declarations = /* @__PURE__ */ new Map();
+  #dirtyBreakpoints = /* @__PURE__ */ new Set();
+  /*
+   * check if breakpoint was updated
+   */
+  isDirtyBreakpoint(breakpoint) {
+    return this.#dirtyBreakpoints.has(breakpoint);
+  }
+  /**
+   * reset breakpoints invalidation
+   */
+  clearBreakpoints() {
+    this.#dirtyBreakpoints.clear();
+  }
+  setDeclaration(declaration) {
+    this.#declarations.set(getDeclarationKey(declaration), declaration);
+    this.#dirtyBreakpoints.add(declaration.breakpoint);
+  }
+  deleteDeclaration(declaration) {
+    this.#declarations.delete(getDeclarationKey(declaration));
+    this.#dirtyBreakpoints.add(declaration.breakpoint);
+  }
+  getDeclarations() {
+    return this.#declarations.values();
+  }
+};
+var NestingRule = class {
+  #selector;
+  #descendantSuffix;
+  #mixinRules = /* @__PURE__ */ new Map();
+  #mixins = /* @__PURE__ */ new Set();
+  // use map to avoid duplicated properties
+  #declarations = /* @__PURE__ */ new Map();
+  // cached generated rule by breakpoint
+  #cache = /* @__PURE__ */ new Map();
+  constructor(mixinRules, selector, descendantSuffix) {
+    this.#selector = selector;
+    this.#descendantSuffix = descendantSuffix;
+    this.#mixinRules = mixinRules;
+  }
+  getSelector() {
+    return this.#selector;
+  }
+  setSelector(selector) {
+    this.#selector = selector;
+    this.#cache.clear();
+  }
+  getDescendantSuffix() {
+    return this.#descendantSuffix;
+  }
+  addMixin(mixin) {
+    this.#mixins.add(mixin);
+    this.#cache.clear();
+  }
+  applyMixins(mixins) {
+    this.#mixins = new Set(mixins);
+    this.#cache.clear();
+  }
+  setDeclaration(declaration) {
+    this.#declarations.set(getDeclarationKey(declaration), declaration);
+    this.#cache.delete(declaration.breakpoint);
+  }
+  deleteDeclaration(declaration) {
+    this.#declarations.delete(getDeclarationKey(declaration));
+    this.#cache.delete(declaration.breakpoint);
+  }
+  getDeclarations() {
+    const declarations = /* @__PURE__ */ new Map();
+    for (const mixin of this.#mixins) {
+      const rule = this.#mixinRules.get(mixin);
+      if (rule === void 0) {
+        continue;
+      }
+      for (const declaration of rule.getDeclarations()) {
+        declarations.set(getDeclarationKey(declaration), declaration);
+      }
+    }
+    for (const declaration of this.#declarations.values()) {
+      declarations.set(getDeclarationKey(declaration), declaration);
+    }
+    return declarations.values();
+  }
+  toString({
+    breakpoint,
+    indent = 0,
+    transformValue
+  }) {
+    for (const mixin of this.#mixins) {
+      const rule = this.#mixinRules.get(mixin);
+      if (rule?.isDirtyBreakpoint(breakpoint)) {
+        this.#cache.delete(breakpoint);
+      }
+    }
+    const cached = this.#cache.get(breakpoint);
+    if (cached && cached.indent === indent && cached.transformValue === transformValue) {
+      return cached.generated;
+    }
+    const spaces = " ".repeat(indent);
+    const linesBySelector = /* @__PURE__ */ new Map();
+    for (const declaration of this.getDeclarations()) {
+      if (declaration.breakpoint !== breakpoint) {
+        continue;
+      }
+      const { selector: nestedSelector, property, value } = declaration;
+      const selector = this.#selector + this.#descendantSuffix + nestedSelector;
+      const lines = linesBySelector.get(selector) ?? "";
+      const propertyString = toProperty(property);
+      const valueString = toValue(value, transformValue);
+      const line = `${spaces}  ${propertyString}: ${valueString}`;
+      linesBySelector.set(selector, lines === "" ? line : `${lines};
+${line}`);
+    }
+    const generated = Array.from(linesBySelector).sort(
+      ([leftSelector], [rightSelector]) => leftSelector.localeCompare(rightSelector)
+    ).map(
+      ([selector, lines]) => `${spaces}${selector} {
+${lines}
+${spaces}}
+`
+    ).join("").trimEnd();
+    this.#cache.set(breakpoint, { generated, indent, transformValue });
+    return generated;
+  }
+};
 var StylePropertyMap = class {
+  #cached;
   #styleMap = /* @__PURE__ */ new Map();
-  #isDirty = true;
-  #string = "";
   #indent = 0;
   #transformValue;
-  #onChange;
-  constructor(style, transformValue, onChange) {
-    this.#transformValue = transformValue;
-    this.#onChange = onChange;
+  constructor(style) {
     let property;
     for (property in style) {
       this.#styleMap.set(property, style[property]);
     }
   }
-  setTransformer(transformValue) {
-    this.#transformValue = transformValue;
-  }
   set(property, value) {
     this.#styleMap.set(property, value);
-    this.#isDirty = true;
-    this.#onChange?.();
+    this.#cached = void 0;
   }
   get(property) {
     return this.#styleMap.get(property);
@@ -133,19 +255,19 @@ var StylePropertyMap = class {
   }
   delete(property) {
     this.#styleMap.delete(property);
-    this.#isDirty = true;
-    this.#onChange?.();
+    this.#cached = void 0;
   }
   clear() {
     this.#styleMap.clear();
-    this.#isDirty = true;
-    this.#onChange?.();
-  }
-  toString({ indent = 0 } = {}) {
-    if (this.#isDirty === false && indent === this.#indent) {
-      return this.#string;
+    this.#cached = void 0;
+  }
+  toString({
+    indent = 0,
+    transformValue
+  } = {}) {
+    if (this.#cached && indent === this.#indent && transformValue === this.#transformValue) {
+      return this.#cached;
     }
-    this.#indent = indent;
     const block = [];
     const spaces = " ".repeat(indent);
     for (const [property, value] of this.#styleMap) {
@@ -153,48 +275,53 @@ var StylePropertyMap = class {
         continue;
       }
       block.push(
-        `${spaces}${toProperty(property)}: ${toValue(
-          value,
-          this.#transformValue
-        )}`
+        `${spaces}${toProperty(property)}: ${toValue(value, transformValue)}`
       );
     }
-    this.#string = block.join(";\n");
-    this.#isDirty = false;
-    return this.#string;
+    this.#cached = block.join(";\n");
+    this.#indent = indent;
+    this.#transformValue = transformValue;
+    return this.#cached;
   }
 };
 var StyleRule = class {
   styleMap;
   selectorText;
-  constructor(selectorText, style, transformValue, onChange) {
+  constructor(selectorText, style) {
     this.selectorText = selectorText;
-    this.styleMap = style instanceof StylePropertyMap ? style : new StylePropertyMap(style, transformValue, onChange);
+    this.styleMap = style instanceof StylePropertyMap ? style : new StylePropertyMap(style);
   }
   get cssText() {
     return this.toString();
   }
-  toString(options = { indent: 0 }) {
-    const spaces = " ".repeat(options.indent);
+  toString({
+    indent = 0,
+    transformValue
+  } = {}) {
+    const spaces = " ".repeat(indent);
+    const content = this.styleMap.toString({
+      indent: indent + 2,
+      transformValue
+    });
     return `${spaces}${this.selectorText} {
-${this.styleMap.toString({
-      indent: options.indent + 2
-    })}
+${content}
 ${spaces}}`;
   }
 };
 var MediaRule = class {
+  #name;
   options;
   rules;
   #mediaType;
-  constructor(options = {}) {
+  constructor(name, options = {}) {
+    this.#name = name;
     this.options = options;
     this.rules = /* @__PURE__ */ new Map();
     this.#mediaType = options.mediaType ?? "all";
   }
   insertRule(rule) {
     this.rules.set(
-      "selectorText" in rule ? rule.selectorText : rule.cssText,
+      rule instanceof StyleRule ? rule.selectorText : rule.cssText,
       rule
     );
     return rule;
@@ -203,12 +330,31 @@ var MediaRule = class {
     return this.toString();
   }
   toString() {
-    if (this.rules.size === 0) {
+    return this.generateRule({ nestingRules: [] });
+  }
+  generateRule({
+    nestingRules,
+    transformValue
+  }) {
+    if (this.rules.size === 0 && nestingRules.length === 0) {
       return "";
     }
     const rules = [];
     for (const rule of this.rules.values()) {
-      rules.push(rule.toString({ indent: 2 }));
+      rules.push(rule.toString({ indent: 2, transformValue }));
+    }
+    for (const rule of nestingRules) {
+      const generatedRule = rule.toString({
+        breakpoint: this.#name,
+        indent: 2,
+        transformValue
+      });
+      if (generatedRule !== "") {
+        rules.push(generatedRule);
+      }
+    }
+    if (rules.length === 0) {
+      return "";
     }
     let conditionText = "";
     const { minWidth, maxWidth } = this.options;
@@ -227,26 +373,28 @@ ${rules.join(
 };
 var PlaintextRule = class {
   cssText;
-  styleMap;
   constructor(cssText) {
     this.cssText = cssText;
-    this.styleMap = new StylePropertyMap({});
   }
   toString() {
     return this.cssText;
   }
 };
 var FontFaceRule = class {
-  options;
+  #cached;
+  #options;
   constructor(options) {
-    this.options = options;
+    this.#options = options;
   }
   get cssText() {
     return this.toString();
   }
   toString() {
+    if (this.#cached) {
+      return this.#cached;
+    }
     const decls = [];
-    const { fontFamily, fontStyle, fontWeight, fontDisplay, src } = this.options;
+    const { fontFamily, fontStyle, fontWeight, fontDisplay, src } = this.#options;
     const value = toValue(
       { type: "fontFamily", value: [fontFamily] },
       // Avoids adding a fallback automatically which needs to happen for font family in general but not for font face.
@@ -257,9 +405,10 @@ var FontFaceRule = class {
     decls.push(`font-weight: ${fontWeight}`);
     decls.push(`font-display: ${fontDisplay}`);
     decls.push(`src: ${src}`);
-    return `@font-face {
+    this.#cached = `@font-face {
   ${decls.join("; ")};
 }`;
+    return this.#cached;
   }
 };
 
@@ -325,23 +474,26 @@ var StyleSheet = class {
   #cssText = "";
   #mediaRules = /* @__PURE__ */ new Map();
   #plainRules = /* @__PURE__ */ new Map();
+  #mixinRules = /* @__PURE__ */ new Map();
+  nestingRules = /* @__PURE__ */ new Map();
   #fontFaceRules = [];
-  #isDirty = false;
+  #transformValue;
   #element;
   constructor(element) {
     this.#element = element;
   }
+  setTransformer(transformValue) {
+    this.#transformValue = transformValue;
+  }
   addMediaRule(id, options) {
     let mediaRule = this.#mediaRules.get(id);
     if (mediaRule === void 0) {
-      mediaRule = new MediaRule(options);
+      mediaRule = new MediaRule(id, options);
       this.#mediaRules.set(id, mediaRule);
-      this.#isDirty = true;
       return mediaRule;
     }
     if (options) {
       mediaRule.options = options;
-      this.#isDirty = true;
     }
     if (mediaRule === void 0) {
       throw new Error("No media rule found");
@@ -353,21 +505,32 @@ var StyleSheet = class {
     if (rule !== void 0) {
       return rule;
     }
-    this.#isDirty = true;
     return this.#plainRules.set(cssText, new PlaintextRule(cssText));
   }
+  addMixinRule(name) {
+    let rule = this.#mixinRules.get(name);
+    if (rule === void 0) {
+      rule = new MixinRule();
+      this.#mixinRules.set(name, rule);
+    }
+    return rule;
+  }
+  addNestingRule(selector, descendantSuffix = "") {
+    const key = selector + descendantSuffix;
+    let rule = this.nestingRules.get(key);
+    if (rule === void 0) {
+      rule = new NestingRule(this.#mixinRules, selector, descendantSuffix);
+      this.nestingRules.set(key, rule);
+    }
+    return rule;
+  }
   addFontFaceRule(options) {
-    this.#isDirty = true;
     return this.#fontFaceRules.push(new FontFaceRule(options));
   }
-  markAsDirty() {
-    this.#isDirty = true;
-  }
-  get cssText() {
-    if (this.#isDirty === false) {
-      return this.#cssText;
-    }
-    this.#isDirty = false;
+  generateWith({
+    nestingRules,
+    transformValue
+  }) {
     const css = [];
     css.push(...this.#fontFaceRules.map((rule) => rule.cssText));
     for (const plaintextRule of this.#plainRules.values()) {
@@ -377,19 +540,32 @@ var StyleSheet = class {
       (ruleA, ruleB) => compareMedia(ruleA.options, ruleB.options)
     );
     for (const mediaRule of sortedMediaRules) {
-      const { cssText } = mediaRule;
+      const cssText = mediaRule.generateRule({
+        nestingRules,
+        transformValue
+      });
       if (cssText !== "") {
         css.push(cssText);
       }
     }
+    for (const rule of this.#mixinRules.values()) {
+      rule.clearBreakpoints();
+    }
     this.#cssText = css.join("\n");
     return this.#cssText;
   }
+  get cssText() {
+    return this.generateWith({
+      nestingRules: Array.from(this.nestingRules.values()),
+      transformValue: this.#transformValue
+    });
+  }
   clear() {
     this.#mediaRules.clear();
+    this.#mixinRules.clear();
+    this.nestingRules.clear();
     this.#plainRules.clear();
     this.#fontFaceRules = [];
-    this.#isDirty = true;
   }
   render() {
     this.#element.mount();
@@ -409,58 +585,12 @@ var StyleSheet = class {
 // src/core/style-sheet-regular.ts
 var defaultMediaRuleId = "__default-media-rule__";
 var StyleSheetRegular = class extends StyleSheet {
-  addStyleRule(rule, selectorText, transformValue) {
+  addStyleRule(rule, selectorText) {
     const mediaRule = this.addMediaRule(rule.breakpoint || defaultMediaRuleId);
-    this.markAsDirty();
-    const styleRule = new StyleRule(
-      selectorText,
-      rule.style,
-      transformValue,
-      this.#onChangeRule
-    );
+    const styleRule = new StyleRule(selectorText, rule.style);
     mediaRule.insertRule(styleRule);
     return styleRule;
   }
-  #onChangeRule = () => {
-    this.markAsDirty();
-  };
-};
-
-// src/core/style-sheet-atomic.ts
-import hash from "@emotion/hash";
-var defaultMediaRuleId2 = "__default-media-rule__";
-var StyleSheetAtomic = class extends StyleSheet {
-  addStyleRule({ style, breakpoint }, selectorSuffix = "", transformValue) {
-    const mediaRule = this.addMediaRule(breakpoint || defaultMediaRuleId2);
-    const styleRules = [];
-    const classes = [];
-    let property;
-    for (property in style) {
-      const stylePropertyMap = new StylePropertyMap(
-        { [property]: style[property] },
-        transformValue
-      );
-      const className = `c${hash(
-        stylePropertyMap + selectorSuffix + breakpoint
-      )}`;
-      classes.push(className);
-      const newStyleRule = new StyleRule(
-        `.${className}${selectorSuffix}`,
-        stylePropertyMap,
-        transformValue,
-        this.#onChangeRule
-      );
-      styleRules.push(newStyleRule);
-      if (mediaRule.rules.has(newStyleRule.selectorText) === false) {
-        mediaRule.insertRule(newStyleRule);
-        this.markAsDirty();
-      }
-    }
-    return { styleRules, classes };
-  }
-  #onChangeRule = () => {
-    this.markAsDirty();
-  };
 };
 
 // src/core/create-style-sheet.ts
@@ -468,10 +598,6 @@ var createRegularStyleSheet = (options) => {
   const element = new StyleElement(options?.name);
   return new StyleSheetRegular(element);
 };
-var createAtomicStyleSheet = (options) => {
-  const element = new StyleElement(options?.name);
-  return new StyleSheetAtomic(element);
-};
 
 // src/core/match-media.ts
 var matchMedia = (options, width) => {
@@ -495,6 +621,45 @@ var findApplicableMedia = (media, width) => {
   }
 };
 
+// src/core/atomic.ts
+import hash from "@emotion/hash";
+var generateAtomic = (sheet, options) => {
+  const { getKey, transformValue } = options;
+  const atomicRules = /* @__PURE__ */ new Map();
+  const classesMap = /* @__PURE__ */ new Map();
+  for (const rule of sheet.nestingRules.values()) {
+    const descendantSuffix = rule.getDescendantSuffix();
+    const groupKey = getKey(rule);
+    let classList = classesMap.get(groupKey);
+    if (classList === void 0) {
+      classList = [];
+      classesMap.set(groupKey, classList);
+    }
+    for (const declaration of rule.getDeclarations()) {
+      const atomicHash = hash(
+        descendantSuffix + declaration.breakpoint + declaration.selector + declaration.property + toValue(declaration.value, transformValue)
+      );
+      const className = `c${atomicHash}`;
+      let atomicRule = atomicRules.get(atomicHash);
+      if (atomicRule === void 0) {
+        atomicRule = new NestingRule(
+          /* @__PURE__ */ new Map(),
+          `.${className}`,
+          descendantSuffix
+        );
+        atomicRule.setDeclaration(declaration);
+        atomicRules.set(atomicHash, atomicRule);
+      }
+      classList.push(className);
+    }
+  }
+  const cssText = sheet.generateWith({
+    nestingRules: Array.from(atomicRules.values()),
+    transformValue
+  });
+  return { cssText, classesMap };
+};
+
 // src/schema.ts
 import { z } from "zod";
 var Unit = z.string();
@@ -618,10 +783,10 @@ export {
   UnitValue,
   UnparsedValue,
   compareMedia,
-  createAtomicStyleSheet,
   createRegularStyleSheet,
   equalMedia,
   findApplicableMedia,
+  generateAtomic,
   isValidStaticStyleValue,
   matchMedia,
   toProperty,

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

@@ -0,0 +1,12 @@
+import type { StyleSheet } from "./style-sheet";
+import { NestingRule } from "./rules";
+import { type TransformValue } from "./to-value";
+type Options = {
+    getKey: (rule: NestingRule) => string;
+    transformValue?: TransformValue;
+};
+export declare const generateAtomic: (sheet: StyleSheet, options: Options) => {
+    cssText: string;
+    classesMap: Map<string, string[]>;
+};
+export {};

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

@@ -1,8 +1,4 @@
 import { StyleSheetRegular } from "./style-sheet-regular";
-import { StyleSheetAtomic } from "./style-sheet-atomic";
 export declare const createRegularStyleSheet: (options?: {
     name?: string;
 }) => StyleSheetRegular;
-export declare const createAtomicStyleSheet: (options?: {
-    name?: string;
-}) => StyleSheetAtomic;

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

@@ -1,6 +1,5 @@
-export type { AnyRule, StyleRule, MediaRule, PlaintextRule, FontFaceRule, } from "./rules";
+export type { NestingRule, StyleRule, MediaRule, PlaintextRule, FontFaceRule, } from "./rules";
 export type { StyleSheetRegular } from "./style-sheet-regular";
-export type { StyleSheetAtomic } from "./style-sheet-atomic";
 export * from "./create-style-sheet";
 export * from "./to-value";
 export * from "./to-property";
@@ -8,3 +7,4 @@ export * from "./match-media";
 export * from "./equal-media";
 export * from "./compare-media";
 export * from "./find-applicable-media";
+export * from "./atomic";

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

@@ -1,9 +1,67 @@
 import type { Style, StyleProperty, StyleValue } from "../schema";
 import { type TransformValue } from "./to-value";
+type Declaration = {
+    breakpoint: string;
+    selector: string;
+    property: StyleProperty;
+    value: StyleValue;
+};
+type DeclarationKey = Omit<Declaration, "value">;
+/**
+ * Reusable style rule in any nesting rule
+ *
+ * @mixin name {
+ *   \@media breakpoint {
+ *     &selector {
+ *       property: value
+ *     }
+ *   }
+ * }
+ */
+export declare class MixinRule {
+    #private;
+    isDirtyBreakpoint(breakpoint: string): boolean;
+    /**
+     * reset breakpoints invalidation
+     */
+    clearBreakpoints(): void;
+    setDeclaration(declaration: Declaration): void;
+    deleteDeclaration(declaration: DeclarationKey): void;
+    getDeclarations(): IterableIterator<Declaration>;
+}
+/**
+ * Universal style rule with nested selectors and media queries support
+ * Rules are generated by each media query
+ * and heavily cached to avoid complex computation
+ *
+ * selector {
+ *   \@media breakpoint {
+ *     &selector {
+ *       property: value
+ *     }
+ *   }
+ * }
+ */
+export declare class NestingRule {
+    #private;
+    constructor(mixinRules: Map<string, MixinRule>, selector: string, descendantSuffix: string);
+    getSelector(): string;
+    setSelector(selector: string): void;
+    getDescendantSuffix(): string;
+    addMixin(mixin: string): void;
+    applyMixins(mixins: string[]): void;
+    setDeclaration(declaration: Declaration): void;
+    deleteDeclaration(declaration: DeclarationKey): void;
+    getDeclarations(): IterableIterator<Declaration>;
+    toString({ breakpoint, indent, transformValue, }: {
+        breakpoint: string;
+        indent?: number;
+        transformValue?: TransformValue;
+    }): string;
+}
 export declare class StylePropertyMap {
     #private;
-    constructor(style: Style, transformValue?: TransformValue, onChange?: () => void);
-    setTransformer(transformValue: TransformValue): void;
+    constructor(style: Style);
     set(property: StyleProperty, value?: StyleValue): void;
     get(property: StyleProperty): {
         type: "unit";
@@ -1024,17 +1082,19 @@ export declare class StylePropertyMap {
     keys(): IterableIterator<StyleProperty>;
     delete(property: StyleProperty): void;
     clear(): void;
-    toString({ indent }?: {
-        indent?: number | undefined;
+    toString({ indent, transformValue, }?: {
+        indent?: number;
+        transformValue?: TransformValue;
     }): string;
 }
 export declare class StyleRule {
     styleMap: StylePropertyMap;
     selectorText: string;
-    constructor(selectorText: string, style: StylePropertyMap | Style, transformValue?: TransformValue, onChange?: () => void);
+    constructor(selectorText: string, style: StylePropertyMap | Style);
     get cssText(): string;
-    toString(options?: {
-        indent: number;
+    toString({ indent, transformValue, }?: {
+        indent?: number;
+        transformValue?: TransformValue;
     }): string;
 }
 export type MediaRuleOptions = {
@@ -1046,14 +1106,17 @@ export declare class MediaRule {
     #private;
     options: MediaRuleOptions;
     rules: Map<string, StyleRule | PlaintextRule>;
-    constructor(options?: MediaRuleOptions);
+    constructor(name: string, options?: MediaRuleOptions);
     insertRule(rule: StyleRule | PlaintextRule): StyleRule | PlaintextRule;
     get cssText(): string;
     toString(): string;
+    generateRule({ nestingRules, transformValue, }: {
+        nestingRules: NestingRule[];
+        transformValue?: TransformValue;
+    }): string;
 }
 export declare class PlaintextRule {
     cssText: string;
-    styleMap: StylePropertyMap;
     constructor(cssText: string);
     toString(): string;
 }
@@ -1065,9 +1128,9 @@ export type FontFaceOptions = {
     src: string;
 };
 export declare class FontFaceRule {
-    options: FontFaceOptions;
+    #private;
     constructor(options: FontFaceOptions);
     get cssText(): string;
     toString(): string;
 }
-export type AnyRule = StyleRule | MediaRule | PlaintextRule | FontFaceRule;
+export {};

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

@@ -1,7 +1,5 @@
 import { StyleRule } from "./rules";
-import type { TransformValue } from "./to-value";
 import { StyleSheet, type CssRule } from "./style-sheet";
 export declare class StyleSheetRegular extends StyleSheet {
-    #private;
-    addStyleRule(rule: CssRule, selectorText: string, transformValue?: TransformValue): StyleRule;
+    addStyleRule(rule: CssRule, selectorText: string): StyleRule;
 }

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

@@ -1,17 +1,25 @@
 import type { Style } from "../schema";
-import { MediaRule, PlaintextRule, type FontFaceOptions, type MediaRuleOptions } from "./rules";
+import { MediaRule, MixinRule, NestingRule, PlaintextRule, type FontFaceOptions, type MediaRuleOptions } from "./rules";
 import { StyleElement } from "./style-element";
+import type { TransformValue } from "./to-value";
 export type CssRule = {
     style: Style;
     breakpoint?: string;
 };
 export declare class StyleSheet {
     #private;
+    nestingRules: Map<string, NestingRule>;
     constructor(element: StyleElement);
+    setTransformer(transformValue: TransformValue): void;
     addMediaRule(id: string, options?: MediaRuleOptions): MediaRule;
     addPlaintextRule(cssText: string): PlaintextRule | Map<string, PlaintextRule>;
+    addMixinRule(name: string): MixinRule;
+    addNestingRule(selector: string, descendantSuffix?: string): NestingRule;
     addFontFaceRule(options: FontFaceOptions): number;
-    markAsDirty(): void;
+    generateWith({ nestingRules, transformValue, }: {
+        nestingRules: NestingRule[];
+        transformValue?: TransformValue;
+    }): string;
     get cssText(): string;
     clear(): void;
     render(): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/css-engine",
-  "version": "0.145.0",
+  "version": "0.163.0",
   "description": "CSS Renderer for Webstudio",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -9,14 +9,14 @@
     "@emotion/hash": "^0.9.1",
     "hyphenate-style-name": "^1.0.4",
     "zod": "^3.22.4",
-    "@webstudio-is/fonts": "0.145.0",
-    "@webstudio-is/error-utils": "0.145.0"
+    "@webstudio-is/fonts": "0.163.0",
+    "@webstudio-is/error-utils": "0.163.0"
   },
   "devDependencies": {
     "@jest/globals": "^29.7.0",
-    "@storybook/addon-essentials": "^7.4.0",
-    "@storybook/addon-links": "^7.4.0",
-    "@storybook/react": "^7.4.0",
+    "@storybook/addon-essentials": "^8.1.2",
+    "@storybook/addon-links": "^8.1.2",
+    "@storybook/react": "^8.1.2",
     "@types/hyphenate-style-name": "^1.0.0",
     "@types/react": "^18.2.70",
     "@types/react-dom": "^18.2.25",
@@ -30,8 +30,7 @@
   "exports": {
     "webstudio": "./src/index.ts",
     "types": "./lib/types/index.d.ts",
-    "import": "./lib/index.js",
-    "require": "./lib/index.js"
+    "import": "./lib/index.js"
   },
   "files": [
     "lib/*",

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

@@ -1,10 +0,0 @@
-import { StyleRule } from "./rules";
-import type { TransformValue } from "./to-value";
-import { StyleSheet, type CssRule } from "./style-sheet";
-export declare class StyleSheetAtomic extends StyleSheet {
-    #private;
-    addStyleRule({ style, breakpoint }: CssRule, selectorSuffix?: string, transformValue?: TransformValue): {
-        styleRules: StyleRule[];
-        classes: string[];
-    };
-}