@charcoal-ui/tailwind-config 4.0.1 → 4.2.0

package/src/_lib/TailwindBuild.ts

@@ -1,7 +1,7 @@
 import postcss, { Result } from 'postcss'
 import postcssSelectorParser from 'postcss-selector-parser'
 import tailwindcss from 'tailwindcss'
-import type { TailwindConfig } from 'tailwindcss/tailwind-config'
+import type { Config } from 'tailwindcss'
 
 const selectorParser = postcssSelectorParser()
 
@@ -45,11 +45,10 @@ export class TailwindBuild {
     this.parsedCss = parsedCss
   }
 
-  static async run(config: TailwindConfig, css: string) {
+  static async run(config: Config, css: string) {
     const plugin = tailwindcss({
       ...config,
 
-      // @ts-expect-error safelist が @types/tailwindcss に生えてない
       safelist: [
         {
           // 一切 purge しない

package/src/colors/plugin.ts

@@ -6,7 +6,7 @@ import {
   flatMapObject,
   mapObject,
 } from '@charcoal-ui/utils'
-import plugin, { TailwindPlugin } from 'tailwindcss/plugin'
+import plugin from 'tailwindcss/plugin'
 import { mergeEffect } from '../foundation'
 import { CSSVariableName, CSSVariables, Definition, ThemeMap } from '../types'
 import { COLOR_PREFIX, isSingleColor } from './utils'
@@ -19,19 +19,18 @@ import { defineCssVariablesV1 } from './pluginTokenV1'
 export default function cssVariableColorPlugin(
   themeMap: ThemeMap,
   cssVariablesV1: boolean
-): TailwindPlugin {
+): ReturnType<typeof plugin> {
   // `: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
+      // @ts-expect-error FIXME
       addBase(cssVariablesV1)
     }
   })

package/src/colors/toTailwindConfig.ts

@@ -1,6 +1,6 @@
 import { Material } from '@charcoal-ui/foundation'
 import { applyEffect, filterObject, mapObject } from '@charcoal-ui/utils'
-import type { TailwindConfig } from 'tailwindcss/tailwind-config'
+import type { Config } from 'tailwindcss'
 import { MergedEffect } from '../foundation'
 
 import { TailwindVersion } from '../types'
@@ -12,7 +12,7 @@ export function colorsToTailwindConfig(
   version: TailwindVersion,
   colors: AnyColorTheme,
   effects: MergedEffect
-): TailwindConfig['theme']['colors'] {
+): NonNullable<Config['theme']>['colors'] {
   const targetColors = filterObject(colors, isSingleColor)
   const DEFAULT = getDefaultKeyName(version)
 

package/src/docs/borderRadius/index.ts

@@ -1,5 +1,6 @@
 import { config } from '../../'
+import type { Config } from 'tailwindcss'
 
-export const borderRadius = config.theme.borderRadius ?? {}
+export const borderRadius = (config as Config).theme?.borderRadius ?? {}
 
 export { BorderRadius } from './BorderRadius'

package/src/docs/colors/Colors.tsx

@@ -55,6 +55,7 @@ export const Colors: React.FC = () => {
     <div className="space-y-24">
       {Object.entries(colors).map(([colorName, values]) => (
         <div className="flex" key={colorName}>
+          {/* @ts-expect-error FIXME */}
           {typeof values === 'object' && 'DEFAULT' in values ? (
             <>
               <ColorBox

package/src/gradient/plugin.ts

@@ -30,21 +30,19 @@ export default function cssVariableColorPlugin(
   return plugin(({ addBase, addUtilities }) => {
     const css = mapKeys(utilities, (name) => `${VAR_PREFIX}${name}`)
     if (selectorOrMediaQuery.startsWith('@media')) {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
       addBase({
         [selectorOrMediaQuery]: {
           ':root': css,
         },
       })
     } else {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
       addBase({
         [selectorOrMediaQuery]: css,
       })
     }
 
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
     addUtilities(classRules, {
+      // @ts-expect-error FIXME
       variants: ['responsive'],
     })
   })

package/src/index.test.ts

@@ -19,6 +19,7 @@ describe('tailwind.config.js', () => {
 
   beforeAll(async () => {
     result = await TailwindBuild.run(
+      // @ts-expect-error FIXME: missing content
       defaultConfig,
       `
         @import 'tailwindcss/base';

package/src/index.ts

@@ -1,6 +1,6 @@
 import { GRID_COUNT, mergeEffect } from './foundation'
 
-import type { TailwindConfig, TailwindTheme } from 'tailwindcss/tailwind-config'
+import type { Config } from 'tailwindcss'
 import { TailwindVersion, ThemeMap } from './types'
 
 import {
@@ -36,7 +36,7 @@ export function createTailwindConfig({
   version = 'v3',
   cssVariablesV1 = true,
   unstableTokenV2 = false,
-}: Options): TailwindConfig {
+}: Options): Omit<Config, 'content'> {
   assertAllThemeHaveSameKeys(theme)
 
   const defaultTheme = theme[':root']
@@ -53,7 +53,7 @@ export function createTailwindConfig({
     spacing: spacingV2,
     gap: gapV2,
     width: widthV2,
-  }: Partial<TailwindTheme> = unstableTokenV2
+  }: Partial<NonNullable<Config['theme']>> = unstableTokenV2
     ? unstable_createTailwindConfigTokenV2().theme
     : {}
 
@@ -148,7 +148,6 @@ export function createTailwindConfig({
     ...getVariantOption(version),
 
     corePlugins: {
-      // @ts-expect-error 配列にしろと言ってくるが、たぶん @types が間違っている
       lineHeight: false,
     },
     plugins: [
@@ -166,4 +165,6 @@ export function createTailwindConfig({
   }
 }
 
-export const config: TailwindConfig = createTailwindConfig({})
+export const config: Omit<Config, 'content'> = createTailwindConfig({})
+
+export default config

package/src/tokenV2.test.ts

@@ -4,6 +4,7 @@ import { unstable_createTailwindConfigTokenV2 } from './tokenV2'
 describe('unstable_createTailwindConfigTokenV2', async () => {
   const config = unstable_createTailwindConfigTokenV2()
   const result = await TailwindBuild.run(
+    // @ts-expect-error FIXME: missing content
     config,
     `
         @import 'tailwindcss/base';

package/src/tokenV2.ts

@@ -1,10 +1,5 @@
-/* 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 type { Config } from 'tailwindcss'
 import {
   flattenKey as flattenKeys,
   mapDefaultKey as mapDefaultKeys,
@@ -39,7 +34,7 @@ export function unstable_createTailwindConfigTokenV2() {
         ]
       })
     })
-  ) as TailwindThemeFontSizes
+  ) as NonNullable<Config['theme']>['fontSize']
 
   // space.target.s -> p-target-s
   // space.gap.gapButtons -> p-gap-buttons
@@ -48,7 +43,7 @@ export function unstable_createTailwindConfigTokenV2() {
   // color.container.hover -> bg-container-hover
   const colors = mapDefaultKeys(light.color)
 
-  const config: TailwindConfig = {
+  const config: Omit<Config, 'content'> = {
     darkMode: 'media',
     theme: {
       // borderWidth.m -> border-m

package/src/typography/plugin.ts

@@ -38,7 +38,6 @@ const typographyPlugin = plugin(({ addUtilities }) => {
     typographyStyle(style),
   ])
 
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-call
   addUtilities(
     {
       ...typographyClasses,
@@ -52,6 +51,7 @@ const typographyPlugin = plugin(({ addUtilities }) => {
       },
     },
     {
+      // @ts-expect-error FIXME
       variants: ['responsive'],
     }
   )

package/src/util.ts

@@ -1,4 +1,4 @@
-import type { TailwindConfig } from 'tailwindcss/tailwind-config'
+import type { Config } from 'tailwindcss'
 import { TailwindVersion, ThemeMap } from './types'
 
 /**
@@ -19,9 +19,7 @@ export function getDefaultKeyName(version: TailwindVersion) {
   }
 }
 
-export function getVariantOption(
-  version: TailwindVersion
-): Partial<TailwindConfig> {
+export function getVariantOption(version: TailwindVersion): Partial<Config> {
   switch (version) {
     case 'v3': {
       // v3 以上では variants は variantOrders に改名された
@@ -77,7 +75,6 @@ export const mapDefaultKey = <O extends object>(o: O) => {
   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
     }