experimental: generate root styles for published sites

Ref #3399

- render layout hack as root preset styles
- generate root user styles on published sites
- bumped a couple of deps

Author: TrySound

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/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

@@ -113,7 +113,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",