experimental: generate root styles for published sites (#4177)

Ref #3399

- render layout hack (display: grid; min-height: 100%) as root preset
styles
- generate root user styles on published sites
- moved typography preset from body to the root
- bumped a couple of deps

<img width="240" alt="Screenshot 2024-09-28 at 23 25 08"
src="https://github.com/user-attachments/assets/eaf7476e-f488-4f1f-89db-6d464c05b35f">

apps/builder/app/builder/features/sidebar-left/panels/components/insert.ts

@@ -1,11 +1,11 @@
-import { type WsComponentMeta } from "@webstudio-is/react-sdk";
+import { ROOT_INSTANCE_ID } from "@webstudio-is/sdk";
+import type { WsComponentMeta } from "@webstudio-is/react-sdk";
 import { toast } from "@webstudio-is/design-system";
 import {
   $instances,
   $registeredComponentMetas,
   $selectedInstanceSelector,
   $selectedPage,
-  ROOT_INSTANCE_ID,
 } from "~/shared/nano-states";
 import {
   computeInstancesConstraints,

apps/builder/app/builder/features/sidebar-left/panels/navigator/navigator-tree.tsx

@@ -25,7 +25,7 @@ import {
   showAttribute,
   WsComponentMeta,
 } from "@webstudio-is/react-sdk";
-import type { Instance } from "@webstudio-is/sdk";
+import { ROOT_INSTANCE_ID, type Instance } from "@webstudio-is/sdk";
 import { EyeconClosedIcon, EyeconOpenIcon } from "@webstudio-is/icons";
 import {
   $dragAndDropState,
@@ -39,7 +39,6 @@ import {
   $selectedInstanceSelector,
   $selectedPage,
   getIndexedInstanceId,
-  ROOT_INSTANCE_ID,
 } from "~/shared/nano-states";
 import type { InstanceSelector } from "~/shared/tree-utils";
 import { serverSyncStore } from "~/shared/sync";

apps/builder/app/builder/features/style-panel/shared/model.tsx

@@ -7,7 +7,13 @@ import {
   type StyleProperty,
   type StyleValue,
 } from "@webstudio-is/css-engine";
-import type { Breakpoint, Instance, StyleDecl } from "@webstudio-is/sdk";
+import {
+  ROOT_INSTANCE_ID,
+  type Breakpoint,
+  type Instance,
+  type StyleDecl,
+} from "@webstudio-is/sdk";
+import { rootComponent } from "@webstudio-is/react-sdk";
 import {
   $breakpoints,
   $instances,
@@ -19,7 +25,6 @@ import {
   $selectedOrLastStyleSourceSelector,
   $styles,
   $styleSourceSelections,
-  ROOT_INSTANCE_ID,
 } from "~/shared/nano-states";
 import {
   getComputedStyleDecl,
@@ -49,7 +54,9 @@ const $presetStyles = computed($registeredComponentMetas, (metas) => {
 const $instanceComponents = computed(
   [$selectedInstanceSelector, $instances],
   (instanceSelector, instances) => {
-    const instanceComponents = new Map<Instance["id"], Instance["component"]>();
+    const instanceComponents = new Map<Instance["id"], Instance["component"]>([
+      [ROOT_INSTANCE_ID, rootComponent],
+    ]);
     if (instanceSelector === undefined) {
       return instanceComponents;
     }

apps/builder/app/builder/features/style-panel/shared/style-info.test.ts

@@ -233,17 +233,6 @@ test("compute inherited styles", () => {
           "value": "antialiased",
         },
       },
-      "fontFamily": {
-        "instanceId": "1",
-        "value": {
-          "type": "fontFamily",
-          "value": [
-            "Arial",
-            "Roboto",
-            "sans-serif",
-          ],
-        },
-      },
       "fontSize": {
         "instanceId": "1",
         "styleSourceId": "styleSourceId1",
@@ -261,14 +250,6 @@ test("compute inherited styles", () => {
           "value": "600",
         },
       },
-      "lineHeight": {
-        "instanceId": "1",
-        "value": {
-          "type": "unit",
-          "unit": "number",
-          "value": 1.2,
-        },
-      },
     }
   `);
 });

apps/builder/app/canvas/instance-selected.ts

@@ -1,4 +1,4 @@
-import type { Instance } from "@webstudio-is/sdk";
+import { ROOT_INSTANCE_ID, type Instance } from "@webstudio-is/sdk";
 import { idAttribute, selectorIdAttribute } from "@webstudio-is/react-sdk";
 import { subscribeWindowResize } from "~/shared/dom-hooks";
 import {
@@ -14,7 +14,6 @@ import {
   $styles,
   $selectedInstanceStates,
   $styleSourceSelections,
-  ROOT_INSTANCE_ID,
 } from "~/shared/nano-states";
 import htmlTags, { type HtmlTags } from "html-tags";
 import {

apps/builder/app/canvas/shared/styles.ts

@@ -3,6 +3,7 @@ import { computed } from "nanostores";
 import { useStore } from "@nanostores/react";
 import {
   Instance,
+  ROOT_INSTANCE_ID,
   getStyleDeclKey,
   type StyleDecl,
   type StyleSourceSelection,
@@ -14,6 +15,7 @@ import {
   createImageValueTransformer,
   descendantComponent,
   type Params,
+  rootComponent,
 } from "@webstudio-is/react-sdk";
 import {
   type VarValue,
@@ -32,7 +34,6 @@ import {
   $selectedStyleState,
   $styleSourceSelections,
   $styles,
-  ROOT_INSTANCE_ID,
 } from "~/shared/nano-states";
 import { setDifference } from "~/shared/shim";
 import { $ephemeralStyles, $params } from "../stores";
@@ -330,9 +331,11 @@ export const GlobalStyles = ({ params }: { params: Params }) => {
     presetSheet.addMediaRule("presets");
     for (const [component, meta] of metas) {
       for (const [tag, styles] of Object.entries(meta.presetStyle ?? {})) {
-        const rule = presetSheet.addNestingRule(
-          `${tag}:where([data-ws-component="${component}"])`
-        );
+        const selector =
+          component === rootComponent
+            ? ":root"
+            : `${tag}:where([data-ws-component="${component}"])`;
+        const rule = presetSheet.addNestingRule(selector);
         for (const declaration of styles) {
           rule.setDeclaration({
             breakpoint: "presets",

apps/builder/app/shared/instance-utils.ts

@@ -24,6 +24,7 @@ import {
   encodeDataSourceVariable,
   transpileExpression,
   getExpressionIdentifiers,
+  ROOT_INSTANCE_ID,
 } from "@webstudio-is/sdk";
 import {
   type WsComponentMeta,
@@ -46,7 +47,6 @@ import {
   $pages,
   $resources,
   $selectedPage,
-  ROOT_INSTANCE_ID,
 } from "./nano-states";
 import {
   type DroppableTarget,

apps/builder/app/shared/nano-states/instances.ts

@@ -1,5 +1,5 @@
 import { atom, computed } from "nanostores";
-import type { Instances } from "@webstudio-is/sdk";
+import { ROOT_INSTANCE_ID, type Instances } from "@webstudio-is/sdk";
 import type { InstanceSelector } from "../tree-utils";
 import { $selectedPage } from "./pages";
 import { rootComponent } from "@webstudio-is/react-sdk";
@@ -20,8 +20,6 @@ export const $textEditingInstanceSelector = atom<
 
 export const $instances = atom<Instances>(new Map());
 
-export const ROOT_INSTANCE_ID = ":root";
-
 export const $virtualInstances = computed($selectedPage, (selectedPage) => {
   const virtualInstances: Instances = new Map();
   if (selectedPage) {

apps/builder/package.json

@@ -112,7 +112,7 @@
     "slugify": "^1.6.6",
     "strip-indent": "^4.0.0",
     "tiny-invariant": "^1.3.3",
-    "title-case": "^4.3.1",
+    "title-case": "^4.3.2",
     "ultraflag": "^0.1.0",
     "untruncate-json": "^0.0.1",
     "urlpattern-polyfill": "^9.0.0",

packages/cli/src/prebuild.ts

@@ -25,6 +25,7 @@ import {
   generateRemixRoute,
   generateRemixParams,
   isCoreComponent,
+  coreMetas,
 } from "@webstudio-is/react-sdk";
 import type {
   Instance,
@@ -294,7 +295,9 @@ export const prebuild = async (options: {
     }
   }
 
-  const projectMetas = new Map<Instance["component"], WsComponentMeta>();
+  const projectMetas = new Map<Instance["component"], WsComponentMeta>(
+    Object.entries(coreMetas)
+  );
   const componentsByPage: ComponentsByPage = {};
   const siteDataByPage: SiteDataByPage = {};
   const fontAssetsByPage: Record<Page["id"], FontAsset[]> = {};

packages/css-engine/package.json

@@ -12,7 +12,7 @@
     "test": "NODE_OPTIONS=--experimental-vm-modules jest"
   },
   "dependencies": {
-    "@emotion/hash": "^0.9.1",
+    "@emotion/hash": "^0.9.2",
     "@webstudio-is/error-utils": "workspace:*",
     "@webstudio-is/fonts": "workspace:*",
     "zod": "^3.22.4"

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/package.json

@@ -38,7 +38,7 @@
     "change-case": "^5.4.4",
     "html-tags": "^4.0.0",
     "nanoid": "^5.0.1",
-    "title-case": "^4.3.1"
+    "title-case": "^4.3.2"
   },
   "exports": {
     ".": {