diff --git a/packages/json-render-ui/.storybook/preview.ts b/packages/json-render-ui/.storybook/preview.ts index 01f1fcea..8c49f505 100644 --- a/packages/json-render-ui/.storybook/preview.ts +++ b/packages/json-render-ui/.storybook/preview.ts @@ -1,4 +1,7 @@ import type { Decorator, Preview } from '@storybook/vue3-vite' +// Before `virtual:uno.css`, mirroring the SPA entry and the shadow-root build — +// see `src/spa/main.ts` for why the reset is load-bearing here. +import '@unocss/reset/tailwind.css' import 'virtual:uno.css' import '@antfu/design/styles.css' diff --git a/packages/json-render-ui/package.json b/packages/json-render-ui/package.json index d4c0aaed..a4588c88 100644 --- a/packages/json-render-ui/package.json +++ b/packages/json-render-ui/package.json @@ -58,6 +58,7 @@ "@storybook/addon-docs": "catalog:storybook", "@storybook/vue3-vite": "catalog:storybook", "@unocss/preset-icons": "catalog:frontend", + "@unocss/reset": "catalog:frontend", "@vitejs/plugin-vue": "catalog:build", "devframe": "workspace:*", "storybook": "catalog:storybook", diff --git a/packages/json-render-ui/src/JsonRender.stories.ts b/packages/json-render-ui/src/JsonRender.stories.ts index f4852e28..8c46c471 100644 --- a/packages/json-render-ui/src/JsonRender.stories.ts +++ b/packages/json-render-ui/src/JsonRender.stories.ts @@ -127,7 +127,16 @@ const dockRendererContext = { rpc: { call: rpc.call, connectionMeta: undefined }, } as unknown as Parameters[0]['context'] -/** Mounts the shipped dock renderer so the story exercises its shadow root and adopted stylesheet. */ +/** + * Mounts the shipped dock renderer so the story exercises its shadow root and + * adopted stylesheet. + * + * It renders `gallerySpec`, so it should look **the same** as `Gallery` — the + * two differ only in how the stylesheet reaches the components (Storybook's + * `virtual:uno.css` in the light DOM vs. the prebuilt `.generated/css` adopted + * into a shadow root). A visible divergence between them means one of the two + * pipelines has drifted, not that the shadow root is "styled differently". + */ export const InShadowRoot: StoryObj = { render: () => ({ setup() { diff --git a/packages/json-render-ui/src/spa/main.ts b/packages/json-render-ui/src/spa/main.ts index dca8276c..9354a187 100644 --- a/packages/json-render-ui/src/spa/main.ts +++ b/packages/json-render-ui/src/spa/main.ts @@ -4,6 +4,17 @@ import { JSON_RENDER_INDEX_KEY } from '@devframes/json-render' import { connectDevframe } from 'devframe/client' import { computed, createApp, defineComponent, h, ref, shallowReactive, shallowRef, watch } from 'vue' import { JsonRenderView } from '../renderer' +// The same Tailwind preflight `scripts/build-css.ts` prepends to the shipped +// shadow-root stylesheet — first, so `virtual:uno.css`'s utilities win over its +// resets, matching the production build's `[reset, userStyle, unoCss]` order. +// The `@antfu/design` component ports depend on it: `btn-action` (what +// `Button.ts` maps `secondary`/`ghost` onto) sets a border and `op75` but *no* +// base `background-color` — only one on `:hover` — so without the reset the UA +// default `button { background-color: buttonface }` wins and every non-primary +// button renders as a solid light-grey box. The dock renderer never showed this +// because its stylesheet is built with the reset baked in; this SPA and the +// Storybook canvas are the two surfaces that have to import it themselves. +import '@unocss/reset/tailwind.css' import 'virtual:uno.css' import '@antfu/design/styles.css' diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index bb06dc0a..cfb2e569 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1558,6 +1558,9 @@ importers: '@unocss/preset-icons': specifier: catalog:frontend version: 66.7.5 + '@unocss/reset': + specifier: catalog:frontend + version: 66.7.5 '@vitejs/plugin-vue': specifier: catalog:build version: 6.0.8(vite@8.2.1(@types/node@26.2.0)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.23.12)(yaml@2.9.0))(vue@3.5.41(typescript@6.0.3))