@charcoal-ui/tailwind-config 4.0.0-beta.8 → 4.0.0-rc.1

package/src/_lib/TailwindBuild.ts

@@ -49,7 +49,6 @@ export class TailwindBuild {
     const plugin = tailwindcss({
       ...config,
 
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-expect-error safelist が @types/tailwindcss に生えてない
       safelist: [
         {
@@ -90,9 +89,9 @@ export class TailwindBuild {
     const cssVariables = new Set<string>()
 
     /**
-     * 独自に生成する CSS 変数は必ず --tailwind で始まるはず
+     * 独自に生成する CSS 変数は必ず --(tailwind|charcoal) で始まるはず
      */
-    this.result.root.walkDecls(/^--tailwind/u, (decl) => {
+    this.result.root.walkDecls(/^--(tailwind|charcoal)/u, (decl) => {
       cssVariables.add(decl.prop)
     })
 
@@ -102,7 +101,7 @@ export class TailwindBuild {
   getCssVariable(varName: `--${string}`) {
     const values: string[] = []
 
-    this.result.root.walkDecls(/^--tailwind/u, (decl) => {
+    this.result.root.walkDecls(/^--(tailwind|charcoal)/u, (decl) => {
       if (decl.prop === varName) {
         values.push(decl.value)
       }

package/src/colors/plugin.ts

@@ -10,19 +10,30 @@ import plugin, { TailwindPlugin } from 'tailwindcss/plugin'
 import { mergeEffect } from '../foundation'
 import { CSSVariableName, CSSVariables, Definition, ThemeMap } from '../types'
 import { COLOR_PREFIX, isSingleColor } from './utils'
+import { defineCssVariablesV1 } from './pluginTokenV1'
 
 /**
- * `:root` 以外のケースで各 CSS Variable がどういう値を取るかを定義する
+ * --tailwind-* また --charcoal-* を生成する
+ * TODO: --tailwindをやめる
  */
-export default function cssVariableColorPlugin({
-  ':root': _defaultTheme,
-  ...themes
-}: ThemeMap): TailwindPlugin {
-  const definitions = defineCssVariables(themes)
+export default function cssVariableColorPlugin(
+  themeMap: ThemeMap,
+  cssVariablesV1: boolean
+): TailwindPlugin {
+  // `:root` 以外のケースで各 CSS Variable がどういう値を取るかを定義する
+  const { ':root': _defaultTheme, ...otherThemes } = themeMap
+  const definitions = defineCssVariables(otherThemes)
 
   return plugin(({ addBase }) => {
     // eslint-disable-next-line @typescript-eslint/no-unsafe-call
     addBase(definitions)
+
+    // styledのTokenInjector移植(background処理除く)
+    if (cssVariablesV1) {
+      const cssVariablesV1 = defineCssVariablesV1(themeMap)
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+      addBase(cssVariablesV1)
+    }
   })
 }
 

package/src/colors/pluginTokenV1.ts

@@ -0,0 +1,99 @@
+import {
+  applyEffect,
+  customPropertyToken,
+  filterObject,
+  flatMapObject,
+  mapObject,
+} from '@charcoal-ui/utils'
+import { ThemeMap } from '../types'
+import {
+  CharcoalAbstractTheme,
+  EffectType,
+  Key,
+  CharcoalTheme as Theme,
+} from '@charcoal-ui/theme'
+
+export function defineCssVariablesV1(themeMap: ThemeMap) {
+  // @ts-expect-error FIXME
+  return mapObject(themeMap, (key, theme) => {
+    if (key.startsWith('@media')) {
+      return [
+        key,
+        {
+          ':root': defineColorVariableCSS(theme),
+        },
+      ]
+    } else {
+      return [key, defineColorVariableCSS(theme)]
+    }
+  })
+}
+
+export const defineColorVariableCSS = (theme: Theme) => {
+  const borders = mapObject(theme.border, (name, { color }) => [
+    // REVIEW: もしtheme.colorにたまたまborder-〇〇で始まる色名がいたら被りうる
+    withPrefixes('border', name),
+    color,
+  ])
+
+  const colors = defineThemeVariables({ ...theme.color, ...borders })({ theme })
+  return colors
+}
+
+/**
+ * Check whether a value is non-null and non-undefined
+ *
+ * @param value nullable
+ */
+export const isPresent = <T>(value: T): value is NonNullable<T> => value != null
+
+/**
+ * 子孫要素で使われるカラーテーマの CSS Variables を上書きする
+ *
+ * @params colorParams - 上書きしたい色の定義（ `theme.color` の一部だけ書けば良い ）
+ * @params effectParams - effect の定義を上書きしたい場合は渡す（必須ではない）
+ *
+ * @example
+ * ```tsx
+ * const LocalTheme = styled.div`
+ *   ${defineThemeVariables({ text1: '#ff0000' })}
+ *   // `text1` is now defined as red
+ *   ${theme((o) => [o.font.text1])}
+ * `
+ * ```
+ */
+export function defineThemeVariables(
+  colorParams: Partial<CharcoalAbstractTheme['color']>,
+  effectParams?: Partial<CharcoalAbstractTheme['effect']>
+) {
+  return function toCssObject(props: {
+    theme: Pick<CharcoalAbstractTheme, 'effect'>
+  }) {
+    const colors = filterObject(colorParams, isPresent)
+
+    // flatMapObject の中で毎回 Object.entries を呼ぶのは無駄なので外で呼ぶ
+    const effects = Object.entries({
+      ...props.theme.effect,
+      ...effectParams,
+    })
+
+    return flatMapObject(colors, (colorKey, color) => [
+      [customPropertyToken(colorKey), color],
+
+      ...effects.map<[string, string]>(([effectKey, effect]) => [
+        customPropertyToken(colorKey, [effectKey]),
+        applyEffect(color, [effect]),
+      ]),
+    ])
+  }
+}
+
+export function isSupportedEffect(effect: Key): effect is EffectType {
+  return ['hover', 'press', 'disabled'].includes(effect as string)
+}
+
+export const variable = (value: string) => `var(${value})`
+
+export function withPrefixes(...parts: string[]) {
+  return parts.join('-')
+}

package/src/docs/colors/__snapshots__/TextBgColor.story.storyshot

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storybook Tests tailwind-config/Colors/Text bg color Playground 1`] = `
+exports[`Storybook Tests > tailwind-config/Colors/Text bg color > Playground 1`] = `
 <div
   data-dark={false}
 >

package/src/index.test.ts

@@ -11,6 +11,10 @@ describe('tailwind.config.js', () => {
     },
   })
 
+  test('defaultConfig', () => {
+    expect(defaultConfig).toMatchSnapshot()
+  })
+
   let result: TailwindBuild
 
   beforeAll(async () => {

package/src/index.ts

@@ -1,6 +1,6 @@
 import { GRID_COUNT, mergeEffect } from './foundation'
 
-import type { TailwindConfig } from 'tailwindcss/tailwind-config'
+import type { TailwindConfig, TailwindTheme } from 'tailwindcss/tailwind-config'
 import { TailwindVersion, ThemeMap } from './types'
 
 import {
@@ -21,15 +21,21 @@ import { colorsToTailwindConfig } from './colors/toTailwindConfig'
 import cssVariableColorPlugin from './colors/plugin'
 import cssVariableGradientPlugin from './gradient/plugin'
 import typographyPlugin from './typography/plugin'
+import { unstable_createTailwindConfigTokenV2 } from './tokenV2'
+export { unstable_createTailwindConfigTokenV2 }
 
 interface Options {
   version?: TailwindVersion
   theme?: ThemeMap
+  cssVariablesV1?: boolean
+  unstableTokenV2?: boolean
 }
 
 export function createTailwindConfig({
   theme = { ':root': light },
   version = 'v3',
+  cssVariablesV1 = true,
+  unstableTokenV2 = false,
 }: Options): TailwindConfig {
   assertAllThemeHaveSameKeys(theme)
 
@@ -37,6 +43,20 @@ export function createTailwindConfig({
   const effects = mergeEffect(defaultTheme)
   const DEFAULT = getDefaultKeyName(version)
 
+  const {
+    borderWidth: borderWidthV2,
+    borderRadius: borderRadiusV2,
+    borderColor: borderColorV2,
+    colors: colorsV2,
+    fontSize: fontSizeV2,
+    fontWeight: fontWeightV2,
+    spacing: spacingV2,
+    gap: gapV2,
+    width: widthV2,
+  }: Partial<TailwindTheme> = unstableTokenV2
+    ? unstable_createTailwindConfigTokenV2().theme
+    : {}
+
   return {
     theme: {
       screens: {
@@ -56,6 +76,7 @@ export function createTailwindConfig({
         transparent: 'transparent',
         current: 'currentColor',
         ...colorsToTailwindConfig(version, defaultTheme.color, effects),
+        ...colorsV2,
       },
       borderColor: {
         ...colorsToTailwindConfig(
@@ -63,8 +84,15 @@ export function createTailwindConfig({
           mapObject(defaultTheme.border, (k, v) => [k, v.color]),
           effects
         ),
+        ...borderColorV2,
+      },
+      spacing: {
+        ...mapObject(
+          SPACING,
+          (name, pixel) => [name, px(pixel)] as [string, string]
+        ),
+        ...spacingV2,
       },
-      spacing: mapObject(SPACING, (name, pixel) => [name, px(pixel)]),
       width: {
         full: '100%',
         screen: '100vw',
@@ -92,29 +120,40 @@ export function createTailwindConfig({
           }),
           {}
         ),
+        ...widthV2,
       },
       gap: {
         fixed: px(GUTTER_UNIT),
+        ...gapV2,
+      },
+      borderRadius: {
+        ...mapObject(
+          BORDER_RADIUS,
+          (name, value) => [name, px(value)] as [string, string]
+        ),
+        ...borderRadiusV2,
       },
-      borderRadius: mapObject(BORDER_RADIUS, (name, value) => [
-        name,
-        px(value),
-      ]),
       transitionDuration: {
         [DEFAULT]: '0.2s',
       },
+      ...(unstableTokenV2
+        ? {
+            borderWidth: borderWidthV2,
+            fontSize: fontSizeV2,
+            fontWeight: fontWeightV2,
+          }
+        : {}),
     },
 
     ...getVariantOption(version),
 
     corePlugins: {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-expect-error 配列にしろと言ってくるが、たぶん @types が間違っている
       lineHeight: false,
     },
     plugins: [
       typographyPlugin,
-      cssVariableColorPlugin(theme),
+      cssVariableColorPlugin(theme, Boolean(cssVariablesV1)),
 
       ...Object.entries(theme).map(([selectorOrMediaQuery, theme]) =>
         cssVariableGradientPlugin(

package/src/tokenV2.test.ts

@@ -0,0 +1,21 @@
+import { TailwindBuild } from './_lib/TailwindBuild'
+import { unstable_createTailwindConfigTokenV2 } from './tokenV2'
+
+describe('unstable_createTailwindConfigTokenV2', async () => {
+  const config = unstable_createTailwindConfigTokenV2()
+  const result = await TailwindBuild.run(
+    config,
+    `
+        @import 'tailwindcss/base';
+        @import 'tailwindcss/utilities';
+        @import 'tailwindcss/components';
+      `
+  )
+  test('config object', () => {
+    expect(config).toMatchSnapshot()
+  })
+
+  test('list of classes', () => {
+    expect(result.classNames).toMatchSnapshot()
+  })
+})

package/src/tokenV2.ts

@@ -0,0 +1,72 @@
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+import light from '@charcoal-ui/theme/unstable-tokens/css-variables.json'
+import {
+  TailwindConfig,
+  TailwindThemeFontSizes,
+} from 'tailwindcss/tailwind-config'
+import {
+  flattenKey as flattenKeys,
+  mapDefaultKey as mapDefaultKeys,
+} from './util'
+
+export function unstable_createTailwindConfigTokenV2() {
+  const fontSize = Object.fromEntries(
+    Object.entries(light.text['font-size']).flatMap(([k, v]) => {
+      // text.fontSize.paragraph + text.lineHeight.paragraph -> text-paragraph
+      if (typeof v === 'string') {
+        return [
+          [
+            k,
+            [
+              v,
+              // @ts-expect-error k is keyof line-height
+              { lineHeight: light.text['line-height'][k] },
+            ],
+          ],
+        ]
+      }
+
+      // text.fontSize.heading.s + text.lineHeight.heading.s -> text-heading-s
+      return Object.entries(v as Record<string, string>).map(([kk, vv]) => {
+        return [
+          [k, kk].join('-'),
+          [
+            vv,
+            // @ts-expect-error k is keyof line-height
+            { lineHeight: light.text['line-height'][k][kk] },
+          ],
+        ]
+      })
+    })
+  ) as TailwindThemeFontSizes
+
+  // space.target.s -> p-target-s
+  // space.gap.gapButtons -> p-gap-buttons
+  const spacing = flattenKeys(light.space, (key) => !/(gap|padding)/.test(key))
+  // color.container.default -> bg-container
+  // color.container.hover -> bg-container-hover
+  const colors = mapDefaultKeys(light.color)
+
+  const config: TailwindConfig = {
+    darkMode: 'media',
+    theme: {
+      // borderWidth.m -> border-m
+      // borderWidth.focus.1 -> border-focus-1
+      borderWidth: flattenKeys(light['border-width']),
+      borderRadius: light.radius,
+      borderColor: flattenKeys(colors.border),
+
+      colors,
+
+      fontSize,
+      fontWeight: light.text['font-weight'],
+
+      spacing: spacing,
+      gap: spacing,
+      width: light['paragraph-width'],
+    },
+  }
+
+  return config
+}

package/src/util.ts

@@ -71,3 +71,32 @@ export function camelToKebab(value: string) {
     .replace(/(?<small>[\da-z]|(?=[A-Z]))(?<capital>[A-Z])/gu, '$1-$2')
     .toLowerCase()
 }
+
+export const mapDefaultKey = <O extends object>(o: O) => {
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+  return JSON.parse(JSON.stringify(o), function reviver(k: string, v: string) {
+    if (k === 'default') {
+      const DefaultKey = getDefaultKeyName('v3')
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+      this[DefaultKey] = v
+      return undefined
+    }
+    return v
+  })
+}
+
+export const flattenKey = <O extends object>(
+  o: O,
+  join?: (key: string) => boolean
+) => {
+  return Object.fromEntries(
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    Object.entries(o).flatMap(([key, v]) => {
+      if (typeof v === 'string') return [[key, v]]
+      return Object.entries(v as object).map(([kk, vv]) => {
+        return [join?.(key) ?? true ? [key, kk].join('-') : kk, vv]
+      })
+    })
+  )
+}