From b6634b2d249f19f396a0e1cbcf1fe301cdb9e701 Mon Sep 17 00:00:00 2001 From: snakajima Date: Wed, 30 Sep 2026 06:58:32 -0700 Subject: [PATCH] fix: keep the demo page's body style out of the package src/style.css ships as dist/style.css, which hosts import into their own page, and it styled body (m-0 p-5 font-sans bg-gray-100) for the Vue demo. Every plugin made from the template passed that on: in MulmoChat and MulmoGlass it padded the whole app by 20px and set its background. The rule moves to demo/vue/style.css, and the guides say not to style body, html or :root in src/style.css. Co-Authored-By: Claude Opus 5.5 (1M context) --- TEMPLATE.md | 4 ++-- demo/vue/main.ts | 1 + demo/vue/style.css | 7 +++++++ docs/ai-development-guide.md | 1 + src/style.css | 6 +++--- 5 files changed, 14 insertions(+), 5 deletions(-) create mode 100644 demo/vue/style.css diff --git a/TEMPLATE.md b/TEMPLATE.md index a93aaa0..6eb640f 100644 --- a/TEMPLATE.md +++ b/TEMPLATE.md @@ -133,7 +133,7 @@ yarn dev | `index.html` | Demo HTML entry | | `.gitignore` | Git ignore patterns | | `src/shims-vue.d.ts` | Vue type definitions | -| `src/style.css` | Base styles | +| `src/style.css` | Tailwind entry, shipped as `dist/style.css` into the host's page: no `body`/`html` styles | | `demo/main.ts` | Demo entry point | | `demo/App.vue` | Demo test UI (generic) | | `src/index.ts` | Plugin entry point | @@ -614,7 +614,7 @@ yarn dev | `index.html` | デモHTMLエントリ | | `.gitignore` | Git除外パターン | | `src/shims-vue.d.ts` | Vue型定義 | -| `src/style.css` | 基本スタイル | +| `src/style.css` | Tailwind のエントリ。`dist/style.css` としてホストのページに読み込まれるので `body`/`html` にはスタイルを付けない | | `demo/main.ts` | デモエントリポイント | | `demo/App.vue` | デモ用テストUI（汎用） | | `src/index.ts` | プラグインエントリポイント | diff --git a/demo/vue/main.ts b/demo/vue/main.ts index 60ec64e..83304f6 100644 --- a/demo/vue/main.ts +++ b/demo/vue/main.ts @@ -1,5 +1,6 @@ import { createApp } from "vue"; import App from "./App.vue"; import "../../src/style.css"; +import "./style.css"; createApp(App).mount("#app"); diff --git a/demo/vue/style.css b/demo/vue/style.css new file mode 100644 index 0000000..2cbac70 --- /dev/null +++ b/demo/vue/style.css @@ -0,0 +1,7 @@ +/* The Vue demo page only: not part of the package (src/style.css is). */ +body { + margin: 0; + padding: 1.25rem; + font-family: ui-sans-serif, system-ui, sans-serif; + background-color: #f3f4f6; +} diff --git a/docs/ai-development-guide.md b/docs/ai-development-guide.md index e8da90a..d21ac4e 100644 --- a/docs/ai-development-guide.md +++ b/docs/ai-development-guide.md @@ -30,6 +30,7 @@ src/ 2. **toolName property required** in ToolResult return 3. **Types must be exported** from core/index.ts 4. **style.css import** must be at top of vue/index.ts and react/index.ts +5. **No `body`, `html` or `:root` styles in src/style.css**: it ships as `dist/style.css` into the host's page, so they restyle the whole host app (demo page styles go in `demo/`) --- diff --git a/src/style.css b/src/style.css index 226bd79..aeb200c 100644 --- a/src/style.css +++ b/src/style.css @@ -1,5 +1,5 @@ @import "tailwindcss"; -body { - @apply m-0 p-5 font-sans bg-gray-100; -} +/* This file is the package's dist/style.css, which hosts import into their + own page: style only this plugin's components here, never body, html or + :root. The demo page's own look is in demo/vue/style.css. */