@charcoal-ui/tailwind-config 1.0.1-alpha.1 → 1.0.1-alpha.2

package/dist/index.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.module.js","sources":["../src/foundation.ts","../src/util.ts","../src/colors/utils.ts","../src/colors/toTailwindConfig.ts","../src/colors/plugin.ts","../src/gradient/plugin.ts","../src/typography/plugin.ts","../src/index.ts"],"sourcesContent":["import { Effect } from '@charcoal-ui/foundation'\nimport { CharcoalTheme as Theme } from '@charcoal-ui/theme'\n\nexport const GRID_COUNT = 12\n\nexport function mergeEffect({\n  elementEffect,\n  effect,\n}: Pick<Theme, 'elementEffect' | 'effect'>): MergedEffect {\n  return {\n    ...elementEffect,\n    ...effect,\n    outline: {\n      type: 'opacity',\n      opacity: 0.32,\n    } as Effect,\n  }\n}\n\nexport type MergedEffect = Record<string, Effect>\n","import { TailwindConfig } from 'tailwindcss/tailwind-config'\nimport { TailwindVersion, ThemeMap } from './types'\n\n/**\n * the key \"default\" or \"DEFAULT\" has special meaning and dropped from class name\n *\n * @see https://tailwindcss.com/docs/upgrading-to-v2#update-default-theme-keys-to-default\n */\nexport function getDefaultKeyName(version: TailwindVersion) {\n  switch (version) {\n    case 'v3':\n    case 'v2': {\n      return 'DEFAULT'\n    }\n\n    case 'v1': {\n      return 'default'\n    }\n  }\n}\n\nexport function getVariantOption(\n  version: TailwindVersion\n): Partial<TailwindConfig> {\n  switch (version) {\n    case 'v3': {\n      // v3 以上では variants は variantOrders に改名された\n      // そしてこれは上書きをしたいモチベがない\n      // https://v2.tailwindcss.com/docs/configuration#variant-order\n      return {}\n    }\n\n    case 'v2':\n    case 'v1': {\n      return { variants: {} }\n    }\n  }\n}\n\nfunction setEquals<T>(a: Set<T>, b: Set<T>) {\n  return a.size === b.size && Array.from(a).every((value) => b.has(value))\n}\n\nexport function assertAllThemeHaveSameKeys(themeMap: ThemeMap): void {\n  const defaultTheme = themeMap[':root']\n  const expectedColorKeys = new Set(Object.keys(defaultTheme.color))\n  const expectedEffectKeys = new Set(Object.keys(defaultTheme.effect))\n\n  for (const [name, theme] of Object.entries(themeMap)) {\n    const colorKeys = new Set(Object.keys(theme.color))\n    const effectKeys = new Set(Object.keys(theme.effect))\n\n    if (!setEquals(colorKeys, expectedColorKeys)) {\n      throw new Error(`:root and ${name} does not have same colors.\n\nExpected( :root ): ${JSON.stringify(Array.from(expectedColorKeys))}\nGot: ${JSON.stringify(Array.from(colorKeys))}`)\n    }\n\n    if (!setEquals(effectKeys, expectedEffectKeys)) {\n      throw new Error(`:root and ${name} does not have same effects.\n\nExpected( :root ): ${JSON.stringify(Array.from(expectedEffectKeys))}\nGot: ${JSON.stringify(Array.from(effectKeys))}`)\n    }\n  }\n}\n\nexport function mapKeys<V, K extends string>(\n  object: Record<string, V>,\n  callback: (key: string) => K\n) {\n  return Object.fromEntries(\n    Object.entries(object).map(([key, value]) => [callback(key), value])\n  ) as Record<K, V>\n}\n\nexport function mapObject<\n  SourceKey extends string,\n  SourceValue,\n  DestKey extends string,\n  DestValue\n>(\n  source: Record<SourceKey, SourceValue>,\n  callback: (\n    key: SourceKey,\n    value: SourceValue\n  ) => [DestKey, DestValue] | null | undefined\n) {\n  return Object.fromEntries(\n    Object.entries(source).flatMap(([key, value]) => {\n      const entry = callback(key as SourceKey, value as SourceValue)\n      if (entry) {\n        return [entry]\n      } else {\n        return []\n      }\n    })\n  ) as Record<DestKey, DestValue>\n}\n\nexport function flatMapObject<\n  SourceKey extends string,\n  SourceValue,\n  DestKey extends string,\n  DestValue\n>(\n  source: Record<SourceKey, SourceValue>,\n  callback: (key: SourceKey, value: SourceValue) => [DestKey, DestValue][]\n) {\n  return Object.fromEntries(\n    Object.entries(source).flatMap(([key, value]) => {\n      return callback(key as SourceKey, value as SourceValue)\n    })\n  ) as Record<DestKey, DestValue>\n}\n\nexport function filterObject<Source, Dest extends Source>(\n  source: Record<string, Source>,\n  fn: (value: Source) => value is Dest\n) {\n  return mapObject(source, (key, value) => {\n    if (fn(value) === true) {\n      return [key, value]\n    } else {\n      return null\n    }\n  }) as Record<string, Dest>\n}\n\nexport function camelToKebab(value: string) {\n  return value\n    .replace(/(?<small>[\\da-z]|(?=[A-Z]))(?<capital>[A-Z])/gu, '$1-$2')\n    .toLowerCase()\n}\n","import { GradientMaterial, Material } from '@charcoal-ui/foundation'\n\nexport const COLOR_PREFIX = '--tailwind-color-'\n\nexport function isSingleColor(color: AnyColor): color is Material {\n  return typeof color === 'string'\n}\n\ntype AnyColor = Material | GradientMaterial\n\nexport type AnyColorTheme = Record<string, AnyColor>\n","import { Material } from '@charcoal-ui/foundation'\nimport { applyEffect } from '@charcoal-ui/utils'\nimport { TailwindConfig } from 'tailwindcss/tailwind-config'\nimport { MergedEffect } from '../foundation'\n\nimport { TailwindVersion } from '../types'\nimport { filterObject, getDefaultKeyName, mapObject } from '../util'\nimport { AnyColorTheme, COLOR_PREFIX, isSingleColor } from './utils'\n\nexport function colorsToTailwindConfig(\n  version: TailwindVersion,\n  colors: AnyColorTheme,\n  effects: MergedEffect\n): TailwindConfig['theme']['colors'] {\n  const targetColors = filterObject(colors, isSingleColor)\n  const DEFAULT = getDefaultKeyName(version)\n\n  /**\n   * こういう感じのを吐き出す\n   *\n   * ```js\n   * {\n   *   DEFAULT: 'var(--tailwind-color-hoge1, #fff)',\n   *   hover: 'var(--tailwind-color-hoge1--hover, #eee)',\n   *   press: 'var(--tailwind-color-hoge1--press, #ddd)',\n   *   disabled: 'var(--tailwind-color-hoge1--disabled, #eee)',\n   * }\n   * ```\n   */\n  function colorsForAllEffects(name: string, color: Material) {\n    const varName = `${COLOR_PREFIX}${name}`\n\n    return {\n      [DEFAULT]: `var(${varName}, ${color})`,\n\n      ...mapObject(effects, (effectName, effect) => [\n        effectName,\n        `var(${varName}--${effectName}, ${applyEffect(color, effect)})`,\n      ]),\n    }\n  }\n\n  return mapObject(targetColors, (name, color) => [\n    name,\n    colorsForAllEffects(name, color),\n  ])\n}\n","import { Material } from '@charcoal-ui/foundation'\nimport { CharcoalTheme as Theme } from '@charcoal-ui/theme'\nimport { applyEffect } from '@charcoal-ui/utils'\nimport plugin, { TailwindPlugin } from 'tailwindcss/plugin'\nimport { mergeEffect } from '../foundation'\nimport { CSSVariableName, CSSVariables, Definition, ThemeMap } from '../types'\nimport { filterObject, flatMapObject, mapObject } from '../util'\nimport { COLOR_PREFIX, isSingleColor } from './utils'\n\n/**\n * `:root` 以外のケースで各 CSS Variable がどういう値を取るかを定義する\n */\nexport default function cssVariableColorPlugin({\n  ':root': _defaultTheme,\n  ...themes\n}: ThemeMap): TailwindPlugin {\n  const definitions = defineCssVariables(themes)\n\n  return plugin(({ addBase }) => {\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n    addBase(definitions)\n  })\n}\n\nexport function defineCssVariables(themes: Omit<ThemeMap, ':root'>) {\n  return mapObject(themes, (selectorOrMediaQuery, theme) => {\n    const css = toCssVariables(theme)\n\n    if (selectorOrMediaQuery.startsWith('@media')) {\n      return [\n        selectorOrMediaQuery,\n        {\n          ':root': css,\n        },\n      ]\n    } else {\n      return [selectorOrMediaQuery, css]\n    }\n  }) as Definition\n}\n\nfunction toCssVariables(theme: Theme): CSSVariables {\n  const colors = filterObject(theme.color, isSingleColor)\n  const effects = Object.entries(mergeEffect(theme))\n\n  return flatMapObject(colors, (name, color) => {\n    const varName: keyof CSSVariables = `${COLOR_PREFIX}${name}`\n\n    return [\n      [varName, color],\n\n      ...effects.map<[CSSVariableName, Material]>(([type, effect]) => [\n        `${varName}--${type}`,\n        applyEffect(color, effect),\n      ]),\n    ]\n  })\n}\n","import plugin from 'tailwindcss/plugin'\nimport { camelToKebab, flatMapObject, mapKeys, mapObject } from '../util'\nimport { GradientMaterial } from '@charcoal-ui/foundation'\nimport { ThemeColorGradient } from '@charcoal-ui/theme'\nimport {\n  applyEffectToGradient,\n  gradient,\n  GradientDirection,\n} from '@charcoal-ui/utils'\nimport { Values } from '../types'\nimport { MergedEffect } from '../foundation'\n\nconst VAR_PREFIX = '--tailwind-gradient-'\n\nexport default function cssVariableColorPlugin(\n  gradients: ThemeColorGradient,\n  effects: MergedEffect,\n  selectorOrMediaQuery: string\n) {\n  const utilities = getUtilities(gradients, effects)\n\n  const classRules = mapObject(utilities, (name) => [\n    `.bg-${name}`,\n    { backgroundImage: `var(${VAR_PREFIX}${name})` },\n  ])\n\n  return plugin(({ addBase, addUtilities }) => {\n    const css = mapKeys(utilities, (name) => `${VAR_PREFIX}${name}`)\n    if (selectorOrMediaQuery.startsWith('@media')) {\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n      addBase({\n        [selectorOrMediaQuery]: {\n          ':root': css,\n        },\n      })\n    } else {\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n      addBase({\n        [selectorOrMediaQuery]: css,\n      })\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n    addUtilities(classRules, {\n      variants: ['responsive'],\n    })\n  })\n}\n\nconst DIRECTIONS = {\n  'to top': 'top',\n  'to bottom': 'bottom',\n  'to left': 'left',\n  'to right': 'right',\n} as const\n\n/**\n * こういう感じのやつ。この時点では `--tailwind-gradient-` のような CSS 変数名になってない\n *\n * ```js\n * {\n *   'hoge1': 'linear-gradient(to top, ...)',\n *   ...\n * }\n * ```\n */\ntype Utilities = Record<string, LinearGradient>\n\ntype LinearGradient = `linear-gradient(${string})`\n\nexport function getUtilities(\n  gradients: Record<string, GradientMaterial>,\n  effect: MergedEffect\n): Utilities {\n  const effects = Object.entries(effect)\n  const directions = Object.entries(DIRECTIONS) as [\n    GradientDirection,\n    Values<typeof DIRECTIONS>\n  ][]\n\n  return flatMapObject(gradients, (name, colors) =>\n    directions.flatMap(([direction, className]) => {\n      const toLinearGradient = (colors: GradientMaterial) => {\n        const style = gradient(direction)(colors)\n\n        if (!('backgroundImage' in style)) {\n          throw new Error(\n            `Could not generate linear-gradient() from ${name} ${direction} ${className}`\n          )\n        }\n\n        // 本当は backgroundColor も同時に生成されるんだけど、使うにはそれ用の CSS 変数も一緒に作らないといけない\n        // とりあえず background-image だけで動くのでこっちだけを利用する\n        return style.backgroundImage as LinearGradient\n      }\n\n      return [\n        // こういう感じのやつ\n        // { 'hoge1': 'linear-gradienr(to top, ...)' }\n        [createUtilityName(name, className), toLinearGradient(colors)],\n\n        // こういう感じのやつ\n        // { 'hoge1--hover': 'linear-gradienr(to top, ...)' }\n        ...effects.map<[string, LinearGradient]>(([effectName, effect]) => [\n          createUtilityName(name, className, effectName),\n          toLinearGradient(applyEffectToGradient(effect)(colors)),\n        ]),\n      ]\n    })\n  )\n}\n\nfunction createUtilityName(\n  gradientName: string,\n  direction: Values<typeof DIRECTIONS>,\n  suffix = ''\n) {\n  return [camelToKebab(gradientName), direction, suffix]\n    .filter(Boolean)\n    .join('-')\n}\n","import plugin from 'tailwindcss/plugin'\nimport { TypographyDescriptor, TYPOGRAPHY_SIZE } from '@charcoal-ui/foundation'\nimport { halfLeading } from '@charcoal-ui/utils'\nimport { px } from '@charcoal-ui/utils'\nimport { mapObject } from '../util'\n\nconst leadingCancel = {\n  display: 'block',\n  width: 0,\n  height: 0,\n  content: '\"\"',\n}\n\nconst typographyStyle = (style: TypographyDescriptor) => {\n  const margin = -halfLeading(style)\n\n  return {\n    'font-size': px(style.fontSize),\n    'line-height': px(style.lineHeight),\n\n    /**\n     * cancel leading\n     *\n     * @see https://yuyakinoshita.com/blog/2020/01/20/line-height-crop/\n     */\n    '&::before': {\n      ...leadingCancel,\n      marginTop: px(margin),\n    },\n    '&::after': {\n      ...leadingCancel,\n      marginBottom: px(margin),\n    },\n  }\n}\n\nconst typographyPlugin = plugin(({ addUtilities }) => {\n  const typographyClasses = mapObject(TYPOGRAPHY_SIZE, (fontSize, style) => [\n    `.typography-${fontSize}`,\n    typographyStyle(style),\n  ])\n\n  // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n  addUtilities(\n    {\n      ...typographyClasses,\n      '.preserve-half-leading': {\n        '&::before': {\n          content: 'none',\n        },\n        '&::after': {\n          content: 'none',\n        },\n      },\n    },\n    {\n      variants: ['responsive'],\n    }\n  )\n})\n\nexport default typographyPlugin\n","import { GRID_COUNT, mergeEffect } from './foundation'\n\nimport { TailwindConfig } from 'tailwindcss/tailwind-config'\nimport { TailwindVersion, ThemeMap } from './types'\n\nimport {\n  assertAllThemeHaveSameKeys,\n  getDefaultKeyName,\n  getVariantOption,\n  mapObject,\n} from './util'\nimport {\n  COLUMN_UNIT,\n  GUTTER_UNIT,\n  SPACING,\n  BORDER_RADIUS,\n} from '@charcoal-ui/foundation'\nimport { light } from '@charcoal-ui/theme'\nimport { px } from '@charcoal-ui/utils'\nimport { colorsToTailwindConfig } from './colors/toTailwindConfig'\n\nimport cssVariableColorPlugin from './colors/plugin'\nimport cssVariableGradientPlugin from './gradient/plugin'\nimport typographyPlugin from './typography/plugin'\n\ninterface Options {\n  version?: TailwindVersion\n  theme?: ThemeMap\n}\n\nexport function createTailwindConfig({\n  theme = { ':root': light },\n  version = 'v3',\n}: Options): TailwindConfig {\n  assertAllThemeHaveSameKeys(theme)\n\n  const defaultTheme = theme[':root']\n  const effects = mergeEffect(defaultTheme)\n  const DEFAULT = getDefaultKeyName(version)\n\n  return {\n    theme: {\n      screens: {\n        screen1: px(0),\n        screen2: px(defaultTheme.breakpoint.screen1),\n        screen3: px(defaultTheme.breakpoint.screen2),\n        screen4: px(defaultTheme.breakpoint.screen3),\n        screen5: px(defaultTheme.breakpoint.screen4),\n      },\n      colors: {\n        // @deprecated\n        black: '#000',\n\n        // @deprecated\n        white: '#fff',\n\n        transparent: 'transparent',\n        current: 'currentColor',\n        ...colorsToTailwindConfig(version, defaultTheme.color, effects),\n      },\n      borderColor: {\n        ...colorsToTailwindConfig(\n          version,\n          mapObject(defaultTheme.border, (k, v) => [k, v.color]),\n          effects\n        ),\n      },\n      spacing: mapObject(SPACING, (name, pixel) => [name, px(pixel)]),\n      width: {\n        full: '100%',\n        screen: '100vw',\n        auto: 'auto',\n\n        /**\n         * generates classes like \"w-col-span-1\"\n         */\n        ...Array.from({ length: GRID_COUNT }, (_, i) => i + 1).reduce(\n          (styles, i) => ({\n            ...styles,\n            [`col-span-${i}`]: px(COLUMN_UNIT * i + GUTTER_UNIT * (i - 1)),\n          }),\n          {}\n        ),\n\n        /**\n         * generates classes like \"w-1/12\" (except for 12/12, which just equals to w-full)\n         */\n        ...Array.from({ length: GRID_COUNT - 1 }, (_, i) => i + 1).reduce(\n          (styles, i) => ({\n            ...styles,\n            [`${i}/${GRID_COUNT}`]: `${(i / GRID_COUNT) * 100}%`,\n          }),\n          {}\n        ),\n      },\n      gap: {\n        fixed: px(GUTTER_UNIT),\n      },\n      borderRadius: mapObject(BORDER_RADIUS, (name, value) => [\n        name,\n        px(value),\n      ]),\n      transitionDuration: {\n        [DEFAULT]: '0.2s',\n      },\n    },\n\n    ...getVariantOption(version),\n\n    corePlugins: {\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-expect-error 配列にしろと言ってくるが、たぶん @types が間違っている\n      lineHeight: false,\n    },\n    plugins: [\n      typographyPlugin,\n      cssVariableColorPlugin(theme),\n\n      ...Object.entries(theme).map(([selectorOrMediaQuery, theme]) =>\n        cssVariableGradientPlugin(\n          theme.gradientColor,\n          mergeEffect(theme),\n          selectorOrMediaQuery\n        )\n      ),\n    ],\n  }\n}\n\nexport const config: TailwindConfig = createTailwindConfig({})\n"],"names":["mergeEffect","elementEffect","effect","outline","type","opacity","getDefaultKeyName","version","setEquals","a","b","size","Array","from","every","value","has","mapObject","source","callback","Object","fromEntries","entries","flatMap","entry","flatMapObject","filterObject","fn","key","isSingleColor","color","colorsToTailwindConfig","colors","effects","targetColors","DEFAULT","colorsForAllEffects","name","varName","effectName","applyEffect","cssVariableColorPlugin","_defaultTheme","definitions","selectorOrMediaQuery","theme","css","map","toCssVariables","startsWith","plugin","addBase","DIRECTIONS","createUtilityName","gradientName","direction","suffix","replace","toLowerCase","filter","Boolean","join","leadingCancel","display","width","height","content","typographyStyle","style","margin","halfLeading","px","fontSize","lineHeight","marginTop","marginBottom","typographyPlugin","addUtilities","TYPOGRAPHY_SIZE","variants","createTailwindConfig","light","themeMap","defaultTheme","expectedColorKeys","Set","keys","expectedEffectKeys","colorKeys","effectKeys","Error","JSON","stringify","assertAllThemeHaveSameKeys","screens","screen1","screen2","breakpoint","screen3","screen4","screen5","black","white","transparent","current","borderColor","border","k","v","spacing","SPACING","pixel","full","screen","auto","length","_","i","reduce","styles","COLUMN_UNIT","GUTTER_UNIT","GRID_COUNT","gap","fixed","borderRadius","BORDER_RADIUS","transitionDuration","getVariantOption","corePlugins","plugins","gradients","utilities","directions","className","toLinearGradient","gradient","backgroundImage","applyEffectToGradient","getUtilities","classRules","cssVariableGradientPlugin","gradientColor","config"],"mappings":"4sDAKgBA,KAId,cAHAC,gBACAC,QAKEC,QAAS,CACPC,KAAM,UACNC,QAAS,gBCNCC,EAAkBC,GAChC,OAAQA,GACN,IAAK,KACL,IAAK,KACH,MAAO,UAGT,IAAK,KACH,MAAO,WAuBb,SAASC,EAAaC,EAAWC,GAC/B,OAAOD,EAAEE,OAASD,EAAEC,MAAQC,MAAMC,KAAKJ,GAAGK,MAAM,SAACC,UAAUL,EAAEM,IAAID,cAqCnDE,EAMdC,EACAC,GAKA,OAAOC,OAAOC,YACZD,OAAOE,QAAQJ,GAAQK,QAAQ,gBACvBC,EAAQL,aACd,OAAIK,EACK,CAACA,GAED,eAMCC,EAMdP,EACAC,GAEA,OAAOC,OAAOC,YACZD,OAAOE,QAAQJ,GAAQK,QAAQ,YAC7B,OAAOJ,yBAKGO,EACdR,EACAS,GAEA,OAAOV,EAAUC,EAAQ,SAACU,EAAKb,GAC7B,OAAkB,IAAdY,EAAGZ,GACE,CAACa,EAAKb,mBCvHHc,EAAcC,GAC5B,MAAwB,iBAAVA,WCIAC,EACdxB,EACAyB,EACAC,GAEA,IAAMC,EAAeR,EAAaM,EAAQH,GACpCM,EAAU7B,EAAkBC,GAclC,SAAS6B,EAAoBC,EAAcP,SACnCQ,ED5BkB,oBC4BUD,EAElC,iBACGF,UAAiBG,OAAYR,SAE3Bb,EAAUgB,EAAS,SAACM,EAAYrC,SAAW,CAC5CqC,SACOD,OAAYC,OAAeC,EAAYV,EAAO5B,WAK3D,OAAOe,EAAUiB,EAAc,SAACG,EAAMP,SAAU,CAC9CO,EACAD,EAAoBC,EAAMP,+BChCNW,KACbC,IAGHC,EASC1B,0IAAkB,SAAC2B,EAAsBC,GAC9C,IAAMC,EAeV,SAAwBD,GACtB,IAAMb,EAASN,EAAamB,EAAMf,MAAOD,GACnCI,EAAUb,OAAOE,QAAQtB,EAAY6C,IAE3C,OAAOpB,EAAcO,EAAQ,SAACK,EAAMP,GAClC,IAAMQ,EF5CkB,oBE4C8BD,EAEtD,OACE,CAACC,EAASR,WAEPG,EAAQc,IAAiC,kBAAoB,CAC3DT,YACHE,EAAYV,cA3BJkB,CAAeH,GAE3B,OAAID,EAAqBK,WAAW,UAC3B,CACLL,EACA,CACE,QAASE,IAIN,CAACF,EAAsBE,KAlBlC,OAAOI,EAAO,aAEZC,IAFeA,SAEPR,KC6BZ,IAAMS,EAAa,CACjB,SAAU,MACV,YAAa,SACb,UAAW,OACX,WAAY,SA2Dd,SAASC,EACPC,EACAC,EACAC,GAEA,gBAFAA,IAAAA,EAAS,IAEF,EJaoBzC,EIbNuC,EJcdvC,EACJ0C,uBAAQ,oDAAkD,SAC1DC,eIhBiCH,EAAWC,GAC5CG,OAAOC,SACPC,KAAK,SJWmB9C,EK5H7B,IAAM+C,EAAgB,CACpBC,QAAS,QACTC,MAAO,EACPC,OAAQ,EACRC,QAAS,MAGLC,EAAkB,SAACC,GACvB,IAAMC,GAAUC,EAAYF,GAE5B,MAAO,CACL,YAAaG,EAAGH,EAAMI,UACtB,cAAeD,EAAGH,EAAMK,YAOxB,iBACKX,GACHY,UAAWH,EAAGF,KAEhB,gBACKP,GACHa,aAAcJ,EAAGF,OAKjBO,EAAmB1B,EAAO,aAO9B2B,IAPiCA,mBACP5D,EAAU6D,EAAiB,SAACN,EAAUJ,SAAU,gBACzDI,EACfL,EAAgBC,OAOd,yBAA0B,CACxB,YAAa,CACXF,QAAS,QAEX,WAAY,CACVA,QAAS,WAIf,CACEa,SAAU,CAAC,2BC1BDC,eACdnC,MAAAA,aAAQ,CAAE,QAASoC,SACnB1E,QAAAA,aAAU,iBNW+B2E,GAKzC,IAJA,IAAMC,EAAeD,EAAS,SACxBE,EAAoB,IAAIC,IAAIjE,OAAOkE,KAAKH,EAAarD,QACrDyD,EAAqB,IAAIF,IAAIjE,OAAOkE,KAAKH,EAAajF,eAEhCkB,OAAOE,QAAQ4D,kBAAW,CAAjD,WAAO7C,OAAMQ,OACV2C,EAAY,IAAIH,IAAIjE,OAAOkE,KAAKzC,EAAMf,QACtC2D,EAAa,IAAIJ,IAAIjE,OAAOkE,KAAKzC,EAAM3C,SAE7C,IAAKM,EAAUgF,EAAWJ,GACxB,UAAUM,mBAAmBrD,uDAEdsD,KAAKC,UAAUhF,MAAMC,KAAKuE,cACxCO,KAAKC,UAAUhF,MAAMC,KAAK2E,KAG7B,IAAKhF,EAAUiF,EAAYF,GACzB,UAAUG,mBAAmBrD,wDAEdsD,KAAKC,UAAUhF,MAAMC,KAAK0E,cACxCI,KAAKC,UAAUhF,MAAMC,KAAK4E,MM7B/BI,CAA2BhD,GAE3B,IAAMsC,EAAetC,EAAM,SACrBZ,EAAUjC,EAAYmF,GACtBhD,EAAU7B,EAAkBC,GAElC,UACEsC,MAAO,CACLiD,QAAS,CACPC,QAASxB,EAAG,GACZyB,QAASzB,EAAGY,EAAac,WAAWF,SACpCG,QAAS3B,EAAGY,EAAac,WAAWD,SACpCG,QAAS5B,EAAGY,EAAac,WAAWC,SACpCE,QAAS7B,EAAGY,EAAac,WAAWE,UAEtCnE,UAEEqE,MAAO,OAGPC,MAAO,OAEPC,YAAa,cACbC,QAAS,gBACNzE,EAAuBxB,EAAS4E,EAAarD,MAAOG,IAEzDwE,iBACK1E,EACDxB,EACAU,EAAUkE,EAAauB,OAAQ,SAACC,EAAGC,SAAM,CAACD,EAAGC,EAAE9E,SAC/CG,IAGJ4E,QAAS5F,EAAU6F,EAAS,SAACzE,EAAM0E,SAAU,CAAC1E,EAAMkC,EAAGwC,MACvD/C,SACEgD,KAAM,OACNC,OAAQ,QACRC,KAAM,QAKHtG,MAAMC,KAAK,CAAEsG,OPzEE,IOyEoB,SAACC,EAAGC,UAAMA,EAAI,IAAGC,OACrD,SAACC,EAAQF,qBACJE,sBACUF,GAAM9C,EAAGiD,EAAcH,EAAII,GAAeJ,EAAI,SAE7D,IAMCzG,MAAMC,KAAK,CAAEsG,OAAQO,IAAkB,SAACN,EAAGC,UAAMA,EAAI,IAAGC,OACzD,SAACC,EAAQF,qBACJE,UACCF,EAAAA,OAAwBA,EPvFd,GOuFgC,aAEhD,KAGJM,IAAK,CACHC,MAAOrD,EAAGkD,IAEZI,aAAc5G,EAAU6G,EAAe,SAACzF,EAAMtB,SAAU,CACtDsB,EACAkC,EAAGxD,MAELgH,2BACG5F,GAAU,qBNjFjB5B,GAEA,OAAQA,GACN,IAAK,KAIH,MAAO,GAGT,IAAK,KACL,IAAK,KACH,MAAO,CAAEwE,SAAU,KMyElBiD,CAAiBzH,IAEpB0H,YAAa,CAGXxD,YAAY,GAEdyD,SACEtD,EACAnC,EAAuBI,WAEpBzB,OAAOE,QAAQuB,GAAOE,IAAI,gBAAEH,OAAsBC,uBFvGzDsF,EACAlG,EACAW,GAEA,IAAMwF,WAoDND,EACAjI,GAEA,IAAM+B,EAAUb,OAAOE,QAAQpB,GACzBmI,EAAajH,OAAOE,QAAQ8B,GAKlC,OAAO3B,EAAc0G,EAAW,SAAC9F,EAAML,UACrCqG,EAAW9G,QAAQ,gBAAEgC,OAAW+E,OACxBC,EAAmB,SAACvG,GACxB,IAAMoC,EAAQoE,EAASjF,EAATiF,CAAoBxG,GAElC,KAAM,oBAAqBoC,GACzB,UAAUsB,mDACqCrD,MAAQkB,MAAa+E,GAMtE,OAAOlE,EAAMqE,iBAGf,OAGE,CAACpF,EAAkBhB,EAAMiG,GAAYC,EAAiBvG,YAInDC,EAAQc,IAA8B,gBAAc7C,aAAY,CACjEmD,EAAkBhB,EAAMiG,QACxBC,EAAiBG,EAAsBxI,EAAtBwI,CAA8B1G,YAtFrC2G,CAAaR,EAAWlG,GAEpC2G,EAAa3H,EAAUmH,EAAW,SAAC/F,SAAS,QACzCA,EACP,CAAEoG,2CAAqCpG,UAGzC,OAAOa,EAAO,gBJ4Cd/B,MI5CiBgC,IAAAA,QAAS0B,IAAAA,aAClB/B,GJ2CR3B,EI3CiC,SAACkB,SAfjB,uBAe0CA,GJ6CpDjB,OAAOC,YACZD,OAAOE,QI9Ca8G,GJ8CGrF,IAAI,gBAAOhC,aAAW,CAACI,QAAeJ,OI7CzD6B,EAAqBK,WAAW,UAElCE,UACGP,GAAuB,CACtB,QAASE,OAKbK,UACGP,GAAuBE,MAK5B+B,EAAa+D,EAAY,CACvB7D,SAAU,CAAC,kBE2ET8D,CACEhG,EAAMiG,cACN9I,EAAY6C,GACZD,QAOGmG,IAAAA,EAAyB/D,EAAqB"}
+{"version":3,"file":"index.module.js","sources":["../src/foundation.ts","../src/util.ts","../src/colors/utils.ts","../src/colors/toTailwindConfig.ts","../src/colors/plugin.ts","../src/gradient/plugin.ts","../src/typography/plugin.ts","../src/index.ts"],"sourcesContent":["import { Effect } from '@charcoal-ui/foundation'\nimport { CharcoalTheme as Theme } from '@charcoal-ui/theme'\n\nexport const GRID_COUNT = 12\n\nexport function mergeEffect({\n  elementEffect,\n  effect,\n}: Pick<Theme, 'elementEffect' | 'effect'>): MergedEffect {\n  return {\n    ...elementEffect,\n    ...effect,\n    outline: {\n      type: 'opacity',\n      opacity: 0.32,\n    } as Effect,\n  }\n}\n\nexport type MergedEffect = Record<string, Effect>\n","import { TailwindConfig } from 'tailwindcss/tailwind-config'\nimport { TailwindVersion, ThemeMap } from './types'\n\n/**\n * the key \"default\" or \"DEFAULT\" has special meaning and dropped from class name\n *\n * @see https://tailwindcss.com/docs/upgrading-to-v2#update-default-theme-keys-to-default\n */\nexport function getDefaultKeyName(version: TailwindVersion) {\n  switch (version) {\n    case 'v3':\n    case 'v2': {\n      return 'DEFAULT'\n    }\n\n    case 'v1': {\n      return 'default'\n    }\n  }\n}\n\nexport function getVariantOption(\n  version: TailwindVersion\n): Partial<TailwindConfig> {\n  switch (version) {\n    case 'v3': {\n      // v3 以上では variants は variantOrders に改名された\n      // そしてこれは上書きをしたいモチベがない\n      // https://v2.tailwindcss.com/docs/configuration#variant-order\n      return {}\n    }\n\n    case 'v2':\n    case 'v1': {\n      return { variants: {} }\n    }\n  }\n}\n\nfunction setEquals<T>(a: Set<T>, b: Set<T>) {\n  return a.size === b.size && Array.from(a).every((value) => b.has(value))\n}\n\nexport function assertAllThemeHaveSameKeys(themeMap: ThemeMap): void {\n  const defaultTheme = themeMap[':root']\n  const expectedColorKeys = new Set(Object.keys(defaultTheme.color))\n  const expectedEffectKeys = new Set(Object.keys(defaultTheme.effect))\n\n  for (const [name, theme] of Object.entries(themeMap)) {\n    const colorKeys = new Set(Object.keys(theme.color))\n    const effectKeys = new Set(Object.keys(theme.effect))\n\n    if (!setEquals(colorKeys, expectedColorKeys)) {\n      throw new Error(`:root and ${name} does not have same colors.\n\nExpected( :root ): ${JSON.stringify(Array.from(expectedColorKeys))}\nGot: ${JSON.stringify(Array.from(colorKeys))}`)\n    }\n\n    if (!setEquals(effectKeys, expectedEffectKeys)) {\n      throw new Error(`:root and ${name} does not have same effects.\n\nExpected( :root ): ${JSON.stringify(Array.from(expectedEffectKeys))}\nGot: ${JSON.stringify(Array.from(effectKeys))}`)\n    }\n  }\n}\n\n/**\n * @example\n * ```js\n * mapKeys({ a: 'aa', b: 'bb' }, (key) => key.toUpperCase()) // => { A: \"aa\", B: \"bb\" }\n * ````\n */\nexport function mapKeys<V, K extends string>(\n  object: Record<string, V>,\n  callback: (key: string) => K\n) {\n  return Object.fromEntries(\n    Object.entries(object).map(([key, value]) => [callback(key), value])\n  ) as Record<K, V>\n}\n\n/**\n * @example\n * ```js\n * mapObject({ a: 'aa', b: 'bb', c: 'cc' }, (key, value) =>\n *   key === 'b' ? undefined : [key + '1', value.toUpperCase()]\n * ) // => { a1: \"AA\", c1: \"CC\" }\n * ```\n */\nexport function mapObject<\n  SourceKey extends string,\n  SourceValue,\n  DestKey extends string,\n  DestValue\n>(\n  source: Record<SourceKey, SourceValue>,\n  callback: (\n    key: SourceKey,\n    value: SourceValue\n  ) => [DestKey, DestValue] | null | undefined\n) {\n  return Object.fromEntries(\n    Object.entries(source).flatMap(([key, value]) => {\n      const entry = callback(key as SourceKey, value as SourceValue)\n      if (entry) {\n        return [entry]\n      } else {\n        return []\n      }\n    })\n  ) as Record<DestKey, DestValue>\n}\n\n/**\n * @example\n * ```js\n * flatMapObject({ a: 'aa', b: 'bb' }, (key, value) => [\n *   [key + '1', value + '1'],\n *   [key + '2', value + '2'],\n * ]) // => { a1: \"aa1\", a2: \"aa2\", b1: \"bb1\", b2: \"bb2\" }\n * ```\n */\nexport function flatMapObject<\n  SourceKey extends string,\n  SourceValue,\n  DestKey extends string,\n  DestValue\n>(\n  source: Record<SourceKey, SourceValue>,\n  callback: (key: SourceKey, value: SourceValue) => [DestKey, DestValue][]\n) {\n  return Object.fromEntries(\n    Object.entries(source).flatMap(([key, value]) => {\n      return callback(key as SourceKey, value as SourceValue)\n    })\n  ) as Record<DestKey, DestValue>\n}\n\n/**\n * @example\n * ```ts\n * filterObject(\n *   { a: 'aa', b: 'bb', c: 'cc' },\n *   (value): value is string => value !== 'bb'\n * ) // => { a: \"aa\", c: \"cc\" }\n * ```\n */\nexport function filterObject<Source, Dest extends Source>(\n  source: Record<string, Source>,\n  fn: (value: Source) => value is Dest\n) {\n  return mapObject(source, (key, value) => {\n    if (fn(value) === true) {\n      return [key, value]\n    } else {\n      return null\n    }\n  }) as Record<string, Dest>\n}\n\nexport function camelToKebab(value: string) {\n  return value\n    .replace(/(?<small>[\\da-z]|(?=[A-Z]))(?<capital>[A-Z])/gu, '$1-$2')\n    .toLowerCase()\n}\n","import { GradientMaterial, Material } from '@charcoal-ui/foundation'\n\nexport const COLOR_PREFIX = '--tailwind-color-'\n\nexport function isSingleColor(color: AnyColor): color is Material {\n  return typeof color === 'string'\n}\n\ntype AnyColor = Material | GradientMaterial\n\nexport type AnyColorTheme = Record<string, AnyColor>\n","import { Material } from '@charcoal-ui/foundation'\nimport { applyEffect } from '@charcoal-ui/utils'\nimport { TailwindConfig } from 'tailwindcss/tailwind-config'\nimport { MergedEffect } from '../foundation'\n\nimport { TailwindVersion } from '../types'\nimport { filterObject, getDefaultKeyName, mapObject } from '../util'\nimport { AnyColorTheme, COLOR_PREFIX, isSingleColor } from './utils'\n\nexport function colorsToTailwindConfig(\n  version: TailwindVersion,\n  colors: AnyColorTheme,\n  effects: MergedEffect\n): TailwindConfig['theme']['colors'] {\n  const targetColors = filterObject(colors, isSingleColor)\n  const DEFAULT = getDefaultKeyName(version)\n\n  /**\n   * こういう感じのを吐き出す\n   *\n   * ```js\n   * {\n   *   DEFAULT: 'var(--tailwind-color-hoge1, #fff)',\n   *   hover: 'var(--tailwind-color-hoge1--hover, #eee)',\n   *   press: 'var(--tailwind-color-hoge1--press, #ddd)',\n   *   disabled: 'var(--tailwind-color-hoge1--disabled, #eee)',\n   * }\n   * ```\n   */\n  function colorsForAllEffects(name: string, color: Material) {\n    const varName = `${COLOR_PREFIX}${name}`\n\n    return {\n      [DEFAULT]: `var(${varName}, ${color})`,\n\n      ...mapObject(effects, (effectName, effect) => [\n        effectName,\n        `var(${varName}--${effectName}, ${applyEffect(color, effect)})`,\n      ]),\n    }\n  }\n\n  return mapObject(targetColors, (name, color) => [\n    name,\n    colorsForAllEffects(name, color),\n  ])\n}\n","import { Material } from '@charcoal-ui/foundation'\nimport { CharcoalTheme as Theme } from '@charcoal-ui/theme'\nimport { applyEffect } from '@charcoal-ui/utils'\nimport plugin, { TailwindPlugin } from 'tailwindcss/plugin'\nimport { mergeEffect } from '../foundation'\nimport { CSSVariableName, CSSVariables, Definition, ThemeMap } from '../types'\nimport { filterObject, flatMapObject, mapObject } from '../util'\nimport { COLOR_PREFIX, isSingleColor } from './utils'\n\n/**\n * `:root` 以外のケースで各 CSS Variable がどういう値を取るかを定義する\n */\nexport default function cssVariableColorPlugin({\n  ':root': _defaultTheme,\n  ...themes\n}: ThemeMap): TailwindPlugin {\n  const definitions = defineCssVariables(themes)\n\n  return plugin(({ addBase }) => {\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n    addBase(definitions)\n  })\n}\n\nexport function defineCssVariables(themes: Omit<ThemeMap, ':root'>) {\n  return mapObject(themes, (selectorOrMediaQuery, theme) => {\n    const css = toCssVariables(theme)\n\n    if (selectorOrMediaQuery.startsWith('@media')) {\n      return [\n        selectorOrMediaQuery,\n        {\n          ':root': css,\n        },\n      ]\n    } else {\n      return [selectorOrMediaQuery, css]\n    }\n  }) as Definition\n}\n\nfunction toCssVariables(theme: Theme): CSSVariables {\n  const colors = filterObject(theme.color, isSingleColor)\n  const effects = Object.entries(mergeEffect(theme))\n\n  return flatMapObject(colors, (name, color) => {\n    const varName: keyof CSSVariables = `${COLOR_PREFIX}${name}`\n\n    return [\n      [varName, color],\n\n      ...effects.map<[CSSVariableName, Material]>(([type, effect]) => [\n        `${varName}--${type}`,\n        applyEffect(color, effect),\n      ]),\n    ]\n  })\n}\n","import plugin from 'tailwindcss/plugin'\nimport { camelToKebab, flatMapObject, mapKeys, mapObject } from '../util'\nimport { GradientMaterial } from '@charcoal-ui/foundation'\nimport { ThemeColorGradient } from '@charcoal-ui/theme'\nimport {\n  applyEffectToGradient,\n  gradient,\n  GradientDirection,\n} from '@charcoal-ui/utils'\nimport { Values } from '../types'\nimport { MergedEffect } from '../foundation'\n\nconst VAR_PREFIX = '--tailwind-gradient-'\n\nexport default function cssVariableColorPlugin(\n  gradients: ThemeColorGradient,\n  effects: MergedEffect,\n  selectorOrMediaQuery: string\n) {\n  const utilities = getUtilities(gradients, effects)\n\n  const classRules = mapObject(utilities, (name) => [\n    `.bg-${name}`,\n    { backgroundImage: `var(${VAR_PREFIX}${name})` },\n  ])\n\n  return plugin(({ addBase, addUtilities }) => {\n    const css = mapKeys(utilities, (name) => `${VAR_PREFIX}${name}`)\n    if (selectorOrMediaQuery.startsWith('@media')) {\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n      addBase({\n        [selectorOrMediaQuery]: {\n          ':root': css,\n        },\n      })\n    } else {\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n      addBase({\n        [selectorOrMediaQuery]: css,\n      })\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n    addUtilities(classRules, {\n      variants: ['responsive'],\n    })\n  })\n}\n\nconst DIRECTIONS = {\n  'to top': 'top',\n  'to bottom': 'bottom',\n  'to left': 'left',\n  'to right': 'right',\n} as const\n\n/**\n * こういう感じのやつ。この時点では `--tailwind-gradient-` のような CSS 変数名になってない\n *\n * ```js\n * {\n *   'hoge1': 'linear-gradient(to top, ...)',\n *   ...\n * }\n * ```\n */\ntype Utilities = Record<string, LinearGradient>\n\ntype LinearGradient = `linear-gradient(${string})`\n\nexport function getUtilities(\n  gradients: Record<string, GradientMaterial>,\n  effect: MergedEffect\n): Utilities {\n  const effects = Object.entries(effect)\n  const directions = Object.entries(DIRECTIONS) as [\n    GradientDirection,\n    Values<typeof DIRECTIONS>\n  ][]\n\n  return flatMapObject(gradients, (name, colors) =>\n    directions.flatMap(([direction, className]) => {\n      const toLinearGradient = (colors: GradientMaterial) => {\n        const style = gradient(direction)(colors)\n\n        if (!('backgroundImage' in style)) {\n          throw new Error(\n            `Could not generate linear-gradient() from ${name} ${direction} ${className}`\n          )\n        }\n\n        // 本当は backgroundColor も同時に生成されるんだけど、使うにはそれ用の CSS 変数も一緒に作らないといけない\n        // とりあえず background-image だけで動くのでこっちだけを利用する\n        return style.backgroundImage as LinearGradient\n      }\n\n      return [\n        // こういう感じのやつ\n        // { 'hoge1': 'linear-gradienr(to top, ...)' }\n        [createUtilityName(name, className), toLinearGradient(colors)],\n\n        // こういう感じのやつ\n        // { 'hoge1--hover': 'linear-gradienr(to top, ...)' }\n        ...effects.map<[string, LinearGradient]>(([effectName, effect]) => [\n          createUtilityName(name, className, effectName),\n          toLinearGradient(applyEffectToGradient(effect)(colors)),\n        ]),\n      ]\n    })\n  )\n}\n\nfunction createUtilityName(\n  gradientName: string,\n  direction: Values<typeof DIRECTIONS>,\n  suffix = ''\n) {\n  return [camelToKebab(gradientName), direction, suffix]\n    .filter(Boolean)\n    .join('-')\n}\n","import plugin from 'tailwindcss/plugin'\nimport { TypographyDescriptor, TYPOGRAPHY_SIZE } from '@charcoal-ui/foundation'\nimport { halfLeading } from '@charcoal-ui/utils'\nimport { px } from '@charcoal-ui/utils'\nimport { mapObject } from '../util'\n\nconst leadingCancel = {\n  display: 'block',\n  width: 0,\n  height: 0,\n  content: '\"\"',\n}\n\nconst typographyStyle = (style: TypographyDescriptor) => {\n  const margin = -halfLeading(style)\n\n  return {\n    'font-size': px(style.fontSize),\n    'line-height': px(style.lineHeight),\n\n    /**\n     * cancel leading\n     *\n     * @see https://yuyakinoshita.com/blog/2020/01/20/line-height-crop/\n     */\n    '&::before': {\n      ...leadingCancel,\n      marginTop: px(margin),\n    },\n    '&::after': {\n      ...leadingCancel,\n      marginBottom: px(margin),\n    },\n  }\n}\n\nconst typographyPlugin = plugin(({ addUtilities }) => {\n  const typographyClasses = mapObject(TYPOGRAPHY_SIZE, (fontSize, style) => [\n    `.typography-${fontSize}`,\n    typographyStyle(style),\n  ])\n\n  // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n  addUtilities(\n    {\n      ...typographyClasses,\n      '.preserve-half-leading': {\n        '&::before': {\n          content: 'none',\n        },\n        '&::after': {\n          content: 'none',\n        },\n      },\n    },\n    {\n      variants: ['responsive'],\n    }\n  )\n})\n\nexport default typographyPlugin\n","import { GRID_COUNT, mergeEffect } from './foundation'\n\nimport { TailwindConfig } from 'tailwindcss/tailwind-config'\nimport { TailwindVersion, ThemeMap } from './types'\n\nimport {\n  assertAllThemeHaveSameKeys,\n  getDefaultKeyName,\n  getVariantOption,\n  mapObject,\n} from './util'\nimport {\n  COLUMN_UNIT,\n  GUTTER_UNIT,\n  SPACING,\n  BORDER_RADIUS,\n} from '@charcoal-ui/foundation'\nimport { light } from '@charcoal-ui/theme'\nimport { px } from '@charcoal-ui/utils'\nimport { colorsToTailwindConfig } from './colors/toTailwindConfig'\n\nimport cssVariableColorPlugin from './colors/plugin'\nimport cssVariableGradientPlugin from './gradient/plugin'\nimport typographyPlugin from './typography/plugin'\n\ninterface Options {\n  version?: TailwindVersion\n  theme?: ThemeMap\n}\n\nexport function createTailwindConfig({\n  theme = { ':root': light },\n  version = 'v3',\n}: Options): TailwindConfig {\n  assertAllThemeHaveSameKeys(theme)\n\n  const defaultTheme = theme[':root']\n  const effects = mergeEffect(defaultTheme)\n  const DEFAULT = getDefaultKeyName(version)\n\n  return {\n    theme: {\n      screens: {\n        screen1: px(0),\n        screen2: px(defaultTheme.breakpoint.screen1),\n        screen3: px(defaultTheme.breakpoint.screen2),\n        screen4: px(defaultTheme.breakpoint.screen3),\n        screen5: px(defaultTheme.breakpoint.screen4),\n      },\n      colors: {\n        // @deprecated\n        black: '#000',\n\n        // @deprecated\n        white: '#fff',\n\n        transparent: 'transparent',\n        current: 'currentColor',\n        ...colorsToTailwindConfig(version, defaultTheme.color, effects),\n      },\n      borderColor: {\n        ...colorsToTailwindConfig(\n          version,\n          mapObject(defaultTheme.border, (k, v) => [k, v.color]),\n          effects\n        ),\n      },\n      spacing: mapObject(SPACING, (name, pixel) => [name, px(pixel)]),\n      width: {\n        full: '100%',\n        screen: '100vw',\n        auto: 'auto',\n\n        /**\n         * generates classes like \"w-col-span-1\"\n         */\n        ...Array.from({ length: GRID_COUNT }, (_, i) => i + 1).reduce(\n          (styles, i) => ({\n            ...styles,\n            [`col-span-${i}`]: px(COLUMN_UNIT * i + GUTTER_UNIT * (i - 1)),\n          }),\n          {}\n        ),\n\n        /**\n         * generates classes like \"w-1/12\" (except for 12/12, which just equals to w-full)\n         */\n        ...Array.from({ length: GRID_COUNT - 1 }, (_, i) => i + 1).reduce(\n          (styles, i) => ({\n            ...styles,\n            [`${i}/${GRID_COUNT}`]: `${(i / GRID_COUNT) * 100}%`,\n          }),\n          {}\n        ),\n      },\n      gap: {\n        fixed: px(GUTTER_UNIT),\n      },\n      borderRadius: mapObject(BORDER_RADIUS, (name, value) => [\n        name,\n        px(value),\n      ]),\n      transitionDuration: {\n        [DEFAULT]: '0.2s',\n      },\n    },\n\n    ...getVariantOption(version),\n\n    corePlugins: {\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-expect-error 配列にしろと言ってくるが、たぶん @types が間違っている\n      lineHeight: false,\n    },\n    plugins: [\n      typographyPlugin,\n      cssVariableColorPlugin(theme),\n\n      ...Object.entries(theme).map(([selectorOrMediaQuery, theme]) =>\n        cssVariableGradientPlugin(\n          theme.gradientColor,\n          mergeEffect(theme),\n          selectorOrMediaQuery\n        )\n      ),\n    ],\n  }\n}\n\nexport const config: TailwindConfig = createTailwindConfig({})\n"],"names":["mergeEffect","elementEffect","effect","outline","type","opacity","getDefaultKeyName","version","setEquals","a","b","size","Array","from","every","value","has","mapObject","source","callback","Object","fromEntries","entries","flatMap","entry","flatMapObject","filterObject","fn","key","isSingleColor","color","colorsToTailwindConfig","colors","effects","targetColors","DEFAULT","colorsForAllEffects","name","varName","effectName","applyEffect","cssVariableColorPlugin","_defaultTheme","definitions","selectorOrMediaQuery","theme","css","map","toCssVariables","startsWith","plugin","addBase","DIRECTIONS","createUtilityName","gradientName","direction","suffix","replace","toLowerCase","filter","Boolean","join","leadingCancel","display","width","height","content","typographyStyle","style","margin","halfLeading","px","fontSize","lineHeight","marginTop","marginBottom","typographyPlugin","addUtilities","TYPOGRAPHY_SIZE","variants","createTailwindConfig","light","themeMap","defaultTheme","expectedColorKeys","Set","keys","expectedEffectKeys","colorKeys","effectKeys","Error","JSON","stringify","assertAllThemeHaveSameKeys","screens","screen1","screen2","breakpoint","screen3","screen4","screen5","black","white","transparent","current","borderColor","border","k","v","spacing","SPACING","pixel","full","screen","auto","length","_","i","reduce","styles","COLUMN_UNIT","GUTTER_UNIT","GRID_COUNT","gap","fixed","borderRadius","BORDER_RADIUS","transitionDuration","getVariantOption","corePlugins","plugins","gradients","utilities","directions","className","toLinearGradient","gradient","backgroundImage","applyEffectToGradient","getUtilities","classRules","cssVariableGradientPlugin","gradientColor","config"],"mappings":"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"}

package/dist/util.d.ts

@@ -8,9 +8,41 @@ import { TailwindVersion, ThemeMap } from './types';
 export declare function getDefaultKeyName(version: TailwindVersion): "DEFAULT" | "default";
 export declare function getVariantOption(version: TailwindVersion): Partial<TailwindConfig>;
 export declare function assertAllThemeHaveSameKeys(themeMap: ThemeMap): void;
+/**
+ * @example
+ * ```js
+ * mapKeys({ a: 'aa', b: 'bb' }, (key) => key.toUpperCase()) // => { A: "aa", B: "bb" }
+ * ````
+ */
 export declare function mapKeys<V, K extends string>(object: Record<string, V>, callback: (key: string) => K): Record<K, V>;
+/**
+ * @example
+ * ```js
+ * mapObject({ a: 'aa', b: 'bb', c: 'cc' }, (key, value) =>
+ *   key === 'b' ? undefined : [key + '1', value.toUpperCase()]
+ * ) // => { a1: "AA", c1: "CC" }
+ * ```
+ */
 export declare function mapObject<SourceKey extends string, SourceValue, DestKey extends string, DestValue>(source: Record<SourceKey, SourceValue>, callback: (key: SourceKey, value: SourceValue) => [DestKey, DestValue] | null | undefined): Record<DestKey, DestValue>;
+/**
+ * @example
+ * ```js
+ * flatMapObject({ a: 'aa', b: 'bb' }, (key, value) => [
+ *   [key + '1', value + '1'],
+ *   [key + '2', value + '2'],
+ * ]) // => { a1: "aa1", a2: "aa2", b1: "bb1", b2: "bb2" }
+ * ```
+ */
 export declare function flatMapObject<SourceKey extends string, SourceValue, DestKey extends string, DestValue>(source: Record<SourceKey, SourceValue>, callback: (key: SourceKey, value: SourceValue) => [DestKey, DestValue][]): Record<DestKey, DestValue>;
+/**
+ * @example
+ * ```ts
+ * filterObject(
+ *   { a: 'aa', b: 'bb', c: 'cc' },
+ *   (value): value is string => value !== 'bb'
+ * ) // => { a: "aa", c: "cc" }
+ * ```
+ */
 export declare function filterObject<Source, Dest extends Source>(source: Record<string, Source>, fn: (value: Source) => value is Dest): Record<string, Dest>;
 export declare function camelToKebab(value: string): string;
 //# sourceMappingURL=util.d.ts.map

package/dist/util.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../src/util.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAEnD;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,eAAe,yBAWzD;AAED,wBAAgB,gBAAgB,CAC9B,OAAO,EAAE,eAAe,GACvB,OAAO,CAAC,cAAc,CAAC,CAczB;AAMD,wBAAgB,0BAA0B,CAAC,QAAQ,EAAE,QAAQ,GAAG,IAAI,CAuBnE;AAED,wBAAgB,OAAO,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,EACzC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,EACzB,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,CAAC,gBAK7B;AAED,wBAAgB,SAAS,CACvB,SAAS,SAAS,MAAM,EACxB,WAAW,EACX,OAAO,SAAS,MAAM,EACtB,SAAS,EAET,MAAM,EAAE,MAAM,CAAC,SAAS,EAAE,WAAW,CAAC,EACtC,QAAQ,EAAE,CACR,GAAG,EAAE,SAAS,EACd,KAAK,EAAE,WAAW,KACf,CAAC,OAAO,EAAE,SAAS,CAAC,GAAG,IAAI,GAAG,SAAS,8BAY7C;AAED,wBAAgB,aAAa,CAC3B,SAAS,SAAS,MAAM,EACxB,WAAW,EACX,OAAO,SAAS,MAAM,EACtB,SAAS,EAET,MAAM,EAAE,MAAM,CAAC,SAAS,EAAE,WAAW,CAAC,EACtC,QAAQ,EAAE,CAAC,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,WAAW,KAAK,CAAC,OAAO,EAAE,SAAS,CAAC,EAAE,8BAOzE;AAED,wBAAgB,YAAY,CAAC,MAAM,EAAE,IAAI,SAAS,MAAM,EACtD,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAC9B,EAAE,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,KAAK,IAAI,IAAI,wBASrC;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,UAIzC"}
+{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../src/util.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAEnD;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,eAAe,yBAWzD;AAED,wBAAgB,gBAAgB,CAC9B,OAAO,EAAE,eAAe,GACvB,OAAO,CAAC,cAAc,CAAC,CAczB;AAMD,wBAAgB,0BAA0B,CAAC,QAAQ,EAAE,QAAQ,GAAG,IAAI,CAuBnE;AAED;;;;;GAKG;AACH,wBAAgB,OAAO,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,EACzC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,EACzB,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,CAAC,gBAK7B;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,CACvB,SAAS,SAAS,MAAM,EACxB,WAAW,EACX,OAAO,SAAS,MAAM,EACtB,SAAS,EAET,MAAM,EAAE,MAAM,CAAC,SAAS,EAAE,WAAW,CAAC,EACtC,QAAQ,EAAE,CACR,GAAG,EAAE,SAAS,EACd,KAAK,EAAE,WAAW,KACf,CAAC,OAAO,EAAE,SAAS,CAAC,GAAG,IAAI,GAAG,SAAS,8BAY7C;AAED;;;;;;;;GAQG;AACH,wBAAgB,aAAa,CAC3B,SAAS,SAAS,MAAM,EACxB,WAAW,EACX,OAAO,SAAS,MAAM,EACtB,SAAS,EAET,MAAM,EAAE,MAAM,CAAC,SAAS,EAAE,WAAW,CAAC,EACtC,QAAQ,EAAE,CAAC,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,WAAW,KAAK,CAAC,OAAO,EAAE,SAAS,CAAC,EAAE,8BAOzE;AAED;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAAC,MAAM,EAAE,IAAI,SAAS,MAAM,EACtD,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAC9B,EAAE,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,KAAK,IAAI,IAAI,wBASrC;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,UAIzC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/tailwind-config",
-  "version": "1.0.1-alpha.1",
+  "version": "1.0.1-alpha.2",
   "license": "Apache-2.0",
   "type": "module",
   "source": "./src/index.ts",
@@ -21,13 +21,14 @@
     "microbundle": "^0.14.2",
     "postcss": "^8.4.5",
     "postcss-selector-parser": "^6.0.9",
+    "react": "^18.0.0",
     "rimraf": "^3.0.2",
     "tailwindcss": "^3.0.5",
     "typescript": "^4.5.5"
   },
   "dependencies": {
     "@charcoal-ui/foundation": "^1.0.1-alpha.0",
-    "@charcoal-ui/theme": "^2.0.0-alpha.1",
+    "@charcoal-ui/theme": "^2.0.0-alpha.2",
     "@charcoal-ui/utils": "^1.0.1-alpha.0"
   },
   "peerDependencies": {
@@ -47,5 +48,5 @@
     "url": "https://github.com/pixiv/charcoal.git",
     "directory": "packages/tailwind-config"
   },
-  "gitHead": "6740b50cd147f29b8da7c16e93c15b5799900d33"
+  "gitHead": "f68b0533a24b68f4726711fd2f5fb23be1ccba93"
 }

package/src/_lib/compat.ts

@@ -0,0 +1,12 @@
+import React from 'react'
+
+/**
+ * import { Story } from '@storybook/react/types-6-0'
+ *
+ * をするとstyled-componentsが壊れるので代替品を作った
+ *
+ * エラー:
+ * node_modules/@types/styled-components/ts3.7/index.d.ts
+ * `Type alias 'Interpolation' circularly references itself. ts(2456)`
+ */
+export type Story<P> = React.ComponentType<P> & { args?: P }

package/src/docs/borderRadius/BorderRadius.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import { borderRadius } from '.'
+
+export const BorderRadius: React.FC = () => {
+  return (
+    <div className="space-y-40">
+      {Object.entries(borderRadius).map(([key, value]) => (
+        <div key={key}>
+          <p className="typography-14 text-text2">rounded-{key}</p>
+          <div className="space-x-16 flex">
+            <div
+              className={`bg-surface4 rounded-${key} h-64`}
+              style={{ width: '64px' }}
+            ></div>
+            <div
+              className={`bg-surface4 rounded-${key} h-64`}
+              style={{ width: '272px' }}
+            ></div>
+          </div>
+          <p className="typography-12 text-text3">
+            border-radius: <span className="text-text2">{value}</span>
+          </p>
+        </div>
+      ))}
+    </div>
+  )
+}

package/src/docs/borderRadius/index.story.mdx

@@ -0,0 +1,10 @@
+import { Meta, Story } from '@storybook/addon-docs'
+import { BorderRadius } from '.'
+
+<Meta title="tailwind-config/BorderRadius" component={[BorderRadius]} />
+
+# Border radius
+
+<br />
+
+<BorderRadius />

package/src/docs/borderRadius/index.ts

@@ -0,0 +1,5 @@
+import { config } from '../../'
+
+export const borderRadius = config.theme.borderRadius ?? {}
+
+export { BorderRadius } from './BorderRadius'

package/src/docs/colors/Colors.tsx

@@ -0,0 +1,85 @@
+import React from 'react'
+import { EffectType } from '@charcoal-ui/theme'
+import { colors } from '.'
+
+const effectTypes: { [type in EffectType]: null } = {
+  hover: null,
+  press: null,
+  disabled: null,
+}
+
+const ColorBox: React.FC<{
+  bgColorClass: string
+  label: string
+  emphasizeLabelByDefault?: boolean
+}> = ({ bgColorClass, label, emphasizeLabelByDefault = false }) => (
+  <div className="group grow basis-0 space-y-8">
+    <p
+      className={`typography-14 ${
+        emphasizeLabelByDefault ? 'text-text2' : 'text-text3'
+      } group-hover:text-text2 transition-colors`}
+    >
+      {label}
+    </p>
+    <div className="relative h-64 w-full">
+      <div
+        /**
+         * Display checker pattern for visualizing colors with transparency
+         */
+        className="absolute top-0 right-0 h-full w-6/12"
+        aria-hidden="true"
+        style={{
+          backgroundImage:
+            'linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(135deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(135deg, transparent 75%, #ccc 75%)',
+          backgroundSize: '12px 12px',
+          backgroundPosition: '0 0, 6px 0, 6px -6px, 0 6px',
+        }}
+      ></div>
+      <button
+        type="button"
+        className={`absolute top-0 left-0 h-full w-full border border-r-0 group-last:border-r border-default cursor-pointer ${bgColorClass}`}
+        onClick={() => {
+          void navigator.clipboard.writeText(bgColorClass)
+        }}
+      >
+        <span className="opacity-0 group-hover:opacity-100 transition-opacity typography-14 text-text2">
+          Click to copy the class
+        </span>
+      </button>
+    </div>
+  </div>
+)
+
+export const Colors: React.FC = () => {
+  return (
+    <div className="space-y-24">
+      {Object.entries(colors).map(([colorName, values]) => (
+        <div className="flex" key={colorName}>
+          {typeof values === 'object' && 'DEFAULT' in values ? (
+            <>
+              <ColorBox
+                bgColorClass={`bg-${colorName}`}
+                label={colorName}
+                emphasizeLabelByDefault
+              />
+              {Object.keys(effectTypes).map((modifier) =>
+                modifier in values ? (
+                  <ColorBox
+                    bgColorClass={`bg-${colorName}-${modifier}`}
+                    label={`-${modifier}`}
+                  />
+                ) : null
+              )}
+            </>
+          ) : (
+            <ColorBox
+              bgColorClass={`bg-${colorName}`}
+              label={colorName}
+              emphasizeLabelByDefault
+            />
+          )}
+        </div>
+      ))}
+    </div>
+  )
+}

package/src/docs/colors/TextBgColor.story.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import type { Story } from '../../_lib/compat'
+
+import { colors } from '.'
+
+export default {
+  title: 'tailwind-config/Colors/Text bg color',
+  argTypes: {
+    textColorClass: {
+      control: {
+        type: 'select',
+        options: Object.keys(colors).map((color) => `text-${color}`),
+      },
+      defaultValue: 'text-text1',
+    },
+    bgColorClass: {
+      control: {
+        type: 'select',
+        options: Object.keys(colors).map((color) => `bg-${color}`),
+      },
+      defaultValue: 'bg-background1',
+    },
+  },
+}
+
+type Props = Readonly<{
+  textColorClass: string
+  bgColorClass: string
+}>
+
+export const Playground: Story<Props> = ({ textColorClass, bgColorClass }) => (
+  <div className={`${bgColorClass} p-64 max-w-2xl`}>
+    <p className={`typography-20 ${textColorClass}`}>
+      charcoal はピクシブ株式会社のデザインシステムです。ここでは特に、Web
+      フロントエンドの実装に用いる npm パッケージ集のことを言います。Lorem ipsum
+      dolor sit amet, consectetur adipiscing elit. Aliquam at odio bibendum nisl
+      mollis eleifend et quis turpis. Quisque dignissim porta justo ut
+      convallis.dipiscing elit.
+    </p>
+  </div>
+)

package/src/docs/colors/TextColors.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { colors } from '.'
+
+export const TextColors: React.FC = () => (
+  <div className="space-y-24">
+    {Object.keys(colors).map((colorName) => (
+      <div key={colorName}>
+        <p className="typography-14 text-text2 mb-4">text-{colorName}</p>
+        <div className={`relative z-0`}>
+          <div
+            className="absolute top-0 right-0 h-full w-6/12 bg-surface8 z-[-1]"
+            aria-hidden="true"
+          ></div>
+          <p className={`typography-20 text-${colorName}`}>
+            charcoal はピクシブ株式会社のデザインシステムです。ここでは特に、Web
+            フロントエンドの実装に用いる npm パッケージ集のことを言います。
+          </p>
+        </div>
+      </div>
+    ))}
+  </div>
+)

package/src/docs/colors/index.story.mdx

@@ -0,0 +1,27 @@
+import { Meta, Story } from '@storybook/addon-docs'
+import { Colors, TextColors } from '.'
+
+<Meta title="tailwind-config/Colors/Doc" component={[Colors, TextColors]} />
+
+# Colors
+
+<br />
+
+## Bg colors
+
+<br />
+
+<Story name="Colors">
+  <Colors />
+</Story>
+
+<br />
+<br />
+
+## Text colors
+
+<br />
+
+<Story name="Text colors">
+  <TextColors />
+</Story>

package/src/docs/colors/index.ts

@@ -0,0 +1,6 @@
+import { config } from '../../'
+
+export const colors = config.theme.colors ?? {}
+
+export { Colors } from './Colors'
+export { TextColors } from './TextColors'

package/src/docs/gradient/Gradients.tsx

@@ -0,0 +1,67 @@
+import React from 'react'
+import { utilityClasses, directions, effectTypes } from '.'
+import { getUniqueGradientNames } from './utils'
+
+const GradientBox: React.FC<{
+  gradientClassName: string
+  label: string
+  emphasizeLabelByDefault?: boolean
+}> = ({ gradientClassName, label, emphasizeLabelByDefault = false }) => (
+  <div className="group grow basis-0">
+    <p
+      className={`typography-14 ${
+        emphasizeLabelByDefault ? 'text-text2' : 'text-text3'
+      } group-hover:text-text2 transition-colors`}
+    >
+      {label}
+    </p>
+    <button
+      type="button"
+      className={`${gradientClassName} h-64 w-full border-none cursor-pointer`}
+      onClick={() => {
+        void navigator.clipboard.writeText(gradientClassName)
+      }}
+    >
+      <span className="opacity-0 group-hover:opacity-100 transition-opacity typography-14 text-text2">
+        Click to copy the class
+      </span>
+    </button>
+  </div>
+)
+
+export const Gradients: React.FC = () => {
+  const utilityClassNames = Object.keys(utilityClasses)
+  const uniqueGradientNames = getUniqueGradientNames(utilityClassNames)
+
+  return (
+    <div className="space-y-64">
+      {uniqueGradientNames.map((gradientName) => (
+        <div className="space-y-24" key={gradientName}>
+          {directions.map((direction) => (
+            <div className="flex" key={direction}>
+              {utilityClassNames.includes(`${gradientName}-${direction}`) && (
+                <GradientBox
+                  gradientClassName={`${gradientName}-${direction}`}
+                  label={`${gradientName}-${direction}`}
+                  emphasizeLabelByDefault
+                />
+              )}
+              {Object.keys(effectTypes).map(
+                (effectType) =>
+                  utilityClassNames.includes(
+                    `${gradientName}-${direction}-${effectType}`
+                  ) && (
+                    <GradientBox
+                      gradientClassName={`${gradientName}-${direction}-${effectType}`}
+                      label={`-${effectType}`}
+                      key={effectType}
+                    />
+                  )
+              )}
+            </div>
+          ))}
+        </div>
+      ))}
+    </div>
+  )
+}

package/src/docs/gradient/index.story.mdx

@@ -0,0 +1,12 @@
+import { Meta, Story } from '@storybook/addon-docs'
+import { Gradients } from '.'
+
+<Meta title="tailwind-config/Gradients" component={[Gradients]} />
+
+# Gradients
+
+<br />
+
+<Story name="Gradients">
+  <Gradients />
+</Story>

package/src/docs/gradient/index.ts

@@ -0,0 +1,26 @@
+import { EffectType } from '@charcoal-ui/theme'
+import { config } from '../../'
+import { TailwindPlugin, getUtilities } from '../'
+
+export { Gradients } from './Gradients'
+
+/**
+ * TODO:
+ * Seek for some better way to find the plugin we need here
+ * from `config.plugins` array
+ */
+const gradientPlugin: TailwindPlugin = config.plugins
+  ? (config.plugins[2] as unknown as TailwindPlugin)
+  : { handler: () => void {} }
+
+export const utilityClasses = getUtilities(gradientPlugin)
+
+export const directions = ['top', 'bottom', 'right', 'left'] as const
+export type Direction = typeof directions[number]
+
+export type { EffectType }
+export const effectTypes: { [type in EffectType]: null } = {
+  hover: null,
+  press: null,
+  disabled: null,
+}

package/src/docs/gradient/utils.ts

@@ -0,0 +1,37 @@
+import { directions } from '.'
+
+export const getUniqueGradientNames = (utilityClasses: string[]): string[] => {
+  return Array.from(
+    new Set(
+      utilityClasses
+        .map((className) => {
+          /**
+           * like `['bg', 'surface5', 'bottom', 'disabled']`
+           */
+          const classNameParts = className.split('-')
+
+          /**
+           * like `bottom`
+           */
+          const directionInClassName = directions.find((direction) =>
+            classNameParts.includes(direction)
+          )
+          if (!directionInClassName) return null
+
+          /**
+           * like `['bg', 'surface5']`
+           */
+          const classNameWithoutModifiers = classNameParts.slice(
+            0,
+            classNameParts.indexOf(directionInClassName)
+          )
+
+          /**
+           * like `bg-surface5`
+           */
+          return classNameWithoutModifiers.join('-')
+        })
+        .filter((value): value is string => typeof value === 'string')
+    ).values()
+  )
+}

package/src/docs/index.ts

@@ -0,0 +1,34 @@
+import { mapObject } from '../util'
+
+export type TailwindPlugin = {
+  handler: ({
+    addBase,
+    addUtilities,
+  }: {
+    addBase: unknown
+    addUtilities: unknown
+  }) => void
+}
+
+export type UtilityClasses = Record<string, Record<string, unknown>>
+
+export const getUtilities = (plugin: TailwindPlugin) => {
+  let utilities: UtilityClasses = {}
+
+  plugin.handler({
+    addBase: () => {
+      /**
+       * We don't need these base styles as they gonna be
+       * applied to the `:root` element by Tailwind automatically
+       */
+    },
+    addUtilities: (args: UtilityClasses) => {
+      utilities = { ...utilities, ...args }
+    },
+  })
+
+  return mapObject(utilities, (key, value) => [
+    key.startsWith('.') ? key.slice(1) : key,
+    value,
+  ])
+}