@charcoal-ui/tailwind-config 3.10.1 → 3.12.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/_lib/TailwindBuild.d.ts +1 -1
- package/dist/_lib/TailwindBuild.d.ts.map +1 -1
- package/dist/_lib/compat.d.ts +1 -1
- package/dist/_lib/compat.d.ts.map +1 -1
- package/dist/colors/toTailwindConfig.d.ts +1 -1
- package/dist/colors/toTailwindConfig.d.ts.map +1 -1
- package/dist/index.cjs.js +16 -17
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.esm.js +1 -2
- package/dist/index.esm.js.map +1 -1
- package/dist/typography/plugin.d.ts.map +1 -1
- package/dist/util.d.ts +1 -1
- package/dist/util.d.ts.map +1 -1
- package/package.json +5 -5
- package/src/_lib/TailwindBuild.ts +1 -1
- package/src/_lib/compat.ts +1 -1
- package/src/colors/toTailwindConfig.ts +1 -1
- package/src/index.ts +1 -1
- package/src/typography/plugin.ts +1 -2
- package/src/util.ts +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TailwindBuild.d.ts","sourceRoot":"","sources":["../../src/_lib/TailwindBuild.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;
|
|
1
|
+
{"version":3,"file":"TailwindBuild.d.ts","sourceRoot":"","sources":["../../src/_lib/TailwindBuild.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAIjE;;;;GAIG;AACH,qBAAa,aAAa;IAGJ,OAAO,CAAC,MAAM;IAFlC,OAAO,CAAC,QAAQ,CAAC,SAAS,CAA0B;IAEpD,OAAO;WAgCM,GAAG,CAAC,MAAM,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM;IA6BpD,IAAI,GAAG,WAEN;IAED,IAAI,UAAU,aAEb;IAED,oBAAoB,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,SAAS;IAI7D,eAAe;IAaf,cAAc,CAAC,OAAO,EAAE,KAAK,MAAM,EAAE;CAWtC"}
|
package/dist/_lib/compat.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"compat.d.ts","sourceRoot":"","sources":["../../src/_lib/compat.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"compat.d.ts","sourceRoot":"","sources":["../../src/_lib/compat.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAA;AAEnC;;;;;;;;GAQG;AACH,MAAM,MAAM,KAAK,CAAC,CAAC,IAAI,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,GAAG;IAAE,IAAI,CAAC,EAAE,CAAC,CAAA;CAAE,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toTailwindConfig.d.ts","sourceRoot":"","sources":["../../src/colors/toTailwindConfig.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;
|
|
1
|
+
{"version":3,"file":"toTailwindConfig.d.ts","sourceRoot":"","sources":["../../src/colors/toTailwindConfig.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAE5C,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAG1C,OAAO,EAAE,aAAa,EAA+B,MAAM,SAAS,CAAA;AAEpE,wBAAgB,sBAAsB,CACpC,OAAO,EAAE,eAAe,EACxB,MAAM,EAAE,aAAa,EACrB,OAAO,EAAE,YAAY,GACpB,cAAc,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,CAiCnC"}
|
package/dist/index.cjs.js
CHANGED
|
@@ -101,7 +101,7 @@ function camelToKebab(value) {
|
|
|
101
101
|
// src/index.ts
|
|
102
102
|
var import_foundation4 = require("@charcoal-ui/foundation");
|
|
103
103
|
var import_theme = require("@charcoal-ui/theme");
|
|
104
|
-
var
|
|
104
|
+
var import_utils7 = require("@charcoal-ui/utils");
|
|
105
105
|
|
|
106
106
|
// src/colors/toTailwindConfig.ts
|
|
107
107
|
var import_utils = require("@charcoal-ui/utils");
|
|
@@ -241,7 +241,6 @@ function createUtilityName(gradientName, direction, suffix = "") {
|
|
|
241
241
|
var import_plugin3 = __toESM(require("tailwindcss/plugin"));
|
|
242
242
|
var import_foundation2 = require("@charcoal-ui/foundation");
|
|
243
243
|
var import_utils6 = require("@charcoal-ui/utils");
|
|
244
|
-
var import_utils7 = require("@charcoal-ui/utils");
|
|
245
244
|
var leadingCancel = {
|
|
246
245
|
display: "block",
|
|
247
246
|
width: 0,
|
|
@@ -251,15 +250,15 @@ var leadingCancel = {
|
|
|
251
250
|
var typographyStyle = (style) => {
|
|
252
251
|
const margin = -(0, import_utils6.halfLeading)(style);
|
|
253
252
|
return {
|
|
254
|
-
"font-size": (0,
|
|
255
|
-
"line-height": (0,
|
|
253
|
+
"font-size": (0, import_utils6.px)(style.fontSize),
|
|
254
|
+
"line-height": (0, import_utils6.px)(style.lineHeight),
|
|
256
255
|
"&::before": {
|
|
257
256
|
...leadingCancel,
|
|
258
|
-
marginTop: (0,
|
|
257
|
+
marginTop: (0, import_utils6.px)(margin)
|
|
259
258
|
},
|
|
260
259
|
"&::after": {
|
|
261
260
|
...leadingCancel,
|
|
262
|
-
marginBottom: (0,
|
|
261
|
+
marginBottom: (0, import_utils6.px)(margin)
|
|
263
262
|
}
|
|
264
263
|
};
|
|
265
264
|
};
|
|
@@ -299,11 +298,11 @@ function createTailwindConfig({
|
|
|
299
298
|
return {
|
|
300
299
|
theme: {
|
|
301
300
|
screens: {
|
|
302
|
-
screen1: (0,
|
|
303
|
-
screen2: (0,
|
|
304
|
-
screen3: (0,
|
|
305
|
-
screen4: (0,
|
|
306
|
-
screen5: (0,
|
|
301
|
+
screen1: (0, import_utils7.px)(0),
|
|
302
|
+
screen2: (0, import_utils7.px)(defaultTheme.breakpoint.screen1),
|
|
303
|
+
screen3: (0, import_utils7.px)(defaultTheme.breakpoint.screen2),
|
|
304
|
+
screen4: (0, import_utils7.px)(defaultTheme.breakpoint.screen3),
|
|
305
|
+
screen5: (0, import_utils7.px)(defaultTheme.breakpoint.screen4)
|
|
307
306
|
},
|
|
308
307
|
colors: {
|
|
309
308
|
black: "#000",
|
|
@@ -315,11 +314,11 @@ function createTailwindConfig({
|
|
|
315
314
|
borderColor: {
|
|
316
315
|
...colorsToTailwindConfig(
|
|
317
316
|
version,
|
|
318
|
-
(0,
|
|
317
|
+
(0, import_utils7.mapObject)(defaultTheme.border, (k, v) => [k, v.color]),
|
|
319
318
|
effects
|
|
320
319
|
)
|
|
321
320
|
},
|
|
322
|
-
spacing: (0,
|
|
321
|
+
spacing: (0, import_utils7.mapObject)(import_foundation4.SPACING, (name, pixel) => [name, (0, import_utils7.px)(pixel)]),
|
|
323
322
|
width: {
|
|
324
323
|
full: "100%",
|
|
325
324
|
screen: "100vw",
|
|
@@ -328,7 +327,7 @@ function createTailwindConfig({
|
|
|
328
327
|
...Array.from({ length: GRID_COUNT }, (_, i) => i + 1).reduce(
|
|
329
328
|
(styles, i) => ({
|
|
330
329
|
...styles,
|
|
331
|
-
[`col-span-${i}`]: (0,
|
|
330
|
+
[`col-span-${i}`]: (0, import_utils7.px)(import_foundation4.COLUMN_UNIT * i + import_foundation4.GUTTER_UNIT * (i - 1))
|
|
332
331
|
}),
|
|
333
332
|
{}
|
|
334
333
|
),
|
|
@@ -341,11 +340,11 @@ function createTailwindConfig({
|
|
|
341
340
|
)
|
|
342
341
|
},
|
|
343
342
|
gap: {
|
|
344
|
-
fixed: (0,
|
|
343
|
+
fixed: (0, import_utils7.px)(import_foundation4.GUTTER_UNIT)
|
|
345
344
|
},
|
|
346
|
-
borderRadius: (0,
|
|
345
|
+
borderRadius: (0, import_utils7.mapObject)(import_foundation4.BORDER_RADIUS, (name, value) => [
|
|
347
346
|
name,
|
|
348
|
-
(0,
|
|
347
|
+
(0, import_utils7.px)(value)
|
|
349
348
|
]),
|
|
350
349
|
transitionDuration: {
|
|
351
350
|
[DEFAULT]: "0.2s"
|
package/dist/index.cjs.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/foundation.ts","../src/util.ts","../src/colors/toTailwindConfig.ts","../src/colors/utils.ts","../src/colors/plugin.ts","../src/gradient/plugin.ts","../src/typography/plugin.ts"],"sourcesContent":["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} 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 { mapObject, 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 fit: 'fit-content',\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","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 camelToKebab(value: string) {\n return value\n .replace(/(?<small>[\\da-z]|(?=[A-Z]))(?<capital>[A-Z])/gu, '$1-$2')\n .toLowerCase()\n}\n","import { Material } from '@charcoal-ui/foundation'\nimport { applyEffect, filterObject, mapObject } from '@charcoal-ui/utils'\nimport { TailwindConfig } from 'tailwindcss/tailwind-config'\nimport { MergedEffect } from '../foundation'\n\nimport { TailwindVersion } from '../types'\nimport { getDefaultKeyName } from '../util'\n\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 { 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 { CharcoalTheme as Theme } from '@charcoal-ui/theme'\nimport {\n applyEffect,\n filterObject,\n flatMapObject,\n mapObject,\n} from '@charcoal-ui/utils'\nimport plugin, { TailwindPlugin } from 'tailwindcss/plugin'\nimport { mergeEffect } from '../foundation'\nimport { CSSVariableName, CSSVariables, Definition, ThemeMap } from '../types'\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 } from '../util'\nimport { GradientMaterial } from '@charcoal-ui/foundation'\nimport { ThemeColorGradient } from '@charcoal-ui/theme'\nimport {\n applyEffectToGradient,\n flatMapObject,\n gradient,\n GradientDirection,\n mapKeys,\n mapObject,\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-gradient(to top, ...)' }\n [createUtilityName(name, className), toLinearGradient(colors)],\n\n // こういう感じのやつ\n // { 'hoge1--hover': 'linear-gradient(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, mapObject } from '@charcoal-ui/utils'\nimport { px } from '@charcoal-ui/utils'\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"],"mappings":"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","names":["import_foundation","import_utils","import_utils","plugin","import_plugin","import_utils","cssVariableColorPlugin","plugin","colors","effect","import_plugin","import_foundation","import_utils","plugin","theme","cssVariableColorPlugin"]}
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/foundation.ts","../src/util.ts","../src/colors/toTailwindConfig.ts","../src/colors/utils.ts","../src/colors/plugin.ts","../src/gradient/plugin.ts","../src/typography/plugin.ts"],"sourcesContent":["import { GRID_COUNT, mergeEffect } from './foundation'\n\nimport type { TailwindConfig } from 'tailwindcss/tailwind-config'\nimport { TailwindVersion, ThemeMap } from './types'\n\nimport {\n assertAllThemeHaveSameKeys,\n getDefaultKeyName,\n getVariantOption,\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 { mapObject, 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 fit: 'fit-content',\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","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 type { 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 camelToKebab(value: string) {\n return value\n .replace(/(?<small>[\\da-z]|(?=[A-Z]))(?<capital>[A-Z])/gu, '$1-$2')\n .toLowerCase()\n}\n","import { Material } from '@charcoal-ui/foundation'\nimport { applyEffect, filterObject, mapObject } from '@charcoal-ui/utils'\nimport type { TailwindConfig } from 'tailwindcss/tailwind-config'\nimport { MergedEffect } from '../foundation'\n\nimport { TailwindVersion } from '../types'\nimport { getDefaultKeyName } from '../util'\n\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 { 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 { CharcoalTheme as Theme } from '@charcoal-ui/theme'\nimport {\n applyEffect,\n filterObject,\n flatMapObject,\n mapObject,\n} from '@charcoal-ui/utils'\nimport plugin, { TailwindPlugin } from 'tailwindcss/plugin'\nimport { mergeEffect } from '../foundation'\nimport { CSSVariableName, CSSVariables, Definition, ThemeMap } from '../types'\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 } from '../util'\nimport { GradientMaterial } from '@charcoal-ui/foundation'\nimport { ThemeColorGradient } from '@charcoal-ui/theme'\nimport {\n applyEffectToGradient,\n flatMapObject,\n gradient,\n GradientDirection,\n mapKeys,\n mapObject,\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-gradient(to top, ...)' }\n [createUtilityName(name, className), toLinearGradient(colors)],\n\n // こういう感じのやつ\n // { 'hoge1--hover': 'linear-gradient(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, mapObject, px } from '@charcoal-ui/utils'\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"],"mappings":"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","names":["import_foundation","import_utils","import_utils","plugin","import_plugin","import_utils","cssVariableColorPlugin","plugin","colors","effect","import_plugin","import_foundation","import_utils","plugin","theme","cssVariableColorPlugin"]}
|
package/dist/index.d.ts
CHANGED
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AACjE,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAqBnD,UAAU,OAAO;IACf,OAAO,CAAC,EAAE,eAAe,CAAA;IACzB,KAAK,CAAC,EAAE,QAAQ,CAAA;CACjB;AAED,wBAAgB,oBAAoB,CAAC,EACnC,KAA0B,EAC1B,OAAc,GACf,EAAE,OAAO,GAAG,cAAc,CA+F1B;AAED,eAAO,MAAM,MAAM,EAAE,cAAyC,CAAA"}
|
package/dist/index.esm.js
CHANGED
|
@@ -223,8 +223,7 @@ function createUtilityName(gradientName, direction, suffix = "") {
|
|
|
223
223
|
// src/typography/plugin.ts
|
|
224
224
|
import plugin3 from "tailwindcss/plugin";
|
|
225
225
|
import { TYPOGRAPHY_SIZE } from "@charcoal-ui/foundation";
|
|
226
|
-
import { halfLeading, mapObject as mapObject4 } from "@charcoal-ui/utils";
|
|
227
|
-
import { px } from "@charcoal-ui/utils";
|
|
226
|
+
import { halfLeading, mapObject as mapObject4, px } from "@charcoal-ui/utils";
|
|
228
227
|
var leadingCancel = {
|
|
229
228
|
display: "block",
|
|
230
229
|
width: 0,
|
package/dist/index.esm.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/foundation.ts","../src/util.ts","../src/index.ts","../src/colors/toTailwindConfig.ts","../src/colors/utils.ts","../src/colors/plugin.ts","../src/gradient/plugin.ts","../src/typography/plugin.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 camelToKebab(value: string) {\n return value\n .replace(/(?<small>[\\da-z]|(?=[A-Z]))(?<capital>[A-Z])/gu, '$1-$2')\n .toLowerCase()\n}\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} 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 { mapObject, 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 fit: 'fit-content',\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","import { Material } from '@charcoal-ui/foundation'\nimport { applyEffect, filterObject, mapObject } from '@charcoal-ui/utils'\nimport { TailwindConfig } from 'tailwindcss/tailwind-config'\nimport { MergedEffect } from '../foundation'\n\nimport { TailwindVersion } from '../types'\nimport { getDefaultKeyName } from '../util'\n\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 { 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 { CharcoalTheme as Theme } from '@charcoal-ui/theme'\nimport {\n applyEffect,\n filterObject,\n flatMapObject,\n mapObject,\n} from '@charcoal-ui/utils'\nimport plugin, { TailwindPlugin } from 'tailwindcss/plugin'\nimport { mergeEffect } from '../foundation'\nimport { CSSVariableName, CSSVariables, Definition, ThemeMap } from '../types'\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 } from '../util'\nimport { GradientMaterial } from '@charcoal-ui/foundation'\nimport { ThemeColorGradient } from '@charcoal-ui/theme'\nimport {\n applyEffectToGradient,\n flatMapObject,\n gradient,\n GradientDirection,\n mapKeys,\n mapObject,\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-gradient(to top, ...)' }\n [createUtilityName(name, className), toLinearGradient(colors)],\n\n // こういう感じのやつ\n // { 'hoge1--hover': 'linear-gradient(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, mapObject } from '@charcoal-ui/utils'\nimport { px } from '@charcoal-ui/utils'\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"],"mappings":"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","names":["mapObject","px","applyEffect","filterObject","mapObject","mapObject","filterObject","applyEffect","plugin","flatMapObject","mapObject","cssVariableColorPlugin","plugin","colors","effect","plugin","mapObject","px","mapObject","theme","cssVariableColorPlugin"]}
|
|
1
|
+
{"version":3,"sources":["../src/foundation.ts","../src/util.ts","../src/index.ts","../src/colors/toTailwindConfig.ts","../src/colors/utils.ts","../src/colors/plugin.ts","../src/gradient/plugin.ts","../src/typography/plugin.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 type { 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 camelToKebab(value: string) {\n return value\n .replace(/(?<small>[\\da-z]|(?=[A-Z]))(?<capital>[A-Z])/gu, '$1-$2')\n .toLowerCase()\n}\n","import { GRID_COUNT, mergeEffect } from './foundation'\n\nimport type { TailwindConfig } from 'tailwindcss/tailwind-config'\nimport { TailwindVersion, ThemeMap } from './types'\n\nimport {\n assertAllThemeHaveSameKeys,\n getDefaultKeyName,\n getVariantOption,\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 { mapObject, 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 fit: 'fit-content',\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","import { Material } from '@charcoal-ui/foundation'\nimport { applyEffect, filterObject, mapObject } from '@charcoal-ui/utils'\nimport type { TailwindConfig } from 'tailwindcss/tailwind-config'\nimport { MergedEffect } from '../foundation'\n\nimport { TailwindVersion } from '../types'\nimport { getDefaultKeyName } from '../util'\n\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 { 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 { CharcoalTheme as Theme } from '@charcoal-ui/theme'\nimport {\n applyEffect,\n filterObject,\n flatMapObject,\n mapObject,\n} from '@charcoal-ui/utils'\nimport plugin, { TailwindPlugin } from 'tailwindcss/plugin'\nimport { mergeEffect } from '../foundation'\nimport { CSSVariableName, CSSVariables, Definition, ThemeMap } from '../types'\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 } from '../util'\nimport { GradientMaterial } from '@charcoal-ui/foundation'\nimport { ThemeColorGradient } from '@charcoal-ui/theme'\nimport {\n applyEffectToGradient,\n flatMapObject,\n gradient,\n GradientDirection,\n mapKeys,\n mapObject,\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-gradient(to top, ...)' }\n [createUtilityName(name, className), toLinearGradient(colors)],\n\n // こういう感じのやつ\n // { 'hoge1--hover': 'linear-gradient(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, mapObject, px } from '@charcoal-ui/utils'\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"],"mappings":"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","names":["mapObject","px","applyEffect","filterObject","mapObject","mapObject","filterObject","applyEffect","plugin","flatMapObject","mapObject","cssVariableColorPlugin","plugin","colors","effect","plugin","mapObject","px","mapObject","theme","cssVariableColorPlugin"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../../src/typography/plugin.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../../src/typography/plugin.ts"],"names":[],"mappings":"AAkCA,QAAA,MAAM,gBAAgB,6CAuBpB,CAAA;AAEF,eAAe,gBAAgB,CAAA"}
|
package/dist/util.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { TailwindConfig } from 'tailwindcss/tailwind-config';
|
|
1
|
+
import type { TailwindConfig } from 'tailwindcss/tailwind-config';
|
|
2
2
|
import { TailwindVersion, ThemeMap } from './types';
|
|
3
3
|
/**
|
|
4
4
|
* the key "default" or "DEFAULT" has special meaning and dropped from class name
|
package/dist/util.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../src/util.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;
|
|
1
|
+
{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../src/util.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AACjE,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,YAAY,CAAC,KAAK,EAAE,MAAM,UAIzC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@charcoal-ui/tailwind-config",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.12.0",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"main": "./dist/index.cjs.js",
|
|
6
6
|
"module": "./dist/index.esm.js",
|
|
@@ -29,9 +29,9 @@
|
|
|
29
29
|
"typescript": "^4.9.5"
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
|
-
"@charcoal-ui/foundation": "^3.
|
|
33
|
-
"@charcoal-ui/theme": "^3.
|
|
34
|
-
"@charcoal-ui/utils": "^3.
|
|
32
|
+
"@charcoal-ui/foundation": "^3.12.0",
|
|
33
|
+
"@charcoal-ui/theme": "^3.12.0",
|
|
34
|
+
"@charcoal-ui/utils": "^3.12.0"
|
|
35
35
|
},
|
|
36
36
|
"peerDependencies": {
|
|
37
37
|
"csstype": ">=3.0.0",
|
|
@@ -50,5 +50,5 @@
|
|
|
50
50
|
"url": "https://github.com/pixiv/charcoal.git",
|
|
51
51
|
"directory": "packages/tailwind-config"
|
|
52
52
|
},
|
|
53
|
-
"gitHead": "
|
|
53
|
+
"gitHead": "817a068941a10855b03ca57f380412e54f8bdf4b"
|
|
54
54
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import postcss, { Result } from 'postcss'
|
|
2
2
|
import postcssSelectorParser from 'postcss-selector-parser'
|
|
3
3
|
import tailwindcss from 'tailwindcss'
|
|
4
|
-
import { TailwindConfig } from 'tailwindcss/tailwind-config'
|
|
4
|
+
import type { TailwindConfig } from 'tailwindcss/tailwind-config'
|
|
5
5
|
|
|
6
6
|
const selectorParser = postcssSelectorParser()
|
|
7
7
|
|
package/src/_lib/compat.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Material } from '@charcoal-ui/foundation'
|
|
2
2
|
import { applyEffect, filterObject, mapObject } from '@charcoal-ui/utils'
|
|
3
|
-
import { TailwindConfig } from 'tailwindcss/tailwind-config'
|
|
3
|
+
import type { TailwindConfig } from 'tailwindcss/tailwind-config'
|
|
4
4
|
import { MergedEffect } from '../foundation'
|
|
5
5
|
|
|
6
6
|
import { TailwindVersion } from '../types'
|
package/src/index.ts
CHANGED
package/src/typography/plugin.ts
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import plugin from 'tailwindcss/plugin'
|
|
2
2
|
import { TypographyDescriptor, TYPOGRAPHY_SIZE } from '@charcoal-ui/foundation'
|
|
3
|
-
import { halfLeading, mapObject } from '@charcoal-ui/utils'
|
|
4
|
-
import { px } from '@charcoal-ui/utils'
|
|
3
|
+
import { halfLeading, mapObject, px } from '@charcoal-ui/utils'
|
|
5
4
|
|
|
6
5
|
const leadingCancel = {
|
|
7
6
|
display: 'block',
|
package/src/util.ts
CHANGED