@charcoal-ui/react 6.0.0-rc.2 → 6.0.0-rc.4

package/src/__tests__/token-v1-compat.test.ts

@@ -0,0 +1,118 @@
+import { describe, expect, it } from 'vitest'
+import fs from 'node:fs/promises'
+import path from 'node:path'
+import postcss, { type Rule } from 'postcss'
+
+// Design Token 1.0互換モードの「見た目の非破壊」を検証する。
+//
+// 移行: 旧 `@charcoal-ui/react/dist/index.css` (v1, --charcoal-* を直接使用)
+//   →  新 コンポーネントCSS (v2, --charcoal-color-* を使用) + `v1/remap.css` remap
+//
+// 非破壊であるためには、各 (セレクタ, プロパティ) で新CSSが使う 1つの --charcoal-color-*
+// が、旧CSSで使われていた「単一の」--charcoal-* に対応していなければならない。同じ新トークンが
+// 箇所ごとに異なる旧トークンに対応するなら、v2 が複数の v1 トークンを統合したということで、
+// remap がどんな値を選んでも一部の箇所で色が変わる = 見た目が壊れる。
+// 例: --charcoal-color-container-neutral-default は Modal 背景 (旧 surface4 = 暗幕) と
+//     Switch (旧 text4) と Checkbox (旧 text3) に使われ、単一値では再現不可。
+//
+// 旧 index.css は charcoal の直前リリース (published v1) を fixtures に取り込んだもの。
+
+const legacyPath = path.resolve(
+  import.meta.dirname,
+  'fixtures/legacy-v1-index.css',
+)
+const componentsDir = path.resolve(import.meta.dirname, '../components')
+
+async function getCssFiles(dir: string): Promise<string[]> {
+  const entries = await fs.readdir(dir, { withFileTypes: true })
+  const results = await Promise.all(
+    entries.map(async (entry) => {
+      const entryPath = path.join(dir, entry.name)
+      if (entry.isDirectory()) return getCssFiles(entryPath)
+      if (entry.isFile() && entry.name.endsWith('.css')) return [entryPath]
+      return []
+    }),
+  )
+  return results.flat()
+}
+
+/** 親 Rule を辿ってネストしたセレクタパスを組み立てる。 */
+function selectorPath(rule: Rule): string {
+  const parts: string[] = []
+  let node: postcss.Container | postcss.Document | undefined = rule
+  while (node && node.type === 'rule') {
+    parts.unshift((node as Rule).selector.replace(/\s+/g, ' ').trim())
+    node = node.parent as postcss.Container | undefined
+  }
+  return parts.join(' >> ')
+}
+
+/** `${selectorPath} | ${prop}` -> 単一 var(--charcoal…) の参照トークン。 */
+function declarationTokens(css: string): Map<string, string> {
+  const root = postcss.parse(css)
+  const map = new Map<string, string>()
+  root.walkDecls((decl) => {
+    const m = decl.value.match(/^var\(\s*(--charcoal-[a-z0-9-]+)\s*\)$/)
+    if (!m || decl.parent?.type !== 'rule') return
+    map.set(`${selectorPath(decl.parent as Rule)} | ${decl.prop}`, m[1])
+  })
+  return map
+}
+
+const legacy = declarationTokens(await fs.readFile(legacyPath, 'utf-8'))
+const modern = new Map<string, string>()
+for (const file of await getCssFiles(componentsDir)) {
+  for (const [key, token] of declarationTokens(
+    await fs.readFile(file, 'utf-8'),
+  )) {
+    modern.set(key, token)
+  }
+}
+
+// 新旧で一致する (セレクタ, プロパティ) について 新トークン -> {旧トークン…}
+const correspondence = new Map<string, Map<string, string>>()
+for (const [key, newToken] of modern) {
+  if (!legacy.has(key)) continue
+  if (!newToken.startsWith('--charcoal-color-')) continue
+  if (!correspondence.has(newToken)) correspondence.set(newToken, new Map())
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  correspondence.get(newToken)!.set(key, legacy.get(key)!)
+}
+
+describe('Design Token 1.0互換: 旧 index.css の見た目を壊さない', () => {
+  it('新トークンは旧の単一 --charcoal-* に対応する (v2 でのトークン統合による破壊がない)', () => {
+    const breaking = [...correspondence]
+      .map(([newToken, byKey]) => ({
+        newToken,
+        oldTokens: [...new Set(byKey.values())].sort(),
+        usages: [...byKey.entries()].map(([k, v]) => `${k} → ${v}`),
+      }))
+      .filter(({ oldTokens }) => oldTokens.length > 1)
+      .map(
+        ({ newToken, oldTokens, usages }, index) =>
+          `${index + 1}) ${newToken} は旧の {${oldTokens.join(', ')}} を破壊的に統合:\n    - ${usages.join('\n    - ')}`,
+      )
+      .join('\n')
+
+    expect(breaking).toMatchInlineSnapshot(`
+      "1) --charcoal-color-text-default は旧の {--charcoal-text1, --charcoal-text2} を破壊的に統合:
+          - .charcoal-button | color → --charcoal-text2
+          - .charcoal-checkbox__label_div | color → --charcoal-text2
+          - .charcoal-ui-dropdown-selector-text | color → --charcoal-text2
+          - .charcoal-field-label | color → --charcoal-text1
+          - .charcoal-modal-header-title | color → --charcoal-text1
+          - .charcoal-multi-select-label | color → --charcoal-text2
+          - .charcoal-radio__label_div | color → --charcoal-text2
+          - .charcoal-switch__label_div | color → --charcoal-text2
+      2) --charcoal-color-border-default は旧の {--charcoal-text3, --charcoal-text4} を破壊的に統合:
+          - .charcoal-checkbox-input:not(:checked) | border-color → --charcoal-text4
+          - .charcoal-radio-input:not(:checked) | border-color → --charcoal-text3
+      3) --charcoal-color-icon-tertiary-default は旧の {--charcoal-text3, --charcoal-text4} を破壊的に統合:
+          - .charcoal-hint-text-icon | color → --charcoal-text3
+          - .charcoal-loading-spinner | color → --charcoal-text4
+      4) --charcoal-color-container-neutral-default は旧の {--charcoal-text3, --charcoal-text4} を破壊的に統合:
+          - .charcoal-multi-select-input[type='checkbox'] | background-color → --charcoal-text3
+          - .charcoal-switch-input | background-color → --charcoal-text4"
+    `)
+  })
+})

