@webstudio-is/css-engine 0.151.0 → 0.163.0

package/lib/index.js

@@ -130,19 +130,28 @@ var MixinRule = class {
 };
 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(selector, mixinRules) {
+  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();
@@ -197,7 +206,7 @@ var NestingRule = class {
         continue;
       }
       const { selector: nestedSelector, property, value } = declaration;
-      const selector = `${this.#selector}${nestedSelector}`;
+      const selector = this.#selector + this.#descendantSuffix + nestedSelector;
       const lines = linesBySelector.get(selector) ?? "";
       const propertyString = toProperty(property);
       const valueString = toValue(value, transformValue);
@@ -506,11 +515,12 @@ var StyleSheet = class {
     }
     return rule;
   }
-  addNestingRule(selector) {
-    let rule = this.nestingRules.get(selector);
+  addNestingRule(selector, descendantSuffix = "") {
+    const key = selector + descendantSuffix;
+    let rule = this.nestingRules.get(key);
     if (rule === void 0) {
-      rule = new NestingRule(selector, this.#mixinRules);
-      this.nestingRules.set(selector, rule);
+      rule = new NestingRule(this.#mixinRules, selector, descendantSuffix);
+      this.nestingRules.set(key, rule);
     }
     return rule;
   }
@@ -618,22 +628,30 @@ var generateAtomic = (sheet, 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);
-    const classList = [];
+    let classList = classesMap.get(groupKey);
+    if (classList === void 0) {
+      classList = [];
+      classesMap.set(groupKey, classList);
+    }
     for (const declaration of rule.getDeclarations()) {
       const atomicHash = hash(
-        declaration.breakpoint + declaration.selector + declaration.property + toValue(declaration.value, transformValue)
+        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(`.${className}`, /* @__PURE__ */ new Map());
+        atomicRule = new NestingRule(
+          /* @__PURE__ */ new Map(),
+          `.${className}`,
+          descendantSuffix
+        );
         atomicRule.setDeclaration(declaration);
         atomicRules.set(atomicHash, atomicRule);
       }
       classList.push(className);
     }
-    classesMap.set(groupKey, classList);
   }
   const cssText = sheet.generateWith({
     nestingRules: Array.from(atomicRules.values()),

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

@@ -44,8 +44,10 @@ export declare class MixinRule {
  */
 export declare class NestingRule {
     #private;
-    constructor(selector: string, mixinRules: Map<string, MixinRule>);
+    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;

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

@@ -14,7 +14,7 @@ export declare class StyleSheet {
     addMediaRule(id: string, options?: MediaRuleOptions): MediaRule;
     addPlaintextRule(cssText: string): PlaintextRule | Map<string, PlaintextRule>;
     addMixinRule(name: string): MixinRule;
-    addNestingRule(selector: string): NestingRule;
+    addNestingRule(selector: string, descendantSuffix?: string): NestingRule;
     addFontFaceRule(options: FontFaceOptions): number;
     generateWith({ nestingRules, transformValue, }: {
         nestingRules: NestingRule[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/css-engine",
-  "version": "0.151.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.151.0",
-    "@webstudio-is/error-utils": "0.151.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/*",