@charcoal-ui/tailwind-config 1.0.0-alpha.1 → 1.0.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/README.md +1 -1
- package/dist/_lib/TailwindBuild.d.ts +18 -0
- package/dist/_lib/TailwindBuild.d.ts.map +1 -0
- package/dist/colors/plugin.d.ts +8 -0
- package/dist/colors/plugin.d.ts.map +1 -0
- package/dist/colors/plugin.test.d.ts +2 -0
- package/dist/colors/plugin.test.d.ts.map +1 -0
- package/dist/colors/toTailwindConfig.d.ts +6 -0
- package/dist/colors/toTailwindConfig.d.ts.map +1 -0
- package/dist/colors/toTailwindConfig.test.d.ts +2 -0
- package/dist/colors/toTailwindConfig.test.d.ts.map +1 -0
- package/dist/colors/utils.d.ts +7 -0
- package/dist/colors/utils.d.ts.map +1 -0
- package/dist/foundation.d.ts +6 -0
- package/dist/foundation.d.ts.map +1 -0
- package/dist/gradient/plugin.d.ts +19 -0
- package/dist/gradient/plugin.d.ts.map +1 -0
- package/dist/gradient/plugin.test.d.ts +2 -0
- package/dist/gradient/plugin.test.d.ts.map +1 -0
- package/dist/index.cjs +2 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.ts +10 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.modern.js +2 -0
- package/dist/index.modern.js.map +1 -0
- package/dist/index.module.js +2 -0
- package/dist/index.module.js.map +1 -0
- package/dist/index.test.d.ts +2 -0
- package/dist/index.test.d.ts.map +1 -0
- package/dist/types.d.ts +30 -0
- package/dist/types.d.ts.map +1 -0
- package/dist/typography/plugin.d.ts +3 -0
- package/dist/typography/plugin.d.ts.map +1 -0
- package/dist/util.d.ts +16 -0
- package/dist/util.d.ts.map +1 -0
- package/package.json +5 -6
- package/src/__snapshots__/index.test.ts.snap +80 -2224
- package/src/colors/plugin.test.ts +1 -1
- package/src/colors/plugin.ts +2 -1
- package/src/colors/toTailwindConfig.test.ts +1 -1
- package/src/colors/toTailwindConfig.ts +1 -1
- package/src/colors/utils.ts +1 -1
- package/src/foundation.ts +2 -1
- package/src/gradient/plugin.ts +3 -2
- package/src/index.test.ts +3 -3
- package/src/index.ts +19 -10
- package/src/types.ts +2 -1
- package/src/typography/plugin.ts +3 -6
package/README.md
CHANGED
|
@@ -38,7 +38,7 @@ module.exports = {
|
|
|
38
38
|
### カスタマイズする
|
|
39
39
|
|
|
40
40
|
```js:tailwind.config.js
|
|
41
|
-
const { light, dark } = require('@charcoal-ui/
|
|
41
|
+
const { light, dark } = require('@charcoal-ui/theme')
|
|
42
42
|
const { createTailwindConfig } = require('@charcoal-ui/tailwind-config')
|
|
43
43
|
|
|
44
44
|
/**
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { TailwindConfig } from 'tailwindcss/tailwind-config';
|
|
2
|
+
/**
|
|
3
|
+
* テスト用に tailwind.css のビルドを走らせる
|
|
4
|
+
*
|
|
5
|
+
* クラス一覧を得たりするたびにビルドが走らないことを保証するために、new した時点でビルドが完了するように作っている
|
|
6
|
+
*/
|
|
7
|
+
export declare class TailwindBuild {
|
|
8
|
+
private result;
|
|
9
|
+
private readonly parsedCss;
|
|
10
|
+
private constructor();
|
|
11
|
+
static run(config: TailwindConfig, css: string): Promise<TailwindBuild>;
|
|
12
|
+
get css(): string;
|
|
13
|
+
get classNames(): string[];
|
|
14
|
+
getStylesByClassName(className: string): string[] | undefined;
|
|
15
|
+
getCssVariables(): string[];
|
|
16
|
+
getCssVariable(varName: `--${string}`): string[];
|
|
17
|
+
}
|
|
18
|
+
//# sourceMappingURL=TailwindBuild.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TailwindBuild.d.ts","sourceRoot":"","sources":["../../src/_lib/TailwindBuild.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAI5D;;;;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"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { TailwindPlugin } from 'tailwindcss/plugin';
|
|
2
|
+
import { Definition, ThemeMap } from '../types';
|
|
3
|
+
/**
|
|
4
|
+
* `:root` 以外のケースで各 CSS Variable がどういう値を取るかを定義する
|
|
5
|
+
*/
|
|
6
|
+
export default function cssVariableColorPlugin({ ':root': _defaultTheme, ...themes }: ThemeMap): TailwindPlugin;
|
|
7
|
+
export declare function defineCssVariables(themes: Omit<ThemeMap, ':root'>): Definition;
|
|
8
|
+
//# sourceMappingURL=plugin.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../../src/colors/plugin.ts"],"names":[],"mappings":"AAGA,OAAe,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAA;AAE3D,OAAO,EAAiC,UAAU,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AAI9E;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAAC,EAC7C,OAAO,EAAE,aAAa,EACtB,GAAG,MAAM,EACV,EAAE,QAAQ,GAAG,cAAc,CAO3B;AAED,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,IAAI,CAAC,QAAQ,EAAE,OAAO,CAAC,cAejE"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"plugin.test.d.ts","sourceRoot":"","sources":["../../src/colors/plugin.test.ts"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { TailwindConfig } from 'tailwindcss/tailwind-config';
|
|
2
|
+
import { MergedEffect } from '../foundation';
|
|
3
|
+
import { TailwindVersion } from '../types';
|
|
4
|
+
import { AnyColorTheme } from './utils';
|
|
5
|
+
export declare function colorsToTailwindConfig(version: TailwindVersion, colors: AnyColorTheme, effects: MergedEffect): TailwindConfig['theme']['colors'];
|
|
6
|
+
//# sourceMappingURL=toTailwindConfig.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"toTailwindConfig.d.ts","sourceRoot":"","sources":["../../src/colors/toTailwindConfig.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAE5C,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAE1C,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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"toTailwindConfig.test.d.ts","sourceRoot":"","sources":["../../src/colors/toTailwindConfig.test.ts"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { GradientMaterial, Material } from '@charcoal-ui/foundation';
|
|
2
|
+
export declare const COLOR_PREFIX = "--tailwind-color-";
|
|
3
|
+
export declare function isSingleColor(color: AnyColor): color is Material;
|
|
4
|
+
declare type AnyColor = Material | GradientMaterial;
|
|
5
|
+
export declare type AnyColorTheme = Record<string, AnyColor>;
|
|
6
|
+
export {};
|
|
7
|
+
//# sourceMappingURL=utils.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/colors/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAA;AAEpE,eAAO,MAAM,YAAY,sBAAsB,CAAA;AAE/C,wBAAgB,aAAa,CAAC,KAAK,EAAE,QAAQ,GAAG,KAAK,IAAI,QAAQ,CAEhE;AAED,aAAK,QAAQ,GAAG,QAAQ,GAAG,gBAAgB,CAAA;AAE3C,oBAAY,aAAa,GAAG,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAA"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { Effect } from '@charcoal-ui/foundation';
|
|
2
|
+
import { CharcoalTheme as Theme } from '@charcoal-ui/theme';
|
|
3
|
+
export declare const GRID_COUNT = 12;
|
|
4
|
+
export declare function mergeEffect({ elementEffect, effect, }: Pick<Theme, 'elementEffect' | 'effect'>): MergedEffect;
|
|
5
|
+
export declare type MergedEffect = Record<string, Effect>;
|
|
6
|
+
//# sourceMappingURL=foundation.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"foundation.d.ts","sourceRoot":"","sources":["../src/foundation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAA;AAChD,OAAO,EAAE,aAAa,IAAI,KAAK,EAAE,MAAM,oBAAoB,CAAA;AAE3D,eAAO,MAAM,UAAU,KAAK,CAAA;AAE5B,wBAAgB,WAAW,CAAC,EAC1B,aAAa,EACb,MAAM,GACP,EAAE,IAAI,CAAC,KAAK,EAAE,eAAe,GAAG,QAAQ,CAAC,GAAG,YAAY,CASxD;AAED,oBAAY,YAAY,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { GradientMaterial } from '@charcoal-ui/foundation';
|
|
2
|
+
import { ThemeColorGradient } from '@charcoal-ui/theme';
|
|
3
|
+
import { MergedEffect } from '../foundation';
|
|
4
|
+
export default function cssVariableColorPlugin(gradients: ThemeColorGradient, effects: MergedEffect, selectorOrMediaQuery: string): import("tailwindcss/plugin").TailwindPlugin;
|
|
5
|
+
/**
|
|
6
|
+
* こういう感じのやつ。この時点では `--tailwind-gradient-` のような CSS 変数名になってない
|
|
7
|
+
*
|
|
8
|
+
* ```js
|
|
9
|
+
* {
|
|
10
|
+
* 'hoge1': 'linear-gradient(to top, ...)',
|
|
11
|
+
* ...
|
|
12
|
+
* }
|
|
13
|
+
* ```
|
|
14
|
+
*/
|
|
15
|
+
declare type Utilities = Record<string, LinearGradient>;
|
|
16
|
+
declare type LinearGradient = `linear-gradient(${string})`;
|
|
17
|
+
export declare function getUtilities(gradients: Record<string, GradientMaterial>, effect: MergedEffect): Utilities;
|
|
18
|
+
export {};
|
|
19
|
+
//# sourceMappingURL=plugin.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../../src/gradient/plugin.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAA;AAOvD,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAI5C,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAC5C,SAAS,EAAE,kBAAkB,EAC7B,OAAO,EAAE,YAAY,EACrB,oBAAoB,EAAE,MAAM,+CA8B7B;AASD;;;;;;;;;GASG;AACH,aAAK,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAA;AAE/C,aAAK,cAAc,GAAG,mBAAmB,MAAM,GAAG,CAAA;AAElD,wBAAgB,YAAY,CAC1B,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,EAC3C,MAAM,EAAE,YAAY,GACnB,SAAS,CAqCX"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"plugin.test.d.ts","sourceRoot":"","sources":["../../src/gradient/plugin.test.ts"],"names":[],"mappings":""}
|
package/dist/index.cjs
ADDED
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
var r=require("@charcoal-ui/foundation"),t=require("@charcoal-ui/theme"),e=require("@charcoal-ui/utils");function n(r){return r&&"object"==typeof r&&"default"in r?r:{default:r}}var o=/*#__PURE__*/n(require("tailwindcss/plugin"));function i(){i=function(r,t){return new e(r,void 0,t)};var r=RegExp.prototype,t=new WeakMap;function e(r,n,o){var i=new RegExp(r,n);return t.set(i,o||t.get(r)),u(i,e.prototype)}function n(r,e){var n=t.get(e);return Object.keys(n).reduce(function(t,e){return t[e]=r[n[e]],t},Object.create(null))}return c(e,RegExp),e.prototype.exec=function(t){var e=r.exec.call(this,t);return e&&(e.groups=n(e,this)),e},e.prototype[Symbol.replace]=function(e,o){if("string"==typeof o){var i=t.get(this);return r[Symbol.replace].call(this,e,o.replace(/\$<([^>]+)>/g,function(r,t){return"$"+i[t]}))}if("function"==typeof o){var a=this;return r[Symbol.replace].call(this,e,function(){var r=arguments;return"object"!=typeof r[r.length-1]&&(r=[].slice.call(r)).push(n(r,a)),o.apply(this,r)})}return r[Symbol.replace].call(this,e,o)},i.apply(this,arguments)}function a(){return a=Object.assign||function(r){for(var t=1;t<arguments.length;t++){var e=arguments[t];for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(r[n]=e[n])}return r},a.apply(this,arguments)}function c(r,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");r.prototype=Object.create(t&&t.prototype,{constructor:{value:r,writable:!0,configurable:!0}}),Object.defineProperty(r,"prototype",{writable:!1}),t&&u(r,t)}function u(r,t){return u=Object.setPrototypeOf||function(r,t){return r.__proto__=t,r},u(r,t)}function f(r){return a({},r.elementEffect,r.effect,{outline:{type:"opacity",opacity:.32}})}function s(r){switch(r){case"v3":case"v2":return"DEFAULT";case"v1":return"default"}}function l(r,t){return r.size===t.size&&Array.from(r).every(function(r){return t.has(r)})}function p(r,t){return Object.fromEntries(Object.entries(r).flatMap(function(r){var e=t(r[0],r[1]);return e?[e]:[]}))}function v(r,t){return Object.fromEntries(Object.entries(r).flatMap(function(r){return t(r[0],r[1])}))}function d(r,t){return p(r,function(r,e){return!0===t(e)?[r,e]:null})}function g(r){return"string"==typeof r}function y(r,t,n){var o=d(t,g),i=s(r);function c(r,t){var o,c="--tailwind-color-"+r;return a(((o={})[i]="var("+c+", "+t+")",o),p(n,function(r,n){return[r,"var("+c+"--"+r+", "+e.applyEffect(t,n)+")"]}))}return p(o,function(r,t){return[r,c(r,t)]})}var h=[":root"];function b(r){var t=p(function(r,t){if(null==r)return{};var e,n,o={},i=Object.keys(r);for(n=0;n<i.length;n++)t.indexOf(e=i[n])>=0||(o[e]=r[e]);return o}(r,h),function(r,t){var n=function(r){var t=d(r.color,g),n=Object.entries(f(r));return v(t,function(r,t){var o="--tailwind-color-"+r;return[[o,t]].concat(n.map(function(r){return[o+"--"+r[0],e.applyEffect(t,r[1])]}))})}(t);return r.startsWith("@media")?[r,{":root":n}]:[r,n]});return o.default(function(r){(0,r.addBase)(t)})}var m={"to top":"top","to bottom":"bottom","to left":"left","to right":"right"};function O(r,t,e){return void 0===e&&(e=""),[(n=r,n.replace(/*#__PURE__*/i(/([0-9a-z]|(?=[A-Z]))([A-Z])/g,{small:1,capital:2}),"$1-$2").toLowerCase()),t,e].filter(Boolean).join("-");var n}var w={display:"block",width:0,height:0,content:'""'},j=function(r){var t=-e.halfLeading(r);return{"font-size":e.px(r.fontSize),"line-height":e.px(r.lineHeight),"&::before":a({},w,{marginTop:e.px(t)}),"&::after":a({},w,{marginBottom:e.px(t)})}},x=o.default(function(t){(0,t.addUtilities)(a({},p(r.TYPOGRAPHY_SIZE,function(r,t){return[".typography-"+r,j(t)]}),{".preserve-half-leading":{"&::before":{content:"none"},"&::after":{content:"none"}}}),{variants:["responsive"]})});function E(n){var i,c=n.theme,u=void 0===c?{":root":t.light}:c,d=n.version,g=void 0===d?"v3":d;!function(r){for(var t=r[":root"],e=new Set(Object.keys(t.color)),n=new Set(Object.keys(t.effect)),o=0,i=Object.entries(r);o<i.length;o++){var a=i[o],c=a[0],u=a[1],f=new Set(Object.keys(u.color)),s=new Set(Object.keys(u.effect));if(!l(f,e))throw new Error(":root and "+c+" does not have same colors.\n\nExpected( :root ): "+JSON.stringify(Array.from(e))+"\nGot: "+JSON.stringify(Array.from(f)));if(!l(s,n))throw new Error(":root and "+c+" does not have same effects.\n\nExpected( :root ): "+JSON.stringify(Array.from(n))+"\nGot: "+JSON.stringify(Array.from(s)))}}(u);var h=u[":root"],w=f(h),j=s(g);return a({theme:{screens:{screen1:e.px(0),screen2:e.px(h.breakpoint.screen1),screen3:e.px(h.breakpoint.screen2),screen4:e.px(h.breakpoint.screen3),screen5:e.px(h.breakpoint.screen4)},colors:a({black:"#000",white:"#fff",transparent:"transparent",current:"currentColor"},y(g,h.color,w)),borderColor:a({},y(g,p(h.border,function(r,t){return[r,t.color]}),w)),spacing:p(r.SPACING,function(r,t){return[r,e.px(t)]}),width:a({full:"100%",screen:"100vw",auto:"auto"},Array.from({length:12},function(r,t){return t+1}).reduce(function(t,n){var o;return a({},t,((o={})["col-span-"+n]=e.px(r.COLUMN_UNIT*n+r.GUTTER_UNIT*(n-1)),o))},{}),Array.from({length:11},function(r,t){return t+1}).reduce(function(r,t){var e;return a({},r,((e={})[t+"/12"]=t/12*100+"%",e))},{})),gap:{fixed:e.px(r.GUTTER_UNIT)},borderRadius:p(r.BORDER_RADIUS,function(r,t){return[r,e.px(t)]}),transitionDuration:(i={},i[j]="0.2s",i)}},function(r){switch(r){case"v3":return{};case"v2":case"v1":return{variants:{}}}}(g),{corePlugins:{lineHeight:!1},plugins:[x,b(u)].concat(Object.entries(u).map(function(r){var t=r[0],n=r[1];return function(r,t,n){var i=function(r,t){var n=Object.entries(t),o=Object.entries(m);return v(r,function(r,t){return o.flatMap(function(o){var i=o[0],a=o[1],c=function(t){var n=e.gradient(i)(t);if(!("backgroundImage"in n))throw new Error("Could not generate linear-gradient() from "+r+" "+i+" "+a);return n.backgroundImage};return[[O(r,a),c(t)]].concat(n.map(function(n){var o=n[1];return[O(r,a,n[0]),c(e.applyEffectToGradient(o)(t))]}))})})}(r,t),a=p(i,function(r){return[".bg-"+r,{backgroundImage:"var(--tailwind-gradient-"+r+")"}]});return o.default(function(r){var t,e,o,c=r.addBase,u=r.addUtilities,f=(t=function(r){return"--tailwind-gradient-"+r},Object.fromEntries(Object.entries(i).map(function(r){var e=r[1];return[t(r[0]),e]})));n.startsWith("@media")?c(((e={})[n]={":root":f},e)):c(((o={})[n]=f,o)),u(a,{variants:["responsive"]})})}(n.gradientColor,f(n),t)}))})}var S=E({});exports.config=S,exports.createTailwindConfig=E;
|
|
2
|
+
//# sourceMappingURL=index.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.cjs","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":"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"}
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { TailwindConfig } from 'tailwindcss/tailwind-config';
|
|
2
|
+
import { TailwindVersion, ThemeMap } from './types';
|
|
3
|
+
interface Options {
|
|
4
|
+
version?: TailwindVersion;
|
|
5
|
+
theme?: ThemeMap;
|
|
6
|
+
}
|
|
7
|
+
export declare function createTailwindConfig({ theme, version, }: Options): TailwindConfig;
|
|
8
|
+
export declare const config: TailwindConfig;
|
|
9
|
+
export {};
|
|
10
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAsBnD,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,CA8F1B;AAED,eAAO,MAAM,MAAM,EAAE,cAAyC,CAAA"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{TYPOGRAPHY_SIZE as t,SPACING as e,COLUMN_UNIT as r,GUTTER_UNIT as n,BORDER_RADIUS as o}from"@charcoal-ui/foundation";import{light as i}from"@charcoal-ui/theme";import{applyEffect as c,applyEffectToGradient as a,gradient as s,px as u,halfLeading as f}from"@charcoal-ui/utils";import l from"tailwindcss/plugin";function p(){p=function(t,e){return new r(t,void 0,e)};var t=RegExp.prototype,e=new WeakMap;function r(t,n,o){var i=new RegExp(t,n);return e.set(i,o||e.get(t)),h(i,r.prototype)}function n(t,r){var n=e.get(r);return Object.keys(n).reduce(function(e,r){return e[r]=t[n[r]],e},Object.create(null))}return g(r,RegExp),r.prototype.exec=function(e){var r=t.exec.call(this,e);return r&&(r.groups=n(r,this)),r},r.prototype[Symbol.replace]=function(r,o){if("string"==typeof o){var i=e.get(this);return t[Symbol.replace].call(this,r,o.replace(/\$<([^>]+)>/g,function(t,e){return"$"+i[e]}))}if("function"==typeof o){var c=this;return t[Symbol.replace].call(this,r,function(){var t=arguments;return"object"!=typeof t[t.length-1]&&(t=[].slice.call(t)).push(n(t,c)),o.apply(this,t)})}return t[Symbol.replace].call(this,r,o)},p.apply(this,arguments)}function b(){return b=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(t[n]=r[n])}return t},b.apply(this,arguments)}function g(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&h(t,e)}function h(t,e){return h=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t},h(t,e)}function y({elementEffect:t,effect:e}){return b({},t,e,{outline:{type:"opacity",opacity:.32}})}function d(t){switch(t){case"v3":case"v2":return"DEFAULT";case"v1":return"default"}}function m(t,e){return t.size===e.size&&Array.from(t).every(t=>e.has(t))}function v(t,e){return Object.fromEntries(Object.entries(t).flatMap(([t,r])=>{const n=e(t,r);return n?[n]:[]}))}function w(t,e){return Object.fromEntries(Object.entries(t).flatMap(([t,r])=>e(t,r)))}function O(t,e){return v(t,(t,r)=>!0===e(r)?[t,r]:null)}function $(t){return"string"==typeof t}function j(t,e,r){const n=O(e,$),o=d(t);function i(t,e){const n=`--tailwind-color-${t}`;return b({[o]:`var(${n}, ${e})`},v(r,(t,r)=>[t,`var(${n}--${t}, ${c(e,r)})`]))}return v(n,(t,e)=>[t,i(t,e)])}const k=[":root"];function E(t){const e=v(function(t,e){if(null==t)return{};var r,n,o={},i=Object.keys(t);for(n=0;n<i.length;n++)e.indexOf(r=i[n])>=0||(o[r]=t[r]);return o}(t,k),(t,e)=>{const r=function(t){const e=O(t.color,$),r=Object.entries(y(t));return w(e,(t,e)=>{const n=`--tailwind-color-${t}`;return[[n,e],...r.map(([t,r])=>[`${n}--${t}`,c(e,r)])]})}(e);return t.startsWith("@media")?[t,{":root":r}]:[t,r]});return l(({addBase:t})=>{t(e)})}const S={"to top":"top","to bottom":"bottom","to left":"left","to right":"right"};function x(t,e,r=""){return[(n=t,n.replace(/*#__PURE__*/p(/([0-9a-z]|(?=[A-Z]))([A-Z])/g,{small:1,capital:2}),"$1-$2").toLowerCase()),e,r].filter(Boolean).join("-");var n}const A={display:"block",width:0,height:0,content:'""'},z=t=>{const e=-f(t);return{"font-size":u(t.fontSize),"line-height":u(t.lineHeight),"&::before":b({},A,{marginTop:u(e)}),"&::after":b({},A,{marginBottom:u(e)})}},C=l(({addUtilities:e})=>{e(b({},v(t,(t,e)=>[`.typography-${t}`,z(e)]),{".preserve-half-leading":{"&::before":{content:"none"},"&::after":{content:"none"}}}),{variants:["responsive"]})});function B({theme:t={":root":i},version:c="v3"}){!function(t){const e=t[":root"],r=new Set(Object.keys(e.color)),n=new Set(Object.keys(e.effect));for(const[e,o]of Object.entries(t)){const t=new Set(Object.keys(o.color)),i=new Set(Object.keys(o.effect));if(!m(t,r))throw new Error(`:root and ${e} does not have same colors.\n\nExpected( :root ): ${JSON.stringify(Array.from(r))}\nGot: ${JSON.stringify(Array.from(t))}`);if(!m(i,n))throw new Error(`:root and ${e} does not have same effects.\n\nExpected( :root ): ${JSON.stringify(Array.from(n))}\nGot: ${JSON.stringify(Array.from(i))}`)}}(t);const f=t[":root"],p=y(f),g=d(c);return b({theme:{screens:{screen1:u(0),screen2:u(f.breakpoint.screen1),screen3:u(f.breakpoint.screen2),screen4:u(f.breakpoint.screen3),screen5:u(f.breakpoint.screen4)},colors:b({black:"#000",white:"#fff",transparent:"transparent",current:"currentColor"},j(c,f.color,p)),borderColor:b({},j(c,v(f.border,(t,e)=>[t,e.color]),p)),spacing:v(e,(t,e)=>[t,u(e)]),width:b({full:"100%",screen:"100vw",auto:"auto"},Array.from({length:12},(t,e)=>e+1).reduce((t,e)=>b({},t,{[`col-span-${e}`]:u(r*e+n*(e-1))}),{}),Array.from({length:11},(t,e)=>e+1).reduce((t,e)=>b({},t,{[`${e}/12`]:e/12*100+"%"}),{})),gap:{fixed:u(n)},borderRadius:v(o,(t,e)=>[t,u(e)]),transitionDuration:{[g]:"0.2s"}}},function(t){switch(t){case"v3":return{};case"v2":case"v1":return{variants:{}}}}(c),{corePlugins:{lineHeight:!1},plugins:[C,E(t),...Object.entries(t).map(([t,e])=>function(t,e,r){const n=function(t,e){const r=Object.entries(e),n=Object.entries(S);return w(t,(t,e)=>n.flatMap(([n,o])=>{const i=e=>{const r=s(n)(e);if(!("backgroundImage"in r))throw new Error(`Could not generate linear-gradient() from ${t} ${n} ${o}`);return r.backgroundImage};return[[x(t,o),i(e)],...r.map(([r,n])=>[x(t,o,r),i(a(n)(e))])]}))}(t,e),o=v(n,t=>[`.bg-${t}`,{backgroundImage:`var(--tailwind-gradient-${t})`}]);return l(({addBase:t,addUtilities:e})=>{const i=(c=t=>`--tailwind-gradient-${t}`,Object.fromEntries(Object.entries(n).map(([t,e])=>[c(t),e])));var c;r.startsWith("@media")?t({[r]:{":root":i}}):t({[r]:i}),e(o,{variants:["responsive"]})})}(e.gradientColor,y(e),t))]})}const J=B({});export{J as config,B as createTailwindConfig};
|
|
2
|
+
//# sourceMappingURL=index.modern.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.modern.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","key","entry","flatMapObject","filterObject","fn","isSingleColor","color","colorsToTailwindConfig","colors","effects","targetColors","DEFAULT","colorsForAllEffects","name","varName","effectName","applyEffect","cssVariableColorPlugin","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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"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{TYPOGRAPHY_SIZE as r,SPACING as t,COLUMN_UNIT as e,GUTTER_UNIT as n,BORDER_RADIUS as o}from"@charcoal-ui/foundation";import{light as i}from"@charcoal-ui/theme";import{applyEffect as c,applyEffectToGradient as a,gradient as u,px as f,halfLeading as s}from"@charcoal-ui/utils";import l from"tailwindcss/plugin";function p(){p=function(r,t){return new e(r,void 0,t)};var r=RegExp.prototype,t=new WeakMap;function e(r,n,o){var i=new RegExp(r,n);return t.set(i,o||t.get(r)),b(i,e.prototype)}function n(r,e){var n=t.get(e);return Object.keys(n).reduce(function(t,e){return t[e]=r[n[e]],t},Object.create(null))}return g(e,RegExp),e.prototype.exec=function(t){var e=r.exec.call(this,t);return e&&(e.groups=n(e,this)),e},e.prototype[Symbol.replace]=function(e,o){if("string"==typeof o){var i=t.get(this);return r[Symbol.replace].call(this,e,o.replace(/\$<([^>]+)>/g,function(r,t){return"$"+i[t]}))}if("function"==typeof o){var c=this;return r[Symbol.replace].call(this,e,function(){var r=arguments;return"object"!=typeof r[r.length-1]&&(r=[].slice.call(r)).push(n(r,c)),o.apply(this,r)})}return r[Symbol.replace].call(this,e,o)},p.apply(this,arguments)}function v(){return v=Object.assign||function(r){for(var t=1;t<arguments.length;t++){var e=arguments[t];for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(r[n]=e[n])}return r},v.apply(this,arguments)}function g(r,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");r.prototype=Object.create(t&&t.prototype,{constructor:{value:r,writable:!0,configurable:!0}}),Object.defineProperty(r,"prototype",{writable:!1}),t&&b(r,t)}function b(r,t){return b=Object.setPrototypeOf||function(r,t){return r.__proto__=t,r},b(r,t)}function d(r){return v({},r.elementEffect,r.effect,{outline:{type:"opacity",opacity:.32}})}function h(r){switch(r){case"v3":case"v2":return"DEFAULT";case"v1":return"default"}}function y(r,t){return r.size===t.size&&Array.from(r).every(function(r){return t.has(r)})}function m(r,t){return Object.fromEntries(Object.entries(r).flatMap(function(r){var e=t(r[0],r[1]);return e?[e]:[]}))}function w(r,t){return Object.fromEntries(Object.entries(r).flatMap(function(r){return t(r[0],r[1])}))}function O(r,t){return m(r,function(r,e){return!0===t(e)?[r,e]:null})}function j(r){return"string"==typeof r}function k(r,t,e){var n=O(t,j),o=h(r);function i(r,t){var n,i="--tailwind-color-"+r;return v(((n={})[o]="var("+i+", "+t+")",n),m(e,function(r,e){return[r,"var("+i+"--"+r+", "+c(t,e)+")"]}))}return m(n,function(r,t){return[r,i(r,t)]})}var E=[":root"];function S(r){var t=m(function(r,t){if(null==r)return{};var e,n,o={},i=Object.keys(r);for(n=0;n<i.length;n++)t.indexOf(e=i[n])>=0||(o[e]=r[e]);return o}(r,E),function(r,t){var e=function(r){var t=O(r.color,j),e=Object.entries(d(r));return w(t,function(r,t){var n="--tailwind-color-"+r;return[[n,t]].concat(e.map(function(r){return[n+"--"+r[0],c(t,r[1])]}))})}(t);return r.startsWith("@media")?[r,{":root":e}]:[r,e]});return l(function(r){(0,r.addBase)(t)})}var x={"to top":"top","to bottom":"bottom","to left":"left","to right":"right"};function A(r,t,e){return void 0===e&&(e=""),[(n=r,n.replace(/*#__PURE__*/p(/([0-9a-z]|(?=[A-Z]))([A-Z])/g,{small:1,capital:2}),"$1-$2").toLowerCase()),t,e].filter(Boolean).join("-");var n}var z={display:"block",width:0,height:0,content:'""'},C=function(r){var t=-s(r);return{"font-size":f(r.fontSize),"line-height":f(r.lineHeight),"&::before":v({},z,{marginTop:f(t)}),"&::after":v({},z,{marginBottom:f(t)})}},B=l(function(t){(0,t.addUtilities)(v({},m(r,function(r,t){return[".typography-"+r,C(t)]}),{".preserve-half-leading":{"&::before":{content:"none"},"&::after":{content:"none"}}}),{variants:["responsive"]})});function J(r){var c,s=r.theme,p=void 0===s?{":root":i}:s,g=r.version,b=void 0===g?"v3":g;!function(r){for(var t=r[":root"],e=new Set(Object.keys(t.color)),n=new Set(Object.keys(t.effect)),o=0,i=Object.entries(r);o<i.length;o++){var c=i[o],a=c[0],u=c[1],f=new Set(Object.keys(u.color)),s=new Set(Object.keys(u.effect));if(!y(f,e))throw new Error(":root and "+a+" does not have same colors.\n\nExpected( :root ): "+JSON.stringify(Array.from(e))+"\nGot: "+JSON.stringify(Array.from(f)));if(!y(s,n))throw new Error(":root and "+a+" does not have same effects.\n\nExpected( :root ): "+JSON.stringify(Array.from(n))+"\nGot: "+JSON.stringify(Array.from(s)))}}(p);var O=p[":root"],j=d(O),E=h(b);return v({theme:{screens:{screen1:f(0),screen2:f(O.breakpoint.screen1),screen3:f(O.breakpoint.screen2),screen4:f(O.breakpoint.screen3),screen5:f(O.breakpoint.screen4)},colors:v({black:"#000",white:"#fff",transparent:"transparent",current:"currentColor"},k(b,O.color,j)),borderColor:v({},k(b,m(O.border,function(r,t){return[r,t.color]}),j)),spacing:m(t,function(r,t){return[r,f(t)]}),width:v({full:"100%",screen:"100vw",auto:"auto"},Array.from({length:12},function(r,t){return t+1}).reduce(function(r,t){var o;return v({},r,((o={})["col-span-"+t]=f(e*t+n*(t-1)),o))},{}),Array.from({length:11},function(r,t){return t+1}).reduce(function(r,t){var e;return v({},r,((e={})[t+"/12"]=t/12*100+"%",e))},{})),gap:{fixed:f(n)},borderRadius:m(o,function(r,t){return[r,f(t)]}),transitionDuration:(c={},c[E]="0.2s",c)}},function(r){switch(r){case"v3":return{};case"v2":case"v1":return{variants:{}}}}(b),{corePlugins:{lineHeight:!1},plugins:[B,S(p)].concat(Object.entries(p).map(function(r){var t=r[0],e=r[1];return function(r,t,e){var n=function(r,t){var e=Object.entries(t),n=Object.entries(x);return w(r,function(r,t){return n.flatMap(function(n){var o=n[0],i=n[1],c=function(t){var e=u(o)(t);if(!("backgroundImage"in e))throw new Error("Could not generate linear-gradient() from "+r+" "+o+" "+i);return e.backgroundImage};return[[A(r,i),c(t)]].concat(e.map(function(e){var n=e[1];return[A(r,i,e[0]),c(a(n)(t))]}))})})}(r,t),o=m(n,function(r){return[".bg-"+r,{backgroundImage:"var(--tailwind-gradient-"+r+")"}]});return l(function(r){var t,i,c,a=r.addBase,u=r.addUtilities,f=(t=function(r){return"--tailwind-gradient-"+r},Object.fromEntries(Object.entries(n).map(function(r){var e=r[1];return[t(r[0]),e]})));e.startsWith("@media")?a(((i={})[e]={":root":f},i)):a(((c={})[e]=f,c)),u(o,{variants:["responsive"]})})}(e.gradientColor,d(e),t)}))})}var M=J({});export{M as config,J as createTailwindConfig};
|
|
2
|
+
//# sourceMappingURL=index.module.js.map
|
|
@@ -0,0 +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":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.test.d.ts","sourceRoot":"","sources":["../src/index.test.ts"],"names":[],"mappings":""}
|
package/dist/types.d.ts
ADDED
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { Material } from '@charcoal-ui/foundation';
|
|
2
|
+
import { CharcoalTheme as Theme } from '@charcoal-ui/theme';
|
|
3
|
+
export declare type TailwindVersion = 'v1' | 'v2' | 'v3';
|
|
4
|
+
export interface ThemeMap {
|
|
5
|
+
':root': Theme;
|
|
6
|
+
[mediaQuery: `@media (${string})`]: Theme;
|
|
7
|
+
[selector: string]: Theme;
|
|
8
|
+
}
|
|
9
|
+
export declare type Values<T extends object> = T[keyof T];
|
|
10
|
+
export declare type Definition = {
|
|
11
|
+
[mediaQuery: `@media${string}`]: {
|
|
12
|
+
':root': CSSVariables;
|
|
13
|
+
};
|
|
14
|
+
[selector: string]: CSSVariables;
|
|
15
|
+
};
|
|
16
|
+
export declare type CSSVariableName = `--tailwind-${string}`;
|
|
17
|
+
/**
|
|
18
|
+
* こういう感じのやつ
|
|
19
|
+
*
|
|
20
|
+
* ```js
|
|
21
|
+
* {
|
|
22
|
+
* '--tailwind-color-hoge1': '#ffffff',
|
|
23
|
+
* '--tailwind-color-hoge1--hover': '#eeeeee',
|
|
24
|
+
* '--tailwind-color-hoge1--press': '#dddddd',
|
|
25
|
+
* ...
|
|
26
|
+
* }
|
|
27
|
+
* ```
|
|
28
|
+
*/
|
|
29
|
+
export declare type CSSVariables = Record<CSSVariableName, Material>;
|
|
30
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAA;AAClD,OAAO,EAAE,aAAa,IAAI,KAAK,EAAE,MAAM,oBAAoB,CAAA;AAE3D,oBAAY,eAAe,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAEhD,MAAM,WAAW,QAAQ;IACvB,OAAO,EAAE,KAAK,CAAA;IACd,CAAC,UAAU,EAAE,WAAW,MAAM,GAAG,GAAG,KAAK,CAAA;IACzC,CAAC,QAAQ,EAAE,MAAM,GAAG,KAAK,CAAA;CAC1B;AAED,oBAAY,MAAM,CAAC,CAAC,SAAS,MAAM,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,CAAA;AAEjD,oBAAY,UAAU,GAAG;IACvB,CAAC,UAAU,EAAE,SAAS,MAAM,EAAE,GAAG;QAAE,OAAO,EAAE,YAAY,CAAA;KAAE,CAAA;IAC1D,CAAC,QAAQ,EAAE,MAAM,GAAG,YAAY,CAAA;CACjC,CAAA;AAED,oBAAY,eAAe,GAAG,cAAc,MAAM,EAAE,CAAA;AAEpD;;;;;;;;;;;GAWG;AACH,oBAAY,YAAY,GAAG,MAAM,CAAC,eAAe,EAAE,QAAQ,CAAC,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../../src/typography/plugin.ts"],"names":[],"mappings":"AAoCA,QAAA,MAAM,gBAAgB,6CAuBpB,CAAA;AAEF,eAAe,gBAAgB,CAAA"}
|
package/dist/util.d.ts
ADDED
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { TailwindConfig } from 'tailwindcss/tailwind-config';
|
|
2
|
+
import { TailwindVersion, ThemeMap } from './types';
|
|
3
|
+
/**
|
|
4
|
+
* the key "default" or "DEFAULT" has special meaning and dropped from class name
|
|
5
|
+
*
|
|
6
|
+
* @see https://tailwindcss.com/docs/upgrading-to-v2#update-default-theme-keys-to-default
|
|
7
|
+
*/
|
|
8
|
+
export declare function getDefaultKeyName(version: TailwindVersion): "DEFAULT" | "default";
|
|
9
|
+
export declare function getVariantOption(version: TailwindVersion): Partial<TailwindConfig>;
|
|
10
|
+
export declare function assertAllThemeHaveSameKeys(themeMap: ThemeMap): void;
|
|
11
|
+
export declare function mapKeys<V, K extends string>(object: Record<string, V>, callback: (key: string) => K): Record<K, V>;
|
|
12
|
+
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>;
|
|
13
|
+
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>;
|
|
14
|
+
export declare function filterObject<Source, Dest extends Source>(source: Record<string, Source>, fn: (value: Source) => value is Dest): Record<string, Dest>;
|
|
15
|
+
export declare function camelToKebab(value: string): string;
|
|
16
|
+
//# sourceMappingURL=util.d.ts.map
|
|
@@ -0,0 +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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@charcoal-ui/tailwind-config",
|
|
3
|
-
"version": "1.0.0
|
|
3
|
+
"version": "1.0.0",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"source": "./src/index.ts",
|
|
@@ -26,10 +26,9 @@
|
|
|
26
26
|
"typescript": "^4.5.5"
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@charcoal-ui/foundation": "^1.0.0
|
|
30
|
-
"@charcoal-ui/
|
|
31
|
-
"@charcoal-ui/
|
|
32
|
-
"@charcoal-ui/utils": "^1.0.0-alpha.1"
|
|
29
|
+
"@charcoal-ui/foundation": "^1.0.0",
|
|
30
|
+
"@charcoal-ui/theme": "^1.0.0",
|
|
31
|
+
"@charcoal-ui/utils": "^1.0.0"
|
|
33
32
|
},
|
|
34
33
|
"peerDependencies": {
|
|
35
34
|
"csstype": ">=3.0.0",
|
|
@@ -43,5 +42,5 @@
|
|
|
43
42
|
"publishConfig": {
|
|
44
43
|
"access": "public"
|
|
45
44
|
},
|
|
46
|
-
"gitHead": "
|
|
45
|
+
"gitHead": "addc6d8f443865a8b56327ef9a4ff2e69942a30b"
|
|
47
46
|
}
|