package/src/__tests__/token-v1-remap.test.ts

@@ -0,0 +1,133 @@
+import { describe, expect, it } from 'vitest'
+import fs from 'node:fs/promises'
+import path from 'node:path'
+import postcss from 'postcss'
+
+// Design Token 1.0互換モード (`@charcoal-ui/theme/css/v1/remap.css`) の remap を検証する。
+//
+// アプリは 1.0互換 (`v1/remap.css`) か 2.0 (`v2/{light,dark}.css`) のいずれかで --charcoal-color-*
+// を供給し、コンポーネント実装CSS (`@charcoal-ui/react`) がそれを消費する。remap が
+// 「壊さない・冗長でない・正しい」ことを次で担保する:
+//   1. 非破壊: コンポーネントが使う --charcoal-color-* は全て remap 経由で解決できる。
+//   2. 正しさ: --charcoal-color-* 同士の参照は全て定義済みで循環しない。重複定義がない。
+//   3. 冗長でない: 2.0 API にも無く・内部参照も無く・コンポーネントも使わないトークンを持たない。
+
+const cssDir = path.resolve(import.meta.dirname, '../../../theme/src/css')
+const tokenV1Path = path.join(cssDir, 'v1/remap.css')
+const variables2Path = path.join(cssDir, 'v2/light.css')
+const componentsDir = path.resolve(import.meta.dirname, '../components')
+
+const COLOR_PREFIX = '--charcoal-color-'
+const colorVarsIn = (value: string): string[] =>
+  [...value.matchAll(/var\(\s*(--charcoal-color-[a-z0-9-]+)/g)].map((m) => m[1])
+
+async function getCssFiles(dir: string): Promise<string[]> {
+  const entries = await fs.readdir(dir, { withFileTypes: true })
+  const results = await Promise.all(
+    entries.map(async (entry) => {
+      const entryPath = path.join(dir, entry.name)
+      if (entry.isDirectory()) return getCssFiles(entryPath)
+      if (entry.isFile() && entry.name.endsWith('.css')) return [entryPath]
+      return []
+    }),
+  )
+  return results.flat()
+}
+
+/** --charcoal-color-* の定義 (prop -> value) を収集。重複も検出。 */
+function parseColorDefinitions(css: string): {
+  defs: Map<string, string>
+  duplicates: string[]
+} {
+  const defs = new Map<string, string>()
+  const duplicates: string[] = []
+  postcss.parse(css).walkDecls((decl) => {
+    if (!decl.prop.startsWith(COLOR_PREFIX)) return
+    if (defs.has(decl.prop)) duplicates.push(decl.prop)
+    defs.set(decl.prop, decl.value)
+  })
+  return { defs, duplicates }
+}
+
+/** 宣言値から使用中の --charcoal-color-* を収集。 */
+function usedColorVars(css: string): Set<string> {
+  const used = new Set<string>()
+  postcss.parse(css).walkDecls((decl) => {
+    for (const v of colorVarsIn(decl.value)) used.add(v)
+  })
+  return used
+}
+
+/** --charcoal-color-* の var() チェインを解決。未定義参照・循環があれば失敗。 */
+function resolve(
+  token: string,
+  defs: Map<string, string>,
+  seen = new Set<string>(),
+): { ok: true } | { ok: false; reason: string } {
+  if (!defs.has(token)) return { ok: false, reason: `undefined ${token}` }
+  if (seen.has(token)) return { ok: false, reason: `cycle at ${token}` }
+  seen.add(token)
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  for (const ref of colorVarsIn(defs.get(token)!)) {
+    const r = resolve(ref, defs, seen)
+    if (!r.ok) return r
+  }
+  return { ok: true } // --charcoal-color-* を含まない = 終端 (--charcoal-* かリテラル)
+}
+
+const { defs: tokenDefs, duplicates } = parseColorDefinitions(
+  await fs.readFile(tokenV1Path, 'utf-8'),
+)
+const variables2Defs = parseColorDefinitions(
+  await fs.readFile(variables2Path, 'utf-8'),
+).defs
+
+const componentCssFiles = await getCssFiles(componentsDir)
+const componentUsed = new Set<string>()
+for (const file of componentCssFiles) {
+  for (const v of usedColorVars(await fs.readFile(file, 'utf-8')))
+    componentUsed.add(v)
+}
+
+describe('Design Token 1.0互換 (v1/remap.css) remap', () => {
+  it('重複定義がない', () => {
+    expect(duplicates).toEqual([])
+  })
+
+  it('全ての --charcoal-color-* が解決する (dangling / 循環がない)', () => {
+    const broken = [...tokenDefs.keys()]
+      .map((token) => ({ token, r: resolve(token, tokenDefs) }))
+      .filter(({ r }) => !r.ok)
+      .map(({ token, r }) => `${token}: ${(r as { reason: string }).reason}`)
+
+    expect(broken).toEqual([])
+  })
+
+  it('冗長トークンがない (2.0 API にも無く・内部参照も無く・コンポーネント未使用)', () => {
+    const internallyReferenced = new Set<string>()
+    for (const value of tokenDefs.values()) {
+      for (const ref of colorVarsIn(value)) internallyReferenced.add(ref)
+    }
+    const redundant = [...tokenDefs.keys()].filter(
+      (t) =>
+        !variables2Defs.has(t) &&
+        !internallyReferenced.has(t) &&
+        !componentUsed.has(t),
+    )
+
+    expect(redundant).toEqual([])
+  })
+
+  it.each(componentCssFiles)(
+    '%s: 使用する --charcoal-color-* は全て v1/remap.css 経由で解決する (非破壊)',
+    async (file) => {
+      const css = await fs.readFile(file, 'utf-8')
+      const unresolved = [...usedColorVars(css)]
+        .map((token) => ({ token, r: resolve(token, tokenDefs) }))
+        .filter(({ r }) => !r.ok)
+        .map(({ token }) => token)
+
+      expect(unresolved).toEqual([])
+    },
+  )
+})

package/src/components/Icon/index.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react'
 
 import '@charcoal-ui/icons'
-import '@charcoal-ui/icons/css/icon.css'
+// tmp fix for https://github.com/rolldown/tsdown/pull/981
+import '../../../../icons/css/icon.css'
 import { calcActualSize } from '@charcoal-ui/icons'
 import type { IconSizing, PixivIcon, Props } from '@charcoal-ui/icons'
 

package/src/components/Modal/__snapshots__/index.css.snap

@@ -9,7 +9,7 @@
   justify-content: center;
   padding: 40px 0;
   box-sizing: border-box;
-  background-color: var(--charcoal-color-container-neutral-default);
+  background-color: var(--charcoal-color-background-overlay);
 }
 
 @media (max-width: 743px) {

package/src/components/Modal/index.css

@@ -10,7 +10,7 @@
   padding: 40px 0;
   box-sizing: border-box;
 
-  background-color: var(--charcoal-color-container-neutral-default);
+  background-color: var(--charcoal-color-background-overlay);
 
   @media (max-width: 743px) {
     &[data-bottom-sheet='true'],