mpx-tailwindcss-preset
Version:
mpx-tailwindcss-preset
1,378 lines (1,360 loc) • 35.5 kB
JavaScript
var createPlugin$3 = {};
var createPlugin$2 = {};
Object.defineProperty(createPlugin$2, "__esModule", {
value: true
});
createPlugin$2.default = void 0;
function createPlugin$1(plugin, config) {
return {
handler: plugin,
config
};
}
createPlugin$1.withOptions = function(pluginFunction, configFunction = ()=>({
})
) {
const optionsFunction = function(options) {
return {
__options: options,
handler: pluginFunction(options),
config: configFunction(options)
};
};
optionsFunction.__isOptionsFunction = true;
// Expose plugin dependencies so that `object-hash` returns a different
// value if anything here changes, to ensure a rebuild is triggered.
optionsFunction.__pluginFunction = pluginFunction;
optionsFunction.__configFunction = configFunction;
return optionsFunction;
};
var _default$2 = createPlugin$1;
createPlugin$2.default = _default$2;
Object.defineProperty(createPlugin$3, "__esModule", {
value: true
});
createPlugin$3.default = void 0;
var _createPlugin = _interopRequireDefault$1(createPlugin$2);
function _interopRequireDefault$1(obj) {
return obj && obj.__esModule ? obj : {
default: obj
};
}
var _default$1 = _createPlugin.default;
createPlugin$3.default = _default$1;
let createPlugin = createPlugin$3;
var plugin = (createPlugin.__esModule ? createPlugin : { default: createPlugin }).default;
const corePlugins = [
// #endregion 基础样式
// 'preflight',
// #endregion
// #region 布局/容器
// 'container',
// #endregion
// #region 不支持 :not 选择器
// 参考 https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html
// 'space',
// 'divideWidth',
// 'divideColor',
// 'divideStyle',
// 'divideOpacity',
// #endregion
// #region 可访问性 :屏幕阅读器
// 'accessibility',
// #endregion
'appearance',
'backgroundAttachment',
'backgroundClip',
'backgroundColor',
'backgroundImage',
'gradientColorStops',
'backgroundOpacity',
'backgroundPosition',
'backgroundRepeat',
'backgroundSize',
'borderCollapse',
'borderColor',
'borderOpacity',
'borderRadius',
'borderStyle',
'borderWidth',
'boxSizing',
'cursor',
'display',
'flexDirection',
'flexWrap',
// #region 盒对齐/Grid相关
// 'placeItems',
// 'placeContent',
// 'placeSelf',
// #endregion
'alignItems',
'alignContent',
'alignSelf',
'justifyItems',
'justifyContent',
'justifySelf',
'flex',
'flexGrow',
'flexShrink',
'order',
'float',
'clear',
// #region 小程序字体需要js额外加载，这里先不用 fontFamily
// 'fontFamily',
// #endregion
'fontWeight',
// 'height',
'fontSize',
'lineHeight',
'listStylePosition',
'listStyleType',
// 'margin',
// 'maxHeight',
'maxWidth',
'minHeight',
'minWidth',
'objectFit',
'objectPosition',
'opacity',
'outline',
'overflow',
'overscrollBehavior',
// 'padding',
'placeholderColor',
'placeholderOpacity',
'pointerEvents',
'position',
// 'inset', // 用不着
'resize',
// 'boxShadow', // *,::before,::after 限制
// 'ringWidth', // *,::before,::after 限制
// 'ringOffsetColor',
// 'ringOffsetWidth',
// 'ringColor',
// 'ringOpacity',
// #region SVG 相关
// 'fill',
// 'stroke',
// 'strokeWidth',
// #endregion
'tableLayout',
'textAlign',
'textColor',
'textOpacity',
'textOverflow',
'fontStyle',
'textTransform',
'textDecoration',
'fontSmoothing',
'fontVariantNumeric',
'letterSpacing',
'userSelect',
'verticalAlign',
'visibility',
'whitespace',
'wordBreak',
// 'width',
'zIndex',
// #region 网格布局(小程序自己的兼容问题还没搞定)
// 'gap',
// 'gridAutoFlow',
// 'gridTemplateColumns',
// 'gridAutoColumns',
// 'gridColumn',
// 'gridColumnStart',
// 'gridColumnEnd',
// 'gridTemplateRows',
// 'gridAutoRows',
// 'gridRow',
// 'gridRowStart',
// 'gridRowEnd',
// #endregion
'transform',
'transformOrigin',
'scale',
'rotate',
// 'translate', 没啥用
'skew',
'transitionProperty',
'transitionTimingFunction',
'transitionDuration',
'transitionDelay',
'animation'
];
const escapeMap = {
'/': '-div-',
'.': '-dot-'
};
/**
* 转义工作
*/
function escape(str) {
return Object.entries(escapeMap).reduce((acc, [key, value]) => {
return acc.replace(key, value);
}, str);
}
var defaultConfig$1 = {};
var cloneDeep$1 = {};
Object.defineProperty(cloneDeep$1, "__esModule", {
value: true
});
cloneDeep$1.cloneDeep = cloneDeep;
function cloneDeep(value) {
if (Array.isArray(value)) {
return value.map((child)=>cloneDeep(child)
);
}
if (typeof value === 'object' && value !== null) {
return Object.fromEntries(Object.entries(value).map(([k, v])=>[
k,
cloneDeep(v)
]
));
}
return value;
}
var defaultConfig_stub = {
content: [],
presets: [],
darkMode: 'media', // or 'class'
theme: {
screens: {
sm: '640px',
md: '768px',
lg: '1024px',
xl: '1280px',
'2xl': '1536px',
},
colors: ({ colors }) => ({
inherit: colors.inherit,
current: colors.current,
transparent: colors.transparent,
black: colors.black,
white: colors.white,
slate: colors.slate,
gray: colors.gray,
zinc: colors.zinc,
neutral: colors.neutral,
stone: colors.stone,
red: colors.red,
orange: colors.orange,
amber: colors.amber,
yellow: colors.yellow,
lime: colors.lime,
green: colors.green,
emerald: colors.emerald,
teal: colors.teal,
cyan: colors.cyan,
sky: colors.sky,
blue: colors.blue,
indigo: colors.indigo,
violet: colors.violet,
purple: colors.purple,
fuchsia: colors.fuchsia,
pink: colors.pink,
rose: colors.rose,
}),
columns: {
auto: 'auto',
1: '1',
2: '2',
3: '3',
4: '4',
5: '5',
6: '6',
7: '7',
8: '8',
9: '9',
10: '10',
11: '11',
12: '12',
'3xs': '16rem',
'2xs': '18rem',
xs: '20rem',
sm: '24rem',
md: '28rem',
lg: '32rem',
xl: '36rem',
'2xl': '42rem',
'3xl': '48rem',
'4xl': '56rem',
'5xl': '64rem',
'6xl': '72rem',
'7xl': '80rem',
},
spacing: {
px: '1px',
0: '0px',
0.5: '0.125rem',
1: '0.25rem',
1.5: '0.375rem',
2: '0.5rem',
2.5: '0.625rem',
3: '0.75rem',
3.5: '0.875rem',
4: '1rem',
5: '1.25rem',
6: '1.5rem',
7: '1.75rem',
8: '2rem',
9: '2.25rem',
10: '2.5rem',
11: '2.75rem',
12: '3rem',
14: '3.5rem',
16: '4rem',
20: '5rem',
24: '6rem',
28: '7rem',
32: '8rem',
36: '9rem',
40: '10rem',
44: '11rem',
48: '12rem',
52: '13rem',
56: '14rem',
60: '15rem',
64: '16rem',
72: '18rem',
80: '20rem',
96: '24rem',
},
animation: {
none: 'none',
spin: 'spin 1s linear infinite',
ping: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite',
pulse: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
bounce: 'bounce 1s infinite',
},
aspectRatio: {
auto: 'auto',
square: '1 / 1',
video: '16 / 9',
},
backdropBlur: ({ theme }) => theme('blur'),
backdropBrightness: ({ theme }) => theme('brightness'),
backdropContrast: ({ theme }) => theme('contrast'),
backdropGrayscale: ({ theme }) => theme('grayscale'),
backdropHueRotate: ({ theme }) => theme('hueRotate'),
backdropInvert: ({ theme }) => theme('invert'),
backdropOpacity: ({ theme }) => theme('opacity'),
backdropSaturate: ({ theme }) => theme('saturate'),
backdropSepia: ({ theme }) => theme('sepia'),
backgroundColor: ({ theme }) => theme('colors'),
backgroundImage: {
none: 'none',
'gradient-to-t': 'linear-gradient(to top, var(--tw-gradient-stops))',
'gradient-to-tr': 'linear-gradient(to top right, var(--tw-gradient-stops))',
'gradient-to-r': 'linear-gradient(to right, var(--tw-gradient-stops))',
'gradient-to-br': 'linear-gradient(to bottom right, var(--tw-gradient-stops))',
'gradient-to-b': 'linear-gradient(to bottom, var(--tw-gradient-stops))',
'gradient-to-bl': 'linear-gradient(to bottom left, var(--tw-gradient-stops))',
'gradient-to-l': 'linear-gradient(to left, var(--tw-gradient-stops))',
'gradient-to-tl': 'linear-gradient(to top left, var(--tw-gradient-stops))',
},
backgroundOpacity: ({ theme }) => theme('opacity'),
backgroundPosition: {
bottom: 'bottom',
center: 'center',
left: 'left',
'left-bottom': 'left bottom',
'left-top': 'left top',
right: 'right',
'right-bottom': 'right bottom',
'right-top': 'right top',
top: 'top',
},
backgroundSize: {
auto: 'auto',
cover: 'cover',
contain: 'contain',
},
blur: {
0: '0',
none: '0',
sm: '4px',
DEFAULT: '8px',
md: '12px',
lg: '16px',
xl: '24px',
'2xl': '40px',
'3xl': '64px',
},
brightness: {
0: '0',
50: '.5',
75: '.75',
90: '.9',
95: '.95',
100: '1',
105: '1.05',
110: '1.1',
125: '1.25',
150: '1.5',
200: '2',
},
borderColor: ({ theme }) => ({
...theme('colors'),
DEFAULT: theme('colors.gray.200', 'currentColor'),
}),
borderOpacity: ({ theme }) => theme('opacity'),
borderRadius: {
none: '0px',
sm: '0.125rem',
DEFAULT: '0.25rem',
md: '0.375rem',
lg: '0.5rem',
xl: '0.75rem',
'2xl': '1rem',
'3xl': '1.5rem',
full: '9999px',
},
borderWidth: {
DEFAULT: '1px',
0: '0px',
2: '2px',
4: '4px',
8: '8px',
},
boxShadow: {
sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
DEFAULT: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
'2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
none: 'none',
},
boxShadowColor: ({ theme }) => theme('colors'),
caretColor: ({ theme }) => theme('colors'),
accentColor: ({ theme }) => ({
...theme('colors'),
auto: 'auto',
}),
contrast: {
0: '0',
50: '.5',
75: '.75',
100: '1',
125: '1.25',
150: '1.5',
200: '2',
},
container: {},
content: {
none: 'none',
},
cursor: {
auto: 'auto',
default: 'default',
pointer: 'pointer',
wait: 'wait',
text: 'text',
move: 'move',
help: 'help',
'not-allowed': 'not-allowed',
none: 'none',
'context-menu': 'context-menu',
progress: 'progress',
cell: 'cell',
crosshair: 'crosshair',
'vertical-text': 'vertical-text',
alias: 'alias',
copy: 'copy',
'no-drop': 'no-drop',
grab: 'grab',
grabbing: 'grabbing',
'all-scroll': 'all-scroll',
'col-resize': 'col-resize',
'row-resize': 'row-resize',
'n-resize': 'n-resize',
'e-resize': 'e-resize',
's-resize': 's-resize',
'w-resize': 'w-resize',
'ne-resize': 'ne-resize',
'nw-resize': 'nw-resize',
'se-resize': 'se-resize',
'sw-resize': 'sw-resize',
'ew-resize': 'ew-resize',
'ns-resize': 'ns-resize',
'nesw-resize': 'nesw-resize',
'nwse-resize': 'nwse-resize',
'zoom-in': 'zoom-in',
'zoom-out': 'zoom-out',
},
divideColor: ({ theme }) => theme('borderColor'),
divideOpacity: ({ theme }) => theme('borderOpacity'),
divideWidth: ({ theme }) => theme('borderWidth'),
dropShadow: {
sm: '0 1px 1px rgb(0 0 0 / 0.05)',
DEFAULT: ['0 1px 2px rgb(0 0 0 / 0.1)', '0 1px 1px rgb(0 0 0 / 0.06)'],
md: ['0 4px 3px rgb(0 0 0 / 0.07)', '0 2px 2px rgb(0 0 0 / 0.06)'],
lg: ['0 10px 8px rgb(0 0 0 / 0.04)', '0 4px 3px rgb(0 0 0 / 0.1)'],
xl: ['0 20px 13px rgb(0 0 0 / 0.03)', '0 8px 5px rgb(0 0 0 / 0.08)'],
'2xl': '0 25px 25px rgb(0 0 0 / 0.15)',
none: '0 0 #0000',
},
fill: ({ theme }) => theme('colors'),
grayscale: {
0: '0',
DEFAULT: '100%',
},
hueRotate: {
0: '0deg',
15: '15deg',
30: '30deg',
60: '60deg',
90: '90deg',
180: '180deg',
},
invert: {
0: '0',
DEFAULT: '100%',
},
flex: {
1: '1 1 0%',
auto: '1 1 auto',
initial: '0 1 auto',
none: 'none',
},
flexBasis: ({ theme }) => ({
auto: 'auto',
...theme('spacing'),
'1/2': '50%',
'1/3': '33.333333%',
'2/3': '66.666667%',
'1/4': '25%',
'2/4': '50%',
'3/4': '75%',
'1/5': '20%',
'2/5': '40%',
'3/5': '60%',
'4/5': '80%',
'1/6': '16.666667%',
'2/6': '33.333333%',
'3/6': '50%',
'4/6': '66.666667%',
'5/6': '83.333333%',
'1/12': '8.333333%',
'2/12': '16.666667%',
'3/12': '25%',
'4/12': '33.333333%',
'5/12': '41.666667%',
'6/12': '50%',
'7/12': '58.333333%',
'8/12': '66.666667%',
'9/12': '75%',
'10/12': '83.333333%',
'11/12': '91.666667%',
full: '100%',
}),
flexGrow: {
0: '0',
DEFAULT: '1',
},
flexShrink: {
0: '0',
DEFAULT: '1',
},
fontFamily: {
sans: [
'ui-sans-serif',
'system-ui',
'-apple-system',
'BlinkMacSystemFont',
'"Segoe UI"',
'Roboto',
'"Helvetica Neue"',
'Arial',
'"Noto Sans"',
'sans-serif',
'"Apple Color Emoji"',
'"Segoe UI Emoji"',
'"Segoe UI Symbol"',
'"Noto Color Emoji"',
],
serif: ['ui-serif', 'Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'],
mono: [
'ui-monospace',
'SFMono-Regular',
'Menlo',
'Monaco',
'Consolas',
'"Liberation Mono"',
'"Courier New"',
'monospace',
],
},
fontSize: {
xs: ['0.75rem', { lineHeight: '1rem' }],
sm: ['0.875rem', { lineHeight: '1.25rem' }],
base: ['1rem', { lineHeight: '1.5rem' }],
lg: ['1.125rem', { lineHeight: '1.75rem' }],
xl: ['1.25rem', { lineHeight: '1.75rem' }],
'2xl': ['1.5rem', { lineHeight: '2rem' }],
'3xl': ['1.875rem', { lineHeight: '2.25rem' }],
'4xl': ['2.25rem', { lineHeight: '2.5rem' }],
'5xl': ['3rem', { lineHeight: '1' }],
'6xl': ['3.75rem', { lineHeight: '1' }],
'7xl': ['4.5rem', { lineHeight: '1' }],
'8xl': ['6rem', { lineHeight: '1' }],
'9xl': ['8rem', { lineHeight: '1' }],
},
fontWeight: {
thin: '100',
extralight: '200',
light: '300',
normal: '400',
medium: '500',
semibold: '600',
bold: '700',
extrabold: '800',
black: '900',
},
gap: ({ theme }) => theme('spacing'),
gradientColorStops: ({ theme }) => theme('colors'),
gridAutoColumns: {
auto: 'auto',
min: 'min-content',
max: 'max-content',
fr: 'minmax(0, 1fr)',
},
gridAutoRows: {
auto: 'auto',
min: 'min-content',
max: 'max-content',
fr: 'minmax(0, 1fr)',
},
gridColumn: {
auto: 'auto',
'span-1': 'span 1 / span 1',
'span-2': 'span 2 / span 2',
'span-3': 'span 3 / span 3',
'span-4': 'span 4 / span 4',
'span-5': 'span 5 / span 5',
'span-6': 'span 6 / span 6',
'span-7': 'span 7 / span 7',
'span-8': 'span 8 / span 8',
'span-9': 'span 9 / span 9',
'span-10': 'span 10 / span 10',
'span-11': 'span 11 / span 11',
'span-12': 'span 12 / span 12',
'span-full': '1 / -1',
},
gridColumnEnd: {
auto: 'auto',
1: '1',
2: '2',
3: '3',
4: '4',
5: '5',
6: '6',
7: '7',
8: '8',
9: '9',
10: '10',
11: '11',
12: '12',
13: '13',
},
gridColumnStart: {
auto: 'auto',
1: '1',
2: '2',
3: '3',
4: '4',
5: '5',
6: '6',
7: '7',
8: '8',
9: '9',
10: '10',
11: '11',
12: '12',
13: '13',
},
gridRow: {
auto: 'auto',
'span-1': 'span 1 / span 1',
'span-2': 'span 2 / span 2',
'span-3': 'span 3 / span 3',
'span-4': 'span 4 / span 4',
'span-5': 'span 5 / span 5',
'span-6': 'span 6 / span 6',
'span-full': '1 / -1',
},
gridRowStart: {
auto: 'auto',
1: '1',
2: '2',
3: '3',
4: '4',
5: '5',
6: '6',
7: '7',
},
gridRowEnd: {
auto: 'auto',
1: '1',
2: '2',
3: '3',
4: '4',
5: '5',
6: '6',
7: '7',
},
gridTemplateColumns: {
none: 'none',
1: 'repeat(1, minmax(0, 1fr))',
2: 'repeat(2, minmax(0, 1fr))',
3: 'repeat(3, minmax(0, 1fr))',
4: 'repeat(4, minmax(0, 1fr))',
5: 'repeat(5, minmax(0, 1fr))',
6: 'repeat(6, minmax(0, 1fr))',
7: 'repeat(7, minmax(0, 1fr))',
8: 'repeat(8, minmax(0, 1fr))',
9: 'repeat(9, minmax(0, 1fr))',
10: 'repeat(10, minmax(0, 1fr))',
11: 'repeat(11, minmax(0, 1fr))',
12: 'repeat(12, minmax(0, 1fr))',
},
gridTemplateRows: {
none: 'none',
1: 'repeat(1, minmax(0, 1fr))',
2: 'repeat(2, minmax(0, 1fr))',
3: 'repeat(3, minmax(0, 1fr))',
4: 'repeat(4, minmax(0, 1fr))',
5: 'repeat(5, minmax(0, 1fr))',
6: 'repeat(6, minmax(0, 1fr))',
},
height: ({ theme }) => ({
auto: 'auto',
...theme('spacing'),
'1/2': '50%',
'1/3': '33.333333%',
'2/3': '66.666667%',
'1/4': '25%',
'2/4': '50%',
'3/4': '75%',
'1/5': '20%',
'2/5': '40%',
'3/5': '60%',
'4/5': '80%',
'1/6': '16.666667%',
'2/6': '33.333333%',
'3/6': '50%',
'4/6': '66.666667%',
'5/6': '83.333333%',
full: '100%',
screen: '100vh',
min: 'min-content',
max: 'max-content',
fit: 'fit-content',
}),
inset: ({ theme }) => ({
auto: 'auto',
...theme('spacing'),
'1/2': '50%',
'1/3': '33.333333%',
'2/3': '66.666667%',
'1/4': '25%',
'2/4': '50%',
'3/4': '75%',
full: '100%',
}),
keyframes: {
spin: {
to: {
transform: 'rotate(360deg)',
},
},
ping: {
'75%, 100%': {
transform: 'scale(2)',
opacity: '0',
},
},
pulse: {
'50%': {
opacity: '.5',
},
},
bounce: {
'0%, 100%': {
transform: 'translateY(-25%)',
animationTimingFunction: 'cubic-bezier(0.8,0,1,1)',
},
'50%': {
transform: 'none',
animationTimingFunction: 'cubic-bezier(0,0,0.2,1)',
},
},
},
letterSpacing: {
tighter: '-0.05em',
tight: '-0.025em',
normal: '0em',
wide: '0.025em',
wider: '0.05em',
widest: '0.1em',
},
lineHeight: {
none: '1',
tight: '1.25',
snug: '1.375',
normal: '1.5',
relaxed: '1.625',
loose: '2',
3: '.75rem',
4: '1rem',
5: '1.25rem',
6: '1.5rem',
7: '1.75rem',
8: '2rem',
9: '2.25rem',
10: '2.5rem',
},
listStyleType: {
none: 'none',
disc: 'disc',
decimal: 'decimal',
},
margin: ({ theme }) => ({
auto: 'auto',
...theme('spacing'),
}),
maxHeight: ({ theme }) => ({
...theme('spacing'),
full: '100%',
screen: '100vh',
min: 'min-content',
max: 'max-content',
fit: 'fit-content',
}),
maxWidth: ({ theme, breakpoints }) => ({
none: 'none',
0: '0rem',
xs: '20rem',
sm: '24rem',
md: '28rem',
lg: '32rem',
xl: '36rem',
'2xl': '42rem',
'3xl': '48rem',
'4xl': '56rem',
'5xl': '64rem',
'6xl': '72rem',
'7xl': '80rem',
full: '100%',
min: 'min-content',
max: 'max-content',
fit: 'fit-content',
prose: '65ch',
...breakpoints(theme('screens')),
}),
minHeight: {
0: '0px',
full: '100%',
screen: '100vh',
min: 'min-content',
max: 'max-content',
fit: 'fit-content',
},
minWidth: {
0: '0px',
full: '100%',
min: 'min-content',
max: 'max-content',
fit: 'fit-content',
},
objectPosition: {
bottom: 'bottom',
center: 'center',
left: 'left',
'left-bottom': 'left bottom',
'left-top': 'left top',
right: 'right',
'right-bottom': 'right bottom',
'right-top': 'right top',
top: 'top',
},
opacity: {
0: '0',
5: '0.05',
10: '0.1',
20: '0.2',
25: '0.25',
30: '0.3',
40: '0.4',
50: '0.5',
60: '0.6',
70: '0.7',
75: '0.75',
80: '0.8',
90: '0.9',
95: '0.95',
100: '1',
},
order: {
first: '-9999',
last: '9999',
none: '0',
1: '1',
2: '2',
3: '3',
4: '4',
5: '5',
6: '6',
7: '7',
8: '8',
9: '9',
10: '10',
11: '11',
12: '12',
},
padding: ({ theme }) => theme('spacing'),
placeholderColor: ({ theme }) => theme('colors'),
placeholderOpacity: ({ theme }) => theme('opacity'),
outlineColor: ({ theme }) => theme('colors'),
outlineOffset: {
0: '0px',
1: '1px',
2: '2px',
4: '4px',
8: '8px',
},
outlineWidth: {
0: '0px',
1: '1px',
2: '2px',
4: '4px',
8: '8px',
},
ringColor: ({ theme }) => ({
DEFAULT: theme('colors.blue.500', '#3b82f6'),
...theme('colors'),
}),
ringOffsetColor: ({ theme }) => theme('colors'),
ringOffsetWidth: {
0: '0px',
1: '1px',
2: '2px',
4: '4px',
8: '8px',
},
ringOpacity: ({ theme }) => ({
DEFAULT: '0.5',
...theme('opacity'),
}),
ringWidth: {
DEFAULT: '3px',
0: '0px',
1: '1px',
2: '2px',
4: '4px',
8: '8px',
},
rotate: {
0: '0deg',
1: '1deg',
2: '2deg',
3: '3deg',
6: '6deg',
12: '12deg',
45: '45deg',
90: '90deg',
180: '180deg',
},
saturate: {
0: '0',
50: '.5',
100: '1',
150: '1.5',
200: '2',
},
scale: {
0: '0',
50: '.5',
75: '.75',
90: '.9',
95: '.95',
100: '1',
105: '1.05',
110: '1.1',
125: '1.25',
150: '1.5',
},
scrollMargin: ({ theme }) => ({
...theme('spacing'),
}),
scrollPadding: ({ theme }) => theme('spacing'),
sepia: {
0: '0',
DEFAULT: '100%',
},
skew: {
0: '0deg',
1: '1deg',
2: '2deg',
3: '3deg',
6: '6deg',
12: '12deg',
},
space: ({ theme }) => ({
...theme('spacing'),
}),
stroke: ({ theme }) => theme('colors'),
strokeWidth: {
0: '0',
1: '1',
2: '2',
},
textColor: ({ theme }) => theme('colors'),
textDecorationColor: ({ theme }) => theme('colors'),
textDecorationThickness: {
auto: 'auto',
'from-font': 'from-font',
0: '0px',
1: '1px',
2: '2px',
4: '4px',
8: '8px',
},
textUnderlineOffset: {
auto: 'auto',
0: '0px',
1: '1px',
2: '2px',
4: '4px',
8: '8px',
},
textIndent: ({ theme }) => ({
...theme('spacing'),
}),
textOpacity: ({ theme }) => theme('opacity'),
transformOrigin: {
center: 'center',
top: 'top',
'top-right': 'top right',
right: 'right',
'bottom-right': 'bottom right',
bottom: 'bottom',
'bottom-left': 'bottom left',
left: 'left',
'top-left': 'top left',
},
transitionDelay: {
75: '75ms',
100: '100ms',
150: '150ms',
200: '200ms',
300: '300ms',
500: '500ms',
700: '700ms',
1000: '1000ms',
},
transitionDuration: {
DEFAULT: '150ms',
75: '75ms',
100: '100ms',
150: '150ms',
200: '200ms',
300: '300ms',
500: '500ms',
700: '700ms',
1000: '1000ms',
},
transitionProperty: {
none: 'none',
all: 'all',
DEFAULT:
'color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter',
colors: 'color, background-color, border-color, text-decoration-color, fill, stroke',
opacity: 'opacity',
shadow: 'box-shadow',
transform: 'transform',
},
transitionTimingFunction: {
DEFAULT: 'cubic-bezier(0.4, 0, 0.2, 1)',
linear: 'linear',
in: 'cubic-bezier(0.4, 0, 1, 1)',
out: 'cubic-bezier(0, 0, 0.2, 1)',
'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
},
translate: ({ theme }) => ({
...theme('spacing'),
'1/2': '50%',
'1/3': '33.333333%',
'2/3': '66.666667%',
'1/4': '25%',
'2/4': '50%',
'3/4': '75%',
full: '100%',
}),
width: ({ theme }) => ({
auto: 'auto',
...theme('spacing'),
'1/2': '50%',
'1/3': '33.333333%',
'2/3': '66.666667%',
'1/4': '25%',
'2/4': '50%',
'3/4': '75%',
'1/5': '20%',
'2/5': '40%',
'3/5': '60%',
'4/5': '80%',
'1/6': '16.666667%',
'2/6': '33.333333%',
'3/6': '50%',
'4/6': '66.666667%',
'5/6': '83.333333%',
'1/12': '8.333333%',
'2/12': '16.666667%',
'3/12': '25%',
'4/12': '33.333333%',
'5/12': '41.666667%',
'6/12': '50%',
'7/12': '58.333333%',
'8/12': '66.666667%',
'9/12': '75%',
'10/12': '83.333333%',
'11/12': '91.666667%',
full: '100%',
screen: '100vw',
min: 'min-content',
max: 'max-content',
fit: 'fit-content',
}),
willChange: {
auto: 'auto',
scroll: 'scroll-position',
contents: 'contents',
transform: 'transform',
},
zIndex: {
auto: 'auto',
0: '0',
10: '10',
20: '20',
30: '30',
40: '40',
50: '50',
},
},
variantOrder: [
'first',
'last',
'odd',
'even',
'visited',
'checked',
'empty',
'read-only',
'group-hover',
'group-focus',
'focus-within',
'hover',
'focus',
'focus-visible',
'active',
'disabled',
],
plugins: [],
};
Object.defineProperty(defaultConfig$1, "__esModule", {
value: true
});
defaultConfig$1.default = void 0;
var _cloneDeep = cloneDeep$1;
var _defaultConfigStub = _interopRequireDefault(defaultConfig_stub);
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : {
default: obj
};
}
var _default = (_cloneDeep).cloneDeep(_defaultConfigStub.default);
defaultConfig$1.default = _default;
let defaultConfig = defaultConfig$1;
var defaultConfig_1 = (defaultConfig.__esModule ? defaultConfig : { default: defaultConfig }).default;
const defaultOptions = {
rootValue: 32,
unitPrecision: 5,
minRemValue: 0,
rem2rpx: true
};
function toFixed(number, precision) {
const multiplier = Math.pow(10, precision + 1);
const wholeNumber = Math.floor(number * multiplier);
return (Math.round(wholeNumber / 10) * 10) / multiplier;
}
function createRemReplace(rootValue, unitPrecision, minRemValue) {
return (m, $1) => {
if (!$1)
return m;
const rem = parseFloat($1);
if (rem < minRemValue)
return m;
const fixedVal = toFixed(rem * rootValue, unitPrecision);
return fixedVal === 0 ? '0' : fixedVal + 'rpx';
};
}
function createRem2rpx(option) {
const remReplace = createRemReplace(option.rootValue, option.unitPrecision, option.minRemValue);
return (str) => {
const execArr = /(\d*\.?\d+) *rem/g.exec(str);
return execArr ? remReplace(str, execArr[1]) : str;
};
}
createRem2rpx(defaultOptions);
// this is a deep clone object
function ObjectValueMap(obj, fn) {
return Object.entries(obj).reduce((acc, [key, value], idx) => {
// @ts-ignore
acc[key] = fn(value, idx);
return acc;
}, {});
}
function createExpandThemeConfig(option) {
const opts = Object.assign({}, defaultOptions, option);
if (opts.rem2rpx) {
const rem2rpx = createRem2rpx(opts);
const replacer = (value) => {
return rem2rpx(value);
};
return {
// spacing
spacing: ObjectValueMap(defaultConfig_1.theme.spacing, replacer),
// borderRadius
borderRadius: ObjectValueMap(defaultConfig_1.theme.borderRadius, replacer),
// fontSize // xs: ['0.75rem', { lineHeight: '1rem' }],
fontSize: ObjectValueMap(defaultConfig_1.theme.fontSize, (value) => {
const [fontSize, { lineHeight }] = value;
return [rem2rpx(fontSize), { lineHeight: rem2rpx(lineHeight) }];
}),
// lineHeight
lineHeight: ObjectValueMap(defaultConfig_1.theme.lineHeight, replacer),
// maxWidth
maxWidth: {
none: 'none',
0: '0',
full: '100%',
min: 'min-content',
max: 'max-content'
}
};
}
else {
return {
// spacing
spacing: defaultConfig_1.theme.spacing,
// borderRadius
borderRadius: defaultConfig_1.theme.borderRadius,
// fontSize // xs: ['0.75rem', { lineHeight: '1rem' }],
fontSize: defaultConfig_1.theme.fontSize,
// lineHeight
lineHeight: defaultConfig_1.theme.lineHeight,
// maxWidth
maxWidth: {
none: 'none',
0: '0',
full: '100%',
min: 'min-content',
max: 'max-content'
}
};
}
}
createExpandThemeConfig();
const emptyVariants = corePlugins.reduce((acc, cur) => {
acc[cur] = [];
return acc;
}, {});
function createPreset(option) {
const expandThemeConfig = createExpandThemeConfig(option);
return {
// 中文配置文档：https://www.tailwindcss.cn/docs/configuration
// 英文配置文档：https://tailwindcss.com/docs/configuration
// TODO：V3内置JIT，微信小程序会把 w-[750rpx] 中的中括号强制去除
// 如果 development 下,wxss过大，可以一直开启 enabled
// 默认在 NODE_ENV=production 下开启
// enabled: process.env.NODE_ENV === 'production',
// content: ['./dist/wx/**/*.wxml'],
important: true,
corePlugins,
theme: Object.assign(Object.assign({ screens: {} }, expandThemeConfig), { extend: {} }),
variants: Object.assign(Object.assign({}, emptyVariants), { extend: {} }),
plugins: [
plugin(function ({ addUtilities, e, config }) {
// delve(object, keypath, [default]) 类似于get，找不到 'theme.height' 会从 defaultConfig里面找
function escapeUtilities(path, prefix, attrKey) {
const utilities = Object.entries(config(path)).reduce((acc, [key, value]) => {
if (path === 'theme.margin' && key[0] === '-') {
// do continue
// ignore -m-x
return acc;
}
const str = escape(`${prefix}${key}`);
if (typeof attrKey === 'function') {
const fn = attrKey;
acc.push({
[`.${e(str)}`]: fn(value)
});
}
else {
acc.push({
[`.${e(str)}`]: {
[attrKey]: `${value}`
}
});
}
return acc;
}, []);
addUtilities(utilities);
}
escapeUtilities('theme.height', 'h-', 'height');
escapeUtilities('theme.margin', 'm-', 'margin');
escapeUtilities('theme.margin', 'my-', (value) => {
return {
'margin-top': `${value}`,
'margin-bottom': `${value}`
};
});
escapeUtilities('theme.margin', 'mx-', (value) => {
return {
'margin-left': `${value}`,
'margin-right': `${value}`
};
});
escapeUtilities('theme.margin', 'mt-', 'margin-top');
escapeUtilities('theme.margin', 'mr-', 'margin-right');
escapeUtilities('theme.margin', 'mb-', 'margin-bottom');
escapeUtilities('theme.margin', 'ml-', 'margin-left');
escapeUtilities('theme.maxHeight', 'max-h-', 'max-height');
escapeUtilities('theme.padding', 'p-', 'padding');
escapeUtilities('theme.padding', 'py-', (value) => {
return {
'padding-top': `${value}`,
'padding-bottom': `${value}`
};
});
escapeUtilities('theme.padding', 'px-', (value) => {
return {
'padding-left': `${value}`,
'padding-right': `${value}`
};
});
escapeUtilities('theme.padding', 'pt-', 'padding-top');
escapeUtilities('theme.padding', 'pr-', 'padding-right');
escapeUtilities('theme.padding', 'pb-', 'padding-bottom');
escapeUtilities('theme.padding', 'pl-', 'padding-left');
escapeUtilities('theme.width', 'w-', 'width');
})
]
};
}
// const config: TailwindConfig & { createPreset?: typeof createPreset } =
// config.createPreset = createPreset
var config = createPreset();
export { createPreset, config as defaultPreset };