Prevent atomizing :root rules

Author: TrySound

packages/css-engine/src/core/atomic.ts

@@ -4,7 +4,8 @@ import { NestingRule } from "./rules";
 import { toValue, type TransformValue } from "./to-value";
 
 type Options = {
-  getKey: (rule: NestingRule) => string;
+  /** in case of undefined the rule will not be split into atomics */
+  getKey: (rule: NestingRule) => string | undefined;
   transformValue?: TransformValue;
   classes?: Map<string, string[]>;
 };
@@ -16,6 +17,10 @@ export const generateAtomic = (sheet: StyleSheet, options: Options) => {
   for (const rule of sheet.nestingRules.values()) {
     const descendantSuffix = rule.getDescendantSuffix();
     const groupKey = getKey(rule);
+    if (groupKey === undefined) {
+      atomicRules.set(rule.getSelector(), rule);
+      continue;
+    }
     // a few rules can be in the same group
     // when rule have descendant suffix
     let classList = classes.get(groupKey);

packages/react-sdk/src/css/css.test.tsx

@@ -517,7 +517,7 @@ Map {
 });
 
 test("generate :root preset and user styles", () => {
-  const { cssText, classes } = generateAllCss({
+  const { cssText, atomicCssText, classes, atomicClasses } = generateAllCss({
     assets: new Map(),
     ...renderJsx(
       <$.Body ws:id="body">
@@ -538,6 +538,15 @@ test("generate :root preset and user styles", () => {
           value: { type: "keyword", value: "blue" },
         },
       ],
+      [
+        "local:base:fontSize",
+        {
+          styleSourceId: "local",
+          breakpointId: "base",
+          property: "fontSize",
+          value: { type: "keyword", value: "medium" },
+        },
+      ],
     ]),
     componentMetas: new Map([
       [
@@ -567,9 +576,24 @@ test("generate :root preset and user styles", () => {
 }
 @media all {
   :root {
-    color: blue
+    color: blue;
+    font-size: medium
   }
 }"
 `);
   expect(classes).toEqual(new Map());
+  expect(atomicCssText).toMatchInlineSnapshot(`
+"@media all {
+  :root {
+    display: grid
+  }
+}
+@media all {
+  :root {
+    color: blue;
+    font-size: medium
+  }
+}"
+`);
+  expect(atomicClasses).toEqual(new Map());
 });

packages/react-sdk/src/css/css.ts

@@ -154,7 +154,7 @@ export const generateCss = ({
     if (instanceId === ROOT_INSTANCE_ID) {
       const rule = sheet.addNestingRule(`:root`);
       rule.applyMixins(values);
-      instanceByRule.set(rule, instanceId);
+      // avoid storing in instanceByRule to prevent conversion into atomic styles
       continue;
     }
     let descendantSuffix = "";
@@ -187,7 +187,7 @@ export const generateCss = ({
 
   if (atomic) {
     const { cssText } = generateAtomic(sheet, {
-      getKey: (rule) => instanceByRule.get(rule) ?? "",
+      getKey: (rule) => instanceByRule.get(rule),
       transformValue: imageValueTransformer,
       classes,
     });