From fc2bb3ccf3a57b7d35bc4a96f4f92671861301d6 Mon Sep 17 00:00:00 2001 From: yu859 <15715093608@163.com> Date: Sat, 22 Aug 2026 16:10:27 +0800 Subject: [PATCH] fix(json-render-ui): add the missing CSS reset to the SPA and Storybook MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit `btn-action` / `btn-action-sm` (what `Button.ts` maps the `secondary` and `ghost` variants onto) set a border and `op75` but no base `background-color` — only one on `:hover`. Without a CSS reset the UA default `button { background-color: buttonface }` therefore wins, and every non-primary button renders as a solid light-grey box on the dark canvas. `scripts/build-css.ts` prepends `@unocss/reset/tailwind.css` to the shadow-root stylesheet, so the dock renderer was never affected. The two light-DOM surfaces have to import the reset themselves and neither did: the shipped SPA bundle and the Storybook canvas both contained zero reset rules (`-webkit-appearance:button`, `background-image:none`, `box-sizing:border-box` all absent from the built CSS). `packages/hub-ui/.storybook/preview.ts` already does exactly this, with a comment describing the same symptom; `json-render-ui` simply never got the same line. `hub-ui` ships no light-DOM SPA, so it is not affected. --- packages/json-render-ui/.storybook/preview.ts | 3 +++ packages/json-render-ui/package.json | 1 + packages/json-render-ui/src/JsonRender.stories.ts | 11 ++++++++++- packages/json-render-ui/src/spa/main.ts | 11 +++++++++++ pnpm-lock.yaml | 3 +++ 5 files changed, 28 insertions(+), 1 deletion(-) 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))