@webstudio-is/css-engine 0.151.0 → 0.167.0

package/lib/index.js

@@ -87,12 +87,12 @@ var toValue = (styleValue, transformValue) => {
 };
 
 // src/core/to-property.ts
-import hyphenate from "hyphenate-style-name";
+var hyphenateProperty = (property) => property.replace(/[A-Z]/g, (match) => "-" + match.toLowerCase());
 var toProperty = (property) => {
   if (property === "backgroundClip") {
     return "-webkit-background-clip";
   }
-  return hyphenate(property);
+  return hyphenateProperty(property);
 };
 
 // src/core/rules.ts
@@ -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()),
@@ -769,8 +787,8 @@ export {
   equalMedia,
   findApplicableMedia,
   generateAtomic,
+  hyphenateProperty,
   isValidStaticStyleValue,
   matchMedia,
-  toProperty,
   toValue
 };

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

@@ -2,7 +2,7 @@ export type { NestingRule, StyleRule, MediaRule, PlaintextRule, FontFaceRule, }
 export type { StyleSheetRegular } from "./style-sheet-regular";
 export * from "./create-style-sheet";
 export * from "./to-value";
-export * from "./to-property";
+export { hyphenateProperty } from "./to-property";
 export * from "./match-media";
 export * from "./equal-media";
 export * from "./compare-media";

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/lib/types/core/to-property.d.ts

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

package/package.json

@@ -1,37 +1,30 @@
 {
   "name": "@webstudio-is/css-engine",
-  "version": "0.151.0",
+  "version": "0.167.0",
   "description": "CSS Renderer for Webstudio",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
   "type": "module",
   "dependencies": {
     "@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/error-utils": "0.167.0",
+    "@webstudio-is/fonts": "0.167.0"
   },
   "devDependencies": {
     "@jest/globals": "^29.7.0",
-    "@storybook/addon-essentials": "^7.4.0",
-    "@storybook/addon-links": "^7.4.0",
-    "@storybook/react": "^7.4.0",
-    "@types/hyphenate-style-name": "^1.0.0",
     "@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",
     "typescript": "5.4.5",
     "@webstudio-is/jest-config": "1.0.7",
-    "@webstudio-is/storybook-config": "0.0.0",
     "@webstudio-is/tsconfig": "1.0.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/*",
@@ -46,8 +39,6 @@
     "dev": "rm -rf lib && esbuild 'src/**/*.ts' 'src/**/*.tsx' --outdir=lib --watch",
     "build": "rm -rf lib && esbuild src/index.ts --outdir=lib --bundle --format=esm --packages=external",
     "dts": "tsc --project tsconfig.dts.json",
-    "test": "NODE_OPTIONS=--experimental-vm-modules jest",
-    "storybook:dev": "storybook dev -p 6006",
-    "storybook:build": "storybook build"
+    "test": "NODE_OPTIONS=--experimental-vm-modules jest"
   }
 }