Skip to content

feat: default pepper baseline + rename all.css to styles.css#3

Merged
Sangun-Kang merged 2 commits into
mainfrom
feat/default-flavor-baseline
Apr 24, 2026
Merged

feat: default pepper baseline + rename all.css to styles.css#3
Sangun-Kang merged 2 commits into
mainfrom
feat/default-flavor-baseline

Conversation

@Sangun-Kang
Copy link
Copy Markdown
Member

@Sangun-Kang Sangun-Kang commented Apr 24, 2026

概要

このPRは次の2つの変更を含みます。

  1. <FlavorProvider> なしでもコンポーネントが描画されるよう、pepper を baseline として CSS に含める
  2. all.cssstyles.css にリネームし、パッケージルート直下に配置

変更1: pepper baseline

  • Before: FlavorProvider + CSS import の 両方が必須。どちらか抜けると無言で unstyled
  • After: CSS import だけで pepper が自動適用。FlavorProvider はフレーバー切り替え・領域別ネスト用途に限定

変更2: all.cssstyles.css

wip-ui/css/all.css という名前は「7つのうちの1つ」感が強く、「これを入れるのが当然」というシグナルが弱かった。Mantine (@mantine/core/styles.css) や Radix Themes (@radix-ui/themes/styles.css) と同じ慣例に合わせて、デフォルトの stylesheet として wip-ui/styles.css に改名。

  • 旧: import 'wip-ui/css/all.css'
  • 新: import 'wip-ui/styles.css'

per-flavor の wip-ui/css/{flavor}.css はバンドルサイズ最適化用途として変更なし。

詳細

baseline 側

  • scripts/build-flavor-css.mjs: pepper のビルド時に prefix なしのパスも追加で生成し、combined CSS の先頭に prepend
  • 詳細度: baseline .wip-button.-color-interactive (0,0,2,0) < scoped [data-flavor="xxx"] .wip-button.-color-interactive (0,0,3,0) → Provider は常に baseline に勝つ
  • サイズ: combined CSS 2.93 MB → 3.29 MB (約 +19 KB gzip)
  • src/FlavorProvider/FlavorProvider.tsx: JSDoc に baseline で pepper が自動適用される旨を追記

rename 側

  • scripts/build-flavor-css.mjs: 出力先を dist/css/all.cssdist/styles.css (パッケージルート直下)。ビルド前に DIST_DIRdist/styles.css を掃除して、リネーム/削除時に古いファイルが残らないように
  • package.json: "./styles.css": "./dist/styles.css" を exports に追加。per-flavor の "./css/*.css" pattern は維持
  • README.md + FlavorProvider JSDoc: wip-ui/styles.css を参照

既知の制約(本 PR 由来ではない)

入れ子 Provider で内側フレーバーがソース順序上で外側より前にあると、外側が勝ちます。例:

```tsx


{/* pepper を期待しているが lolipop で描画される */}


```

CSS の子孫セレクタは「最も近い祖先」の概念を持たず、詳細度が同点の場合はソース順序で後に書かれたルールが勝つため。本 PR で新たに生じた挙動ではなく、flavor 入れ子の実使用頻度がほぼゼロのため別 issue 扱い、今回は対応しません。

テスト

  • `npm run build` — `dist/styles.css` と `dist/css/{flavor}.css` 7 個が生成されること、baseline 161 個の unscoped `.wip-*` ルールと 17,024 個の scoped ルールを確認
  • `npm run lint` — 通過
  • publish 後に consumer アプリで目視確認:
    • `import 'wip-ui/styles.css'` + Provider なし → pepper 色が出ること
    • `` → minne 色に切り替わること

Previously, consumers had to wrap their app with <FlavorProvider> AND
import the CSS for any component to render styled. Forgetting either
produced silently unstyled output — a sharp edge inconsistent with most
component libraries (MUI/Chakra render with a default theme, no Provider
required). The published package now leads with "import CSS and you are
done", and <FlavorProvider> is reserved for explicit flavor switching or
nested-region theming.

- scripts/build-flavor-css.mjs: for pepper, additionally emit an
  unprefixed pass and prepend it to the top of dist/css/all.css.
  Specificity of `[data-flavor="xxx"] .foo` (0,0,3,0) beats `.foo`
  (0,0,2,0), so any FlavorProvider still overrides the baseline. The
  per-flavor dist/css/{flavor}.css files are intentionally unchanged —
  that optimization path still requires matching FlavorProvider flavor
  because the single-flavor file has no other context.
- README.md: reframe the usage section so the minimal "just import CSS"
  example comes first, and FlavorProvider is shown only in the
  override/nesting example. Document the existing source-order caveat
  for nested providers (outer lolipop + inner pepper will resolve to
  lolipop because CSS descendant selectors match any ancestor and
  the later flavor wins on tie).
- FlavorProvider JSDoc: note that pepper now applies by default via CSS
  baseline, so the Provider is only needed for explicit flavor choices.

Size: all.css 2.93 MB -> 3.29 MB (~+19 KB gzip) due to the added
unscoped pepper pass.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Signal "this is the default stylesheet you should import" via naming +
path placement. `all.css` reads like "one of seven", while the new path
`wip-ui/styles.css` matches the convention consumers already know from
Mantine (`@mantine/core/styles.css`) and Radix Themes
(`@radix-ui/themes/styles.css`).

- scripts/build-flavor-css.mjs: emit dist/styles.css (package root)
  instead of dist/css/all.css. Per-flavor dist/css/{flavor}.css files
  are unchanged. Also clean DIST_DIR and stale dist/styles.css before
  writing, so renames/removals don't leave orphaned files in dist/.
- package.json: expose "./styles.css" subpath export. Per-flavor
  "./css/*.css" pattern retained for the bundle-size-optimization path.
- README.md + FlavorProvider JSDoc: reference wip-ui/styles.css.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@Sangun-Kang Sangun-Kang changed the title feat(flavor): emit pepper baseline unscoped in all.css feat: default pepper baseline + rename all.css to styles.css Apr 24, 2026
@Sangun-Kang Sangun-Kang merged commit 9ebe095 into main Apr 24, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant