mirror of
https://github.com/notion-enhancer/notion-enhancer.git
synced 2025-04-05 13:19:03 +00:00
2403 lines
67 KiB
JavaScript
2403 lines
67 KiB
JavaScript
/**
|
|
* Twind v0.16.16
|
|
* @license MIT
|
|
* @source https://unpkg.com/twind@0.16.16/twind.js?module
|
|
*/
|
|
|
|
// src/internal/util.ts
|
|
var includes = (value, search) => !!~value.indexOf(search);
|
|
var join = (parts, separator = '-') => parts.join(separator);
|
|
var joinTruthy = (parts, separator) => join(parts.filter(Boolean), separator);
|
|
var tail = (array, startIndex = 1) => array.slice(startIndex);
|
|
var identity = (value) => value;
|
|
var noop = () => {};
|
|
var capitalize = (value) => value[0].toUpperCase() + tail(value);
|
|
var hyphenate = (value) => value.replace(/[A-Z]/g, '-$&').toLowerCase();
|
|
var evalThunk = (value, context) => {
|
|
while (typeof value == 'function') {
|
|
value = value(context);
|
|
}
|
|
return value;
|
|
};
|
|
var ensureMaxSize = (map, max) => {
|
|
if (map.size > max) {
|
|
map.delete(map.keys().next().value);
|
|
}
|
|
};
|
|
var isCSSProperty = (key, value) =>
|
|
!includes('@:&', key[0]) && (includes('rg', (typeof value)[5]) || Array.isArray(value));
|
|
var merge = (target, source, context) =>
|
|
source
|
|
? Object.keys(source).reduce((target2, key) => {
|
|
const value = evalThunk(source[key], context);
|
|
if (isCSSProperty(key, value)) {
|
|
target2[hyphenate(key)] = value;
|
|
} else {
|
|
target2[key] =
|
|
key[0] == '@' && includes('figa', key[1])
|
|
? (target2[key] || []).concat(value)
|
|
: merge(target2[key] || {}, value, context);
|
|
}
|
|
return target2;
|
|
}, target)
|
|
: target;
|
|
var escape =
|
|
(typeof CSS !== 'undefined' && CSS.escape) ||
|
|
((className) =>
|
|
className.replace(/[!"'`*+.,;:\\/<=>?@#$%&^|~()[\]{}]/g, '\\$&').replace(/^\d/, '\\3$& '));
|
|
var buildMediaQuery = (screen) => {
|
|
if (!Array.isArray(screen)) {
|
|
screen = [screen];
|
|
}
|
|
return (
|
|
'@media ' +
|
|
join(
|
|
screen.map((screen2) => {
|
|
if (typeof screen2 == 'string') {
|
|
screen2 = { min: screen2 };
|
|
}
|
|
return (
|
|
screen2.raw ||
|
|
join(
|
|
Object.keys(screen2).map((feature) => `(${feature}-width:${screen2[feature]})`),
|
|
' and '
|
|
)
|
|
);
|
|
}),
|
|
','
|
|
)
|
|
);
|
|
};
|
|
var cyrb32 = (value) => {
|
|
for (var h = 9, index = value.length; index--; ) {
|
|
h = Math.imul(h ^ value.charCodeAt(index), 1597334677);
|
|
}
|
|
return 'tw-' + ((h ^ (h >>> 9)) >>> 0).toString(36);
|
|
};
|
|
var sortedInsertionIndex = (array, element) => {
|
|
for (var low = 0, high = array.length; low < high; ) {
|
|
const pivot = (high + low) >> 1;
|
|
if (array[pivot] <= element) {
|
|
low = pivot + 1;
|
|
} else {
|
|
high = pivot;
|
|
}
|
|
}
|
|
return high;
|
|
};
|
|
|
|
// src/twind/parse.ts
|
|
var groupings;
|
|
var rules;
|
|
var startGrouping = (value = '') => {
|
|
groupings.push(value);
|
|
return '';
|
|
};
|
|
var endGrouping = (isWhitespace) => {
|
|
groupings.length = Math.max(groupings.lastIndexOf('') + ~~isWhitespace, 0);
|
|
};
|
|
var onlyPrefixes = (s) => s && !includes('!:', s[0]);
|
|
var onlyVariants = (s) => s[0] == ':';
|
|
var addRule = (directive2, negate) => {
|
|
rules.push({
|
|
v: groupings.filter(onlyVariants),
|
|
d: directive2,
|
|
n: negate,
|
|
i: includes(groupings, '!'),
|
|
$: '',
|
|
});
|
|
};
|
|
var saveRule = (buffer) => {
|
|
const negate = buffer[0] == '-';
|
|
if (negate) {
|
|
buffer = tail(buffer);
|
|
}
|
|
const prefix = join(groupings.filter(onlyPrefixes));
|
|
addRule(buffer == '&' ? prefix : (prefix && prefix + '-') + buffer, negate);
|
|
return '';
|
|
};
|
|
var parseString = (token, isVariant) => {
|
|
let buffer = '';
|
|
for (let char, dynamic = false, position2 = 0; (char = token[position2++]); ) {
|
|
if (dynamic || char == '[') {
|
|
buffer += char;
|
|
dynamic = char != ']';
|
|
continue;
|
|
}
|
|
switch (char) {
|
|
case ':':
|
|
buffer =
|
|
buffer &&
|
|
startGrouping(':' + (token[position2] == char ? token[position2++] : '') + buffer);
|
|
break;
|
|
case '(':
|
|
buffer = buffer && startGrouping(buffer);
|
|
startGrouping();
|
|
break;
|
|
case '!':
|
|
startGrouping(char);
|
|
break;
|
|
case ')':
|
|
case ' ':
|
|
case ' ':
|
|
case '\n':
|
|
case '\r':
|
|
buffer = buffer && saveRule(buffer);
|
|
endGrouping(char !== ')');
|
|
break;
|
|
default:
|
|
buffer += char;
|
|
}
|
|
}
|
|
if (buffer) {
|
|
if (isVariant) {
|
|
startGrouping(':' + buffer);
|
|
} else if (buffer.slice(-1) == '-') {
|
|
startGrouping(buffer.slice(0, -1));
|
|
} else {
|
|
saveRule(buffer);
|
|
}
|
|
}
|
|
};
|
|
var parseGroupedToken = (token) => {
|
|
startGrouping();
|
|
parseToken(token);
|
|
endGrouping();
|
|
};
|
|
var parseGroup = (key, token) => {
|
|
if (token) {
|
|
startGrouping();
|
|
const isVariant = includes('tbu', (typeof token)[1]);
|
|
parseString(key, isVariant);
|
|
if (isVariant) {
|
|
parseGroupedToken(token);
|
|
}
|
|
endGrouping();
|
|
}
|
|
};
|
|
var parseToken = (token) => {
|
|
switch (typeof token) {
|
|
case 'string':
|
|
parseString(token);
|
|
break;
|
|
case 'function':
|
|
addRule(token);
|
|
break;
|
|
case 'object':
|
|
if (Array.isArray(token)) {
|
|
token.forEach(parseGroupedToken);
|
|
} else if (token) {
|
|
Object.keys(token).forEach((key) => {
|
|
parseGroup(key, token[key]);
|
|
});
|
|
}
|
|
}
|
|
};
|
|
var staticsCaches = new WeakMap();
|
|
var buildStatics = (strings) => {
|
|
let statics = staticsCaches.get(strings);
|
|
if (!statics) {
|
|
let slowModeIndex = NaN;
|
|
let buffer = '';
|
|
statics = strings.map((token, index) => {
|
|
if (
|
|
slowModeIndex !== slowModeIndex &&
|
|
(token.slice(-1) == '[' || includes(':-(', (strings[index + 1] || '')[0]))
|
|
) {
|
|
slowModeIndex = index;
|
|
}
|
|
if (index >= slowModeIndex) {
|
|
return (interpolation) => {
|
|
if (index == slowModeIndex) {
|
|
buffer = '';
|
|
}
|
|
buffer += token;
|
|
if (includes('rg', (typeof interpolation)[5])) {
|
|
buffer += interpolation;
|
|
} else if (interpolation) {
|
|
parseString(buffer);
|
|
buffer = '';
|
|
parseToken(interpolation);
|
|
}
|
|
if (index == strings.length - 1) {
|
|
parseString(buffer);
|
|
}
|
|
};
|
|
}
|
|
const staticRules = (rules = []);
|
|
parseString(token);
|
|
const activeGroupings = [...groupings];
|
|
rules = [];
|
|
return (interpolation) => {
|
|
rules.push(...staticRules);
|
|
groupings = [...activeGroupings];
|
|
if (interpolation) {
|
|
parseToken(interpolation);
|
|
}
|
|
};
|
|
});
|
|
staticsCaches.set(strings, statics);
|
|
}
|
|
return statics;
|
|
};
|
|
var parse = (tokens) => {
|
|
groupings = [];
|
|
rules = [];
|
|
if (Array.isArray(tokens[0]) && Array.isArray(tokens[0].raw)) {
|
|
buildStatics(tokens[0]).forEach((apply2, index) => apply2(tokens[index + 1]));
|
|
} else {
|
|
parseToken(tokens);
|
|
}
|
|
return rules;
|
|
};
|
|
|
|
// src/twind/directive.ts
|
|
var isFunctionFree;
|
|
var detectFunction = (key, value) => {
|
|
if (typeof value == 'function') {
|
|
isFunctionFree = false;
|
|
}
|
|
return value;
|
|
};
|
|
var stringify = (data) => {
|
|
isFunctionFree = true;
|
|
const key = JSON.stringify(data, detectFunction);
|
|
return isFunctionFree && key;
|
|
};
|
|
var cacheByFactory = new WeakMap();
|
|
var directive = (factory, data) => {
|
|
const key = stringify(data);
|
|
let directive2;
|
|
if (key) {
|
|
var cache = cacheByFactory.get(factory);
|
|
if (!cache) {
|
|
cacheByFactory.set(factory, (cache = new Map()));
|
|
}
|
|
directive2 = cache.get(key);
|
|
}
|
|
if (!directive2) {
|
|
directive2 = Object.defineProperty(
|
|
(params, context) => {
|
|
context = Array.isArray(params) ? context : params;
|
|
return evalThunk(factory(data, context), context);
|
|
},
|
|
'toJSON',
|
|
{
|
|
value: () => key || data,
|
|
}
|
|
);
|
|
|
|
if (cache) {
|
|
cache.set(key, directive2);
|
|
ensureMaxSize(cache, 1e4);
|
|
}
|
|
}
|
|
return directive2;
|
|
};
|
|
|
|
// src/twind/apply.ts
|
|
var applyFactory = (tokens, { css }) => css(parse(tokens));
|
|
var apply = (...tokens) => directive(applyFactory, tokens);
|
|
|
|
// src/twind/helpers.ts
|
|
var positions = (resolve) => (value, position2, prefix, suffix) => {
|
|
if (value) {
|
|
const properties = position2 && resolve(position2);
|
|
if (properties && properties.length > 0) {
|
|
return properties.reduce((declarations, property2) => {
|
|
declarations[joinTruthy([prefix, property2, suffix])] = value;
|
|
return declarations;
|
|
}, {});
|
|
}
|
|
}
|
|
};
|
|
var corners = /* @__PURE__ */ positions(
|
|
(key) =>
|
|
({
|
|
t: ['top-left', 'top-right'],
|
|
r: ['top-right', 'bottom-right'],
|
|
b: ['bottom-left', 'bottom-right'],
|
|
l: ['bottom-left', 'top-left'],
|
|
tl: ['top-left'],
|
|
tr: ['top-right'],
|
|
bl: ['bottom-left'],
|
|
br: ['bottom-right'],
|
|
}[key])
|
|
);
|
|
var expandEdges = (key) => {
|
|
const parts = ({ x: 'lr', y: 'tb' }[key] || key || '').split('').sort();
|
|
for (let index = parts.length; index--; ) {
|
|
if (
|
|
!(parts[index] = {
|
|
t: 'top',
|
|
r: 'right',
|
|
b: 'bottom',
|
|
l: 'left',
|
|
}[parts[index]])
|
|
)
|
|
return;
|
|
}
|
|
if (parts.length) return parts;
|
|
};
|
|
var edges = /* @__PURE__ */ positions(expandEdges);
|
|
|
|
// src/twind/plugins.ts
|
|
var _;
|
|
var __;
|
|
var $;
|
|
var toColumnsOrRows = (x) => (x == 'cols' ? 'columns' : 'rows');
|
|
var property = (property2) => (params, context, id) => ({
|
|
[property2]: id + ((_ = join(params)) && '-' + _),
|
|
});
|
|
|
|
var propertyValue = (property2, separator) => (params, context, id) =>
|
|
(_ = join(params, separator)) && {
|
|
[property2 || id]: _,
|
|
};
|
|
|
|
var themeProperty =
|
|
(section) =>
|
|
(params, { theme: theme2 }, id) =>
|
|
(_ = theme2(section || id, params)) && {
|
|
[section || id]: _,
|
|
};
|
|
|
|
var themePropertyFallback =
|
|
(section, separator) =>
|
|
(params, { theme: theme2 }, id) =>
|
|
(_ = theme2(section || id, params, join(params, separator))) && {
|
|
[section || id]: _,
|
|
};
|
|
|
|
var alias = (handler, name) => (params, context) => handler(params, context, name);
|
|
var display = property('display');
|
|
var position = property('position');
|
|
var textTransform = property('textTransform');
|
|
var textDecoration = property('textDecoration');
|
|
var fontStyle = property('fontStyle');
|
|
var fontVariantNumeric = (key) => (params, context, id) => ({
|
|
['--tw-' + key]: id,
|
|
fontVariantNumeric:
|
|
'var(--tw-ordinal,/*!*/ /*!*/) var(--tw-slashed-zero,/*!*/ /*!*/) var(--tw-numeric-figure,/*!*/ /*!*/) var(--tw-numeric-spacing,/*!*/ /*!*/) var(--tw-numeric-fraction,/*!*/ /*!*/)',
|
|
});
|
|
|
|
var inset = (params, { theme: theme2 }, id) => (_ = theme2('inset', params)) && { [id]: _ };
|
|
var opacityProperty = (params, theme2, id, section = id) =>
|
|
(_ = theme2(section + 'Opacity', tail(params))) && {
|
|
[`--tw-${id}-opacity`]: _,
|
|
};
|
|
|
|
var parseColorComponent = (chars, factor) => Math.round(parseInt(chars, 16) * factor);
|
|
var asRGBA = (color, opacityProperty2, opacityDefault) => {
|
|
if (
|
|
color &&
|
|
color[0] == '#' &&
|
|
(_ = (color.length - 1) / 3) &&
|
|
($ = [17, 1, 0.062272][_ - 1])
|
|
) {
|
|
return `rgba(${parseColorComponent(color.substr(1, _), $)},${parseColorComponent(
|
|
color.substr(1 + _, _),
|
|
$
|
|
)},${parseColorComponent(color.substr(1 + 2 * _, _), $)},${
|
|
opacityProperty2
|
|
? `var(--tw-${opacityProperty2}${opacityDefault ? ',' + opacityDefault : ''})`
|
|
: opacityDefault || 1
|
|
})`;
|
|
}
|
|
return color;
|
|
};
|
|
var withOpacityFallback = (property2, kind, color) =>
|
|
color && typeof color == 'string'
|
|
? (_ = asRGBA(color, kind + '-opacity')) && _ !== color
|
|
? {
|
|
[`--tw-${kind}-opacity`]: '1',
|
|
[property2]: [color, _],
|
|
}
|
|
: { [property2]: color }
|
|
: void 0;
|
|
var transparentTo = (color) => (($ = asRGBA(color, '', '0')) == _ ? 'transparent' : $);
|
|
var reversableEdge = (params, { theme: theme2 }, id, section, prefix, suffix) =>
|
|
(_ = { x: ['right', 'left'], y: ['bottom', 'top'] }[params[0]]) &&
|
|
($ = `--tw-${id}-${params[0]}-reverse`)
|
|
? params[1] == 'reverse'
|
|
? {
|
|
[$]: '1',
|
|
}
|
|
: {
|
|
[$]: '0',
|
|
[joinTruthy([prefix, _[0], suffix])]:
|
|
(__ = theme2(section, tail(params))) && `calc(${__} * var(${$}))`,
|
|
[joinTruthy([prefix, _[1], suffix])]: __ && [
|
|
__,
|
|
`calc(${__} * calc(1 - var(${$})))`,
|
|
],
|
|
}
|
|
: void 0;
|
|
var placeHelper = (property2, params) =>
|
|
params[0] && {
|
|
[property2]: (includes('wun', (params[0] || '')[3]) ? 'space-' : '') + params[0],
|
|
};
|
|
|
|
var contentPluginFor = (property2) => (params) =>
|
|
includes(['start', 'end'], params[0])
|
|
? { [property2]: 'flex-' + params[0] }
|
|
: placeHelper(property2, params);
|
|
var gridPlugin =
|
|
(kind) =>
|
|
(params, { theme: theme2 }) => {
|
|
if ((_ = theme2('grid' + capitalize(kind), params, ''))) {
|
|
return { ['grid-' + kind]: _ };
|
|
}
|
|
switch (params[0]) {
|
|
case 'span':
|
|
return (
|
|
params[1] && {
|
|
['grid-' + kind]: `span ${params[1]} / span ${params[1]}`,
|
|
}
|
|
);
|
|
|
|
case 'start':
|
|
case 'end':
|
|
return (
|
|
(_ = theme2(
|
|
'grid' + capitalize(kind) + capitalize(params[0]),
|
|
tail(params),
|
|
join(tail(params))
|
|
)) && {
|
|
[`grid-${kind}-${params[0]}`]: _,
|
|
}
|
|
);
|
|
}
|
|
};
|
|
var border = (params, { theme: theme2 }, id) => {
|
|
switch (params[0]) {
|
|
case 'solid':
|
|
case 'dashed':
|
|
case 'dotted':
|
|
case 'double':
|
|
case 'none':
|
|
return propertyValue('borderStyle')(params);
|
|
case 'collapse':
|
|
case 'separate':
|
|
return propertyValue('borderCollapse')(params);
|
|
case 'opacity':
|
|
return opacityProperty(params, theme2, id);
|
|
}
|
|
|
|
return (_ = theme2(id + 'Width', params, ''))
|
|
? { borderWidth: _ }
|
|
: withOpacityFallback('borderColor', id, theme2(id + 'Color', params));
|
|
};
|
|
var transform = (gpu) =>
|
|
(gpu
|
|
? 'translate3d(var(--tw-translate-x,0),var(--tw-translate-y,0),0)'
|
|
: 'translateX(var(--tw-translate-x,0)) translateY(var(--tw-translate-y,0))') +
|
|
' rotate(var(--tw-rotate,0)) skewX(var(--tw-skew-x,0)) skewY(var(--tw-skew-y,0)) scaleX(var(--tw-scale-x,1)) scaleY(var(--tw-scale-y,1))';
|
|
var transformXYFunction = (params, context, id) =>
|
|
params[0] &&
|
|
(_ = context.theme(id, params[1] || params[0])) && {
|
|
[`--tw-${id}-x`]: params[0] !== 'y' && _,
|
|
[`--tw-${id}-y`]: params[0] !== 'x' && _,
|
|
transform: [`${id}${params[1] ? params[0].toUpperCase() : ''}(${_})`, transform()],
|
|
};
|
|
|
|
var edgesPluginFor = (key) => (params, context, id) =>
|
|
id[1]
|
|
? edges(context.theme(key, params), id[1], key)
|
|
: themeProperty(key)(params, context, id);
|
|
var padding = edgesPluginFor('padding');
|
|
var margin = edgesPluginFor('margin');
|
|
var minMax = (params, { theme: theme2 }, id) =>
|
|
(_ = { w: 'width', h: 'height' }[params[0]]) && {
|
|
[(_ = `${id}${capitalize(_)}`)]: theme2(_, tail(params)),
|
|
};
|
|
|
|
var filter = (params, { theme: theme2 }, id) => {
|
|
const parts = id.split('-');
|
|
const prefix = parts[0] == 'backdrop' ? parts[0] + '-' : '';
|
|
if (!prefix) {
|
|
params.unshift(...parts);
|
|
}
|
|
if (params[0] == 'filter') {
|
|
const filters = [
|
|
'blur',
|
|
'brightness',
|
|
'contrast',
|
|
'grayscale',
|
|
'hue-rotate',
|
|
'invert',
|
|
prefix && 'opacity',
|
|
'saturate',
|
|
'sepia',
|
|
!prefix && 'drop-shadow',
|
|
].filter(Boolean);
|
|
return params[1] == 'none'
|
|
? { [prefix + 'filter']: 'none' }
|
|
: filters.reduce(
|
|
(css, key) => {
|
|
css['--tw-' + prefix + key] = 'var(--tw-empty,/*!*/ /*!*/)';
|
|
return css;
|
|
},
|
|
{
|
|
[prefix + 'filter']: filters.map((key) => `var(--tw-${prefix}${key})`).join(' '),
|
|
}
|
|
);
|
|
}
|
|
$ = params.shift();
|
|
if (includes(['hue', 'drop'], $)) $ += capitalize(params.shift());
|
|
return (
|
|
(_ = theme2(prefix ? 'backdrop' + capitalize($) : $, params)) && {
|
|
['--tw-' + prefix + $]: (Array.isArray(_) ? _ : [_])
|
|
.map((_4) => `${hyphenate($)}(${_4})`)
|
|
.join(' '),
|
|
}
|
|
);
|
|
};
|
|
var corePlugins = {
|
|
group: (params, { tag }, id) => tag(join([id, ...params])),
|
|
hidden: alias(display, 'none'),
|
|
inline: display,
|
|
block: display,
|
|
contents: display,
|
|
flow: display,
|
|
table: (params, context, id) =>
|
|
includes(['auto', 'fixed'], params[0])
|
|
? { tableLayout: params[0] }
|
|
: display(params, context, id),
|
|
flex(params, context, id) {
|
|
switch (params[0]) {
|
|
case 'row':
|
|
case 'col':
|
|
return {
|
|
flexDirection: join(params[0] == 'col' ? ['column', ...tail(params)] : params),
|
|
};
|
|
|
|
case 'nowrap':
|
|
case 'wrap':
|
|
return { flexWrap: join(params) };
|
|
case 'grow':
|
|
case 'shrink':
|
|
_ = context.theme('flex' + capitalize(params[0]), tail(params), params[1] || 1);
|
|
return (
|
|
_ != null && {
|
|
['flex-' + params[0]]: '' + _,
|
|
}
|
|
);
|
|
}
|
|
|
|
return (_ = context.theme('flex', params, ''))
|
|
? { flex: _ }
|
|
: display(params, context, id);
|
|
},
|
|
grid(params, context, id) {
|
|
switch (params[0]) {
|
|
case 'cols':
|
|
case 'rows':
|
|
return (
|
|
(_ = context.theme(
|
|
'gridTemplate' + capitalize(toColumnsOrRows(params[0])),
|
|
tail(params),
|
|
params.length == 2 && Number(params[1])
|
|
? `repeat(${params[1]},minmax(0,1fr))`
|
|
: join(tail(params))
|
|
)) && {
|
|
['gridTemplate-' + toColumnsOrRows(params[0])]: _,
|
|
}
|
|
);
|
|
|
|
case 'flow':
|
|
return (
|
|
params.length > 1 && {
|
|
gridAutoFlow: join(
|
|
params[1] == 'col' ? ['column', ...tail(params, 2)] : tail(params),
|
|
' '
|
|
),
|
|
}
|
|
);
|
|
}
|
|
|
|
return display(params, context, id);
|
|
},
|
|
auto: (params, { theme: theme2 }) =>
|
|
includes(['cols', 'rows'], params[0]) &&
|
|
(_ = theme2(
|
|
'gridAuto' + capitalize(toColumnsOrRows(params[0])),
|
|
tail(params),
|
|
join(tail(params))
|
|
)) && {
|
|
['gridAuto-' + toColumnsOrRows(params[0])]: _,
|
|
},
|
|
|
|
static: position,
|
|
fixed: position,
|
|
absolute: position,
|
|
relative: position,
|
|
sticky: position,
|
|
visible: { visibility: 'visible' },
|
|
invisible: { visibility: 'hidden' },
|
|
antialiased: {
|
|
WebkitFontSmoothing: 'antialiased',
|
|
MozOsxFontSmoothing: 'grayscale',
|
|
},
|
|
|
|
'subpixel-antialiased': {
|
|
WebkitFontSmoothing: 'auto',
|
|
MozOsxFontSmoothing: 'auto',
|
|
},
|
|
|
|
truncate: {
|
|
overflow: 'hidden',
|
|
whiteSpace: 'nowrap',
|
|
textOverflow: 'ellipsis',
|
|
},
|
|
|
|
'sr-only': {
|
|
position: 'absolute',
|
|
width: '1px',
|
|
height: '1px',
|
|
padding: '0',
|
|
margin: '-1px',
|
|
overflow: 'hidden',
|
|
whiteSpace: 'nowrap',
|
|
clip: 'rect(0,0,0,0)',
|
|
borderWidth: '0',
|
|
},
|
|
|
|
'not-sr-only': {
|
|
position: 'static',
|
|
width: 'auto',
|
|
height: 'auto',
|
|
padding: '0',
|
|
margin: '0',
|
|
overflow: 'visible',
|
|
whiteSpace: 'normal',
|
|
clip: 'auto',
|
|
},
|
|
|
|
resize: (params) => ({
|
|
resize: { x: 'horizontal', y: 'vertical' }[params[0]] || params[0] || 'both',
|
|
}),
|
|
|
|
box: (params) => params[0] && { boxSizing: params[0] + '-box' },
|
|
appearance: propertyValue(),
|
|
cursor: themePropertyFallback(),
|
|
float: propertyValue(),
|
|
clear: propertyValue(),
|
|
decoration: propertyValue('boxDecorationBreak'),
|
|
isolate: { isolation: 'isolate' },
|
|
isolation: propertyValue(),
|
|
'mix-blend': propertyValue('mixBlendMode'),
|
|
top: inset,
|
|
right: inset,
|
|
bottom: inset,
|
|
left: inset,
|
|
inset: (params, { theme: theme2 }) =>
|
|
(_ = expandEdges(params[0]))
|
|
? edges(theme2('inset', tail(params)), params[0])
|
|
: (_ = theme2('inset', params)) && {
|
|
top: _,
|
|
right: _,
|
|
bottom: _,
|
|
left: _,
|
|
},
|
|
|
|
underline: textDecoration,
|
|
'line-through': textDecoration,
|
|
'no-underline': alias(textDecoration, 'none'),
|
|
'text-underline': alias(textDecoration, 'underline'),
|
|
'text-no-underline': alias(textDecoration, 'none'),
|
|
'text-line-through': alias(textDecoration, 'line-through'),
|
|
uppercase: textTransform,
|
|
lowercase: textTransform,
|
|
capitalize: textTransform,
|
|
'normal-case': alias(textTransform, 'none'),
|
|
'text-normal-case': alias(textTransform, 'none'),
|
|
italic: fontStyle,
|
|
'not-italic': alias(fontStyle, 'normal'),
|
|
'font-italic': alias(fontStyle, 'italic'),
|
|
'font-not-italic': alias(fontStyle, 'normal'),
|
|
font: (params, context, id) =>
|
|
(_ = context.theme('fontFamily', params, ''))
|
|
? { fontFamily: _ }
|
|
: themeProperty('fontWeight')(params, context, id),
|
|
items: (params) =>
|
|
params[0] && {
|
|
alignItems: includes(['start', 'end'], params[0]) ? 'flex-' + params[0] : join(params),
|
|
},
|
|
|
|
'justify-self': propertyValue(),
|
|
'justify-items': propertyValue(),
|
|
justify: contentPluginFor('justifyContent'),
|
|
content: contentPluginFor('alignContent'),
|
|
self: contentPluginFor('alignSelf'),
|
|
place: (params) => params[0] && placeHelper('place-' + params[0], tail(params)),
|
|
overscroll: (params) =>
|
|
params[0] && {
|
|
['overscrollBehavior' + (params[1] ? '-' + params[0] : '')]: params[1] || params[0],
|
|
},
|
|
|
|
col: gridPlugin('column'),
|
|
row: gridPlugin('row'),
|
|
duration: themeProperty('transitionDuration'),
|
|
delay: themeProperty('transitionDelay'),
|
|
tracking: themeProperty('letterSpacing'),
|
|
leading: themeProperty('lineHeight'),
|
|
z: themeProperty('zIndex'),
|
|
opacity: themeProperty(),
|
|
ease: themeProperty('transitionTimingFunction'),
|
|
p: padding,
|
|
py: padding,
|
|
px: padding,
|
|
pt: padding,
|
|
pr: padding,
|
|
pb: padding,
|
|
pl: padding,
|
|
m: margin,
|
|
my: margin,
|
|
mx: margin,
|
|
mt: margin,
|
|
mr: margin,
|
|
mb: margin,
|
|
ml: margin,
|
|
w: themeProperty('width'),
|
|
h: themeProperty('height'),
|
|
min: minMax,
|
|
max: minMax,
|
|
fill: themeProperty(),
|
|
order: themeProperty(),
|
|
origin: themePropertyFallback('transformOrigin', ' '),
|
|
select: propertyValue('userSelect'),
|
|
'pointer-events': propertyValue(),
|
|
align: propertyValue('verticalAlign'),
|
|
whitespace: propertyValue('whiteSpace'),
|
|
'normal-nums': { fontVariantNumeric: 'normal' },
|
|
ordinal: fontVariantNumeric('ordinal'),
|
|
'slashed-zero': fontVariantNumeric('slashed-zero'),
|
|
'lining-nums': fontVariantNumeric('numeric-figure'),
|
|
'oldstyle-nums': fontVariantNumeric('numeric-figure'),
|
|
'proportional-nums': fontVariantNumeric('numeric-spacing'),
|
|
'tabular-nums': fontVariantNumeric('numeric-spacing'),
|
|
'diagonal-fractions': fontVariantNumeric('numeric-fraction'),
|
|
'stacked-fractions': fontVariantNumeric('numeric-fraction'),
|
|
overflow: (params, context, id) =>
|
|
includes(['ellipsis', 'clip'], params[0])
|
|
? propertyValue('textOverflow')(params)
|
|
: params[1]
|
|
? { ['overflow-' + params[0]]: params[1] }
|
|
: propertyValue()(params, context, id),
|
|
transform: (params) =>
|
|
params[0] == 'none'
|
|
? { transform: 'none' }
|
|
: {
|
|
'--tw-translate-x': '0',
|
|
'--tw-translate-y': '0',
|
|
'--tw-rotate': '0',
|
|
'--tw-skew-x': '0',
|
|
'--tw-skew-y': '0',
|
|
'--tw-scale-x': '1',
|
|
'--tw-scale-y': '1',
|
|
transform: transform(params[0] == 'gpu'),
|
|
},
|
|
|
|
rotate: (params, { theme: theme2 }) =>
|
|
(_ = theme2('rotate', params)) && {
|
|
'--tw-rotate': _,
|
|
transform: [`rotate(${_})`, transform()],
|
|
},
|
|
|
|
scale: transformXYFunction,
|
|
translate: transformXYFunction,
|
|
skew: transformXYFunction,
|
|
gap: (params, context, id) =>
|
|
(_ = { x: 'column', y: 'row' }[params[0]])
|
|
? { [_ + 'Gap']: context.theme('gap', tail(params)) }
|
|
: themeProperty('gap')(params, context, id),
|
|
stroke: (params, context, id) =>
|
|
(_ = context.theme('stroke', params, ''))
|
|
? { stroke: _ }
|
|
: themeProperty('strokeWidth')(params, context, id),
|
|
outline: (params, { theme: theme2 }) =>
|
|
(_ = theme2('outline', params)) && {
|
|
outline: _[0],
|
|
outlineOffset: _[1],
|
|
},
|
|
|
|
'break-normal': {
|
|
wordBreak: 'normal',
|
|
overflowWrap: 'normal',
|
|
},
|
|
|
|
'break-words': { overflowWrap: 'break-word' },
|
|
'break-all': { wordBreak: 'break-all' },
|
|
text(params, { theme: theme2 }, id) {
|
|
switch (params[0]) {
|
|
case 'left':
|
|
case 'center':
|
|
case 'right':
|
|
case 'justify':
|
|
return { textAlign: params[0] };
|
|
case 'uppercase':
|
|
case 'lowercase':
|
|
case 'capitalize':
|
|
return textTransform([], _, params[0]);
|
|
case 'opacity':
|
|
return opacityProperty(params, theme2, id);
|
|
}
|
|
|
|
const fontSize = theme2('fontSize', params, '');
|
|
if (fontSize) {
|
|
return typeof fontSize == 'string'
|
|
? { fontSize }
|
|
: {
|
|
fontSize: fontSize[0],
|
|
...(typeof fontSize[1] == 'string' ? { lineHeight: fontSize[1] } : fontSize[1]),
|
|
};
|
|
}
|
|
return withOpacityFallback('color', 'text', theme2('textColor', params));
|
|
},
|
|
bg(params, { theme: theme2 }, id) {
|
|
switch (params[0]) {
|
|
case 'fixed':
|
|
case 'local':
|
|
case 'scroll':
|
|
return propertyValue('backgroundAttachment', ',')(params);
|
|
case 'bottom':
|
|
case 'center':
|
|
case 'left':
|
|
case 'right':
|
|
case 'top':
|
|
return propertyValue('backgroundPosition', ' ')(params);
|
|
case 'no':
|
|
return params[1] == 'repeat' && propertyValue('backgroundRepeat')(params);
|
|
case 'repeat':
|
|
return includes('xy', params[1])
|
|
? propertyValue('backgroundRepeat')(params)
|
|
: { backgroundRepeat: params[1] || params[0] };
|
|
case 'opacity':
|
|
return opacityProperty(params, theme2, id, 'background');
|
|
case 'clip':
|
|
case 'origin':
|
|
return (
|
|
params[1] && {
|
|
['background-' + params[0]]: params[1] + (params[1] == 'text' ? '' : '-box'),
|
|
}
|
|
);
|
|
|
|
case 'blend':
|
|
return propertyValue('background-blend-mode')(tail(params));
|
|
case 'gradient':
|
|
if (params[1] == 'to' && (_ = expandEdges(params[2]))) {
|
|
return {
|
|
backgroundImage: `linear-gradient(to ${join(_, ' ')},var(--tw-gradient-stops))`,
|
|
};
|
|
}
|
|
}
|
|
|
|
return (_ = theme2('backgroundPosition', params, ''))
|
|
? { backgroundPosition: _ }
|
|
: (_ = theme2('backgroundSize', params, ''))
|
|
? { backgroundSize: _ }
|
|
: (_ = theme2('backgroundImage', params, ''))
|
|
? { backgroundImage: _ }
|
|
: withOpacityFallback('backgroundColor', 'bg', theme2('backgroundColor', params));
|
|
},
|
|
from: (params, { theme: theme2 }) =>
|
|
(_ = theme2('gradientColorStops', params)) && {
|
|
'--tw-gradient-from': _,
|
|
'--tw-gradient-stops': `var(--tw-gradient-from),var(--tw-gradient-to,${transparentTo(
|
|
_
|
|
)})`,
|
|
},
|
|
|
|
via: (params, { theme: theme2 }) =>
|
|
(_ = theme2('gradientColorStops', params)) && {
|
|
'--tw-gradient-stops': `var(--tw-gradient-from),${_},var(--tw-gradient-to,${transparentTo(
|
|
_
|
|
)})`,
|
|
},
|
|
|
|
to: (params, { theme: theme2 }) =>
|
|
(_ = theme2('gradientColorStops', params)) && {
|
|
'--tw-gradient-to': _,
|
|
},
|
|
|
|
border: (params, context, id) =>
|
|
expandEdges(params[0])
|
|
? edges(context.theme('borderWidth', tail(params)), params[0], 'border', 'width')
|
|
: border(params, context, id),
|
|
divide: (params, context, id) =>
|
|
(_ =
|
|
reversableEdge(params, context, id, 'divideWidth', 'border', 'width') ||
|
|
border(params, context, id)) && {
|
|
'&>:not([hidden])~:not([hidden])': _,
|
|
},
|
|
|
|
space: (params, context, id) =>
|
|
(_ = reversableEdge(params, context, id, 'space', 'margin')) && {
|
|
'&>:not([hidden])~:not([hidden])': _,
|
|
},
|
|
|
|
placeholder: (params, { theme: theme2 }, id) =>
|
|
(_ =
|
|
params[0] == 'opacity'
|
|
? opacityProperty(params, theme2, id)
|
|
: withOpacityFallback('color', 'placeholder', theme2('placeholderColor', params))) && {
|
|
'&::placeholder': _,
|
|
},
|
|
|
|
shadow: (params, { theme: theme2 }) =>
|
|
(_ = theme2('boxShadow', params)) && {
|
|
':global': {
|
|
'*': {
|
|
'--tw-shadow': '0 0 transparent',
|
|
},
|
|
},
|
|
|
|
'--tw-shadow': _ == 'none' ? '0 0 transparent' : _,
|
|
boxShadow: [
|
|
_,
|
|
`var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow)`,
|
|
],
|
|
},
|
|
|
|
animate: (params, { theme: theme2, tag }) => {
|
|
if (($ = theme2('animation', params))) {
|
|
const parts = $.split(' ');
|
|
if ((_ = theme2('keyframes', parts[0], (__ = {}))) !== __) {
|
|
return (
|
|
($ = tag(parts[0])) && {
|
|
animation: $ + ' ' + join(tail(parts), ' '),
|
|
['@keyframes ' + $]: _,
|
|
}
|
|
);
|
|
}
|
|
return { animation: $ };
|
|
}
|
|
},
|
|
ring(params, { theme: theme2 }, id) {
|
|
switch (params[0]) {
|
|
case 'inset':
|
|
return { '--tw-ring-inset': 'inset' };
|
|
case 'opacity':
|
|
return opacityProperty(params, theme2, id);
|
|
case 'offset':
|
|
return (_ = theme2('ringOffsetWidth', tail(params), ''))
|
|
? {
|
|
'--tw-ring-offset-width': _,
|
|
}
|
|
: {
|
|
'--tw-ring-offset-color': theme2('ringOffsetColor', tail(params)),
|
|
};
|
|
}
|
|
|
|
return (_ = theme2('ringWidth', params, ''))
|
|
? {
|
|
'--tw-ring-offset-shadow': `var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)`,
|
|
'--tw-ring-shadow': `var(--tw-ring-inset) 0 0 0 calc(${_} + var(--tw-ring-offset-width)) var(--tw-ring-color)`,
|
|
boxShadow: `var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 transparent)`,
|
|
':global': {
|
|
'*': {
|
|
'--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)',
|
|
'--tw-ring-offset-width': theme2('ringOffsetWidth', '', '0px'),
|
|
'--tw-ring-offset-color': theme2('ringOffsetColor', '', '#fff'),
|
|
'--tw-ring-color': asRGBA(
|
|
theme2('ringColor', '', '#93c5fd'),
|
|
'ring-opacity',
|
|
theme2('ringOpacity', '', '0.5')
|
|
),
|
|
'--tw-ring-offset-shadow': '0 0 transparent',
|
|
'--tw-ring-shadow': '0 0 transparent',
|
|
},
|
|
},
|
|
}
|
|
: {
|
|
'--tw-ring-opacity': '1',
|
|
'--tw-ring-color': asRGBA(theme2('ringColor', params), 'ring-opacity'),
|
|
};
|
|
},
|
|
object: (params, context, id) =>
|
|
includes(['contain', 'cover', 'fill', 'none', 'scale-down'], join(params))
|
|
? { objectFit: join(params) }
|
|
: themePropertyFallback('objectPosition', ' ')(params, context, id),
|
|
list: (params, context, id) =>
|
|
join(params) == 'item'
|
|
? display(params, context, id)
|
|
: includes(['inside', 'outside'], join(params))
|
|
? { listStylePosition: params[0] }
|
|
: themePropertyFallback('listStyleType')(params, context, id),
|
|
rounded: (params, context, id) =>
|
|
corners(context.theme('borderRadius', tail(params), ''), params[0], 'border', 'radius') ||
|
|
themeProperty('borderRadius')(params, context, id),
|
|
'transition-none': { transitionProperty: 'none' },
|
|
transition: (params, { theme: theme2 }) => ({
|
|
transitionProperty: theme2('transitionProperty', params),
|
|
transitionTimingFunction: theme2('transitionTimingFunction', ''),
|
|
transitionDuration: theme2('transitionDuration', ''),
|
|
}),
|
|
|
|
container: (params, { theme: theme2 }) => {
|
|
const { screens = theme2('screens'), center, padding: padding2 } = theme2('container');
|
|
const paddingFor = (screen) =>
|
|
(_ =
|
|
padding2 &&
|
|
(typeof padding2 == 'string' ? padding2 : padding2[screen] || padding2.DEFAULT))
|
|
? {
|
|
paddingRight: _,
|
|
paddingLeft: _,
|
|
}
|
|
: {};
|
|
return Object.keys(screens).reduce(
|
|
(rules2, screen) => {
|
|
if (($ = screens[screen]) && typeof $ == 'string') {
|
|
rules2[buildMediaQuery($)] = {
|
|
'&': {
|
|
'max-width': $,
|
|
...paddingFor(screen),
|
|
},
|
|
};
|
|
}
|
|
return rules2;
|
|
},
|
|
{
|
|
width: '100%',
|
|
...(center ? { marginRight: 'auto', marginLeft: 'auto' } : {}),
|
|
...paddingFor('xs'),
|
|
}
|
|
);
|
|
},
|
|
filter,
|
|
blur: filter,
|
|
brightness: filter,
|
|
contrast: filter,
|
|
grayscale: filter,
|
|
'hue-rotate': filter,
|
|
invert: filter,
|
|
saturate: filter,
|
|
sepia: filter,
|
|
'drop-shadow': filter,
|
|
backdrop: filter,
|
|
};
|
|
|
|
// src/twind/preflight.ts
|
|
var createPreflight = (theme2) => ({
|
|
':root': { tabSize: 4 },
|
|
'body,blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre,fieldset,ol,ul': { margin: '0' },
|
|
button: { backgroundColor: 'transparent', backgroundImage: 'none' },
|
|
'button,[type="button"],[type="reset"],[type="submit"]': { WebkitAppearance: 'button' },
|
|
'button:focus': { outline: ['1px dotted', '5px auto -webkit-focus-ring-color'] },
|
|
'fieldset,ol,ul,legend': { padding: '0' },
|
|
'ol,ul': { listStyle: 'none' },
|
|
html: {
|
|
lineHeight: '1.5',
|
|
WebkitTextSizeAdjust: '100%',
|
|
fontFamily: theme2('fontFamily.sans', 'ui-sans-serif,system-ui,sans-serif'),
|
|
},
|
|
|
|
body: { fontFamily: 'inherit', lineHeight: 'inherit' },
|
|
'*,::before,::after': {
|
|
boxSizing: 'border-box',
|
|
border: `0 solid ${theme2('borderColor.DEFAULT', 'currentColor')}`,
|
|
},
|
|
|
|
hr: { height: '0', color: 'inherit', borderTopWidth: '1px' },
|
|
img: { borderStyle: 'solid' },
|
|
textarea: { resize: 'vertical' },
|
|
'input::placeholder,textarea::placeholder': {
|
|
opacity: '1',
|
|
color: theme2('placeholderColor.DEFAULT', theme2('colors.gray.400', '#a1a1aa')),
|
|
},
|
|
|
|
'button,[role="button"]': { cursor: 'pointer' },
|
|
table: { textIndent: '0', borderColor: 'inherit', borderCollapse: 'collapse' },
|
|
'h1,h2,h3,h4,h5,h6': { fontSize: 'inherit', fontWeight: 'inherit' },
|
|
a: { color: 'inherit', textDecoration: 'inherit' },
|
|
'button,input,optgroup,select,textarea': {
|
|
fontFamily: 'inherit',
|
|
fontSize: '100%',
|
|
margin: '0',
|
|
padding: '0',
|
|
lineHeight: 'inherit',
|
|
color: 'inherit',
|
|
},
|
|
|
|
'button,select': { textTransform: 'none' },
|
|
'::-moz-focus-inner': { borderStyle: 'none', padding: '0' },
|
|
':-moz-focusring': { outline: '1px dotted ButtonText' },
|
|
':-moz-ui-invalid': { boxShadow: 'none' },
|
|
progress: { verticalAlign: 'baseline' },
|
|
'::-webkit-inner-spin-button,::-webkit-outer-spin-button': { height: 'auto' },
|
|
'[type="search"]': { WebkitAppearance: 'textfield', outlineOffset: '-2px' },
|
|
'::-webkit-search-decoration': { WebkitAppearance: 'none' },
|
|
'::-webkit-file-upload-button': { WebkitAppearance: 'button', font: 'inherit' },
|
|
summary: { display: 'list-item' },
|
|
'abbr[title]': { textDecoration: 'underline dotted' },
|
|
'b,strong': { fontWeight: 'bolder' },
|
|
'pre,code,kbd,samp': {
|
|
fontFamily: theme2('fontFamily', 'mono', 'ui-monospace,monospace'),
|
|
fontSize: '1em',
|
|
},
|
|
|
|
'sub,sup': {
|
|
fontSize: '75%',
|
|
lineHeight: '0',
|
|
position: 'relative',
|
|
verticalAlign: 'baseline',
|
|
},
|
|
sub: { bottom: '-0.25em' },
|
|
sup: { top: '-0.5em' },
|
|
'img,svg,video,canvas,audio,iframe,embed,object': {
|
|
display: 'block',
|
|
verticalAlign: 'middle',
|
|
},
|
|
'img,video': { maxWidth: '100%', height: 'auto' },
|
|
});
|
|
|
|
// src/twind/variants.ts
|
|
var coreVariants = {
|
|
dark: '@media (prefers-color-scheme:dark)',
|
|
sticky: '@supports ((position: -webkit-sticky) or (position:sticky))',
|
|
'motion-reduce': '@media (prefers-reduced-motion:reduce)',
|
|
'motion-safe': '@media (prefers-reduced-motion:no-preference)',
|
|
first: '&:first-child',
|
|
last: '&:last-child',
|
|
even: '&:nth-child(2n)',
|
|
odd: '&:nth-child(odd)',
|
|
children: '&>*',
|
|
siblings: '&~*',
|
|
sibling: '&+*',
|
|
override: '&&',
|
|
};
|
|
|
|
// src/internal/dom.ts
|
|
var STYLE_ELEMENT_ID = '__twind';
|
|
var getStyleElement = (nonce) => {
|
|
let element = self[STYLE_ELEMENT_ID];
|
|
if (!element) {
|
|
element = document.head.appendChild(document.createElement('style'));
|
|
element.id = STYLE_ELEMENT_ID;
|
|
nonce && (element.nonce = nonce);
|
|
element.appendChild(document.createTextNode(''));
|
|
}
|
|
return element;
|
|
};
|
|
|
|
// src/twind/sheets.ts
|
|
var cssomSheet = ({ nonce, target = getStyleElement(nonce).sheet } = {}) => {
|
|
const offset = target.cssRules.length;
|
|
return {
|
|
target,
|
|
insert: (rule, index) => target.insertRule(rule, offset + index),
|
|
};
|
|
};
|
|
var voidSheet = () => ({
|
|
target: null,
|
|
insert: noop,
|
|
});
|
|
|
|
// src/twind/modes.ts
|
|
var mode = (report) => ({
|
|
unknown(section, key = [], optional, context) {
|
|
if (!optional) {
|
|
this.report({ id: 'UNKNOWN_THEME_VALUE', key: section + '.' + join(key) }, context);
|
|
}
|
|
},
|
|
report({ id, ...info }) {
|
|
return report(`[${id}] ${JSON.stringify(info)}`);
|
|
},
|
|
});
|
|
|
|
var warn = /* @__PURE__ */ mode((message) => console.warn(message));
|
|
var strict = /* @__PURE__ */ mode((message) => {
|
|
throw new Error(message);
|
|
});
|
|
var silent = /* @__PURE__ */ mode(noop);
|
|
|
|
// src/twind/prefix.ts
|
|
import {
|
|
cssPropertyAlias,
|
|
cssPropertyPrefixFlags,
|
|
cssValuePrefixFlags,
|
|
} from './style-vendorizer.mjs';
|
|
var noprefix = (property2, value, important) =>
|
|
`${property2}:${value}${important ? ' !important' : ''}`;
|
|
var autoprefix = (property2, value, important) => {
|
|
let cssText = '';
|
|
const propertyAlias = cssPropertyAlias(property2);
|
|
if (propertyAlias) cssText += `${noprefix(propertyAlias, value, important)};`;
|
|
let flags = cssPropertyPrefixFlags(property2);
|
|
if (flags & 1) cssText += `-webkit-${noprefix(property2, value, important)};`;
|
|
if (flags & 2) cssText += `-moz-${noprefix(property2, value, important)};`;
|
|
if (flags & 4) cssText += `-ms-${noprefix(property2, value, important)};`;
|
|
flags = cssValuePrefixFlags(property2, value);
|
|
if (flags & 1) cssText += `${noprefix(property2, `-webkit-${value}`, important)};`;
|
|
if (flags & 2) cssText += `${noprefix(property2, `-moz-${value}`, important)};`;
|
|
if (flags & 4) cssText += `${noprefix(property2, `-ms-${value}`, important)};`;
|
|
cssText += noprefix(property2, value, important);
|
|
return cssText;
|
|
};
|
|
|
|
// src/twind/theme.ts
|
|
var ratios = (start, end) => {
|
|
const result = {};
|
|
do {
|
|
for (let dividend = 1; dividend < start; dividend++) {
|
|
result[`${dividend}/${start}`] = Number(((dividend / start) * 100).toFixed(6)) + '%';
|
|
}
|
|
} while (++start <= end);
|
|
return result;
|
|
};
|
|
var exponential = (stop, unit, start = 0) => {
|
|
const result = {};
|
|
for (; start <= stop; start = start * 2 || 1) {
|
|
result[start] = start + unit;
|
|
}
|
|
return result;
|
|
};
|
|
var linear = (stop, unit = '', divideBy = 1, start = 0, step = 1, result = {}) => {
|
|
for (; start <= stop; start += step) {
|
|
result[start] = start / divideBy + unit;
|
|
}
|
|
return result;
|
|
};
|
|
var alias2 = (section) => (theme2) => theme2(section);
|
|
var themeFactory = (args, { theme: theme2 }) => theme2(...args);
|
|
var theme = (...args) => directive(themeFactory, args);
|
|
var defaultTheme = {
|
|
screens: {
|
|
sm: '640px',
|
|
md: '768px',
|
|
lg: '1024px',
|
|
xl: '1280px',
|
|
'2xl': '1536px',
|
|
},
|
|
|
|
colors: {
|
|
transparent: 'transparent',
|
|
current: 'currentColor',
|
|
black: '#000',
|
|
white: '#fff',
|
|
gray: {
|
|
50: '#f9fafb',
|
|
100: '#f3f4f6',
|
|
200: '#e5e7eb',
|
|
300: '#d1d5db',
|
|
400: '#9ca3af',
|
|
500: '#6b7280',
|
|
600: '#4b5563',
|
|
700: '#374151',
|
|
800: '#1f2937',
|
|
900: '#111827',
|
|
},
|
|
|
|
red: {
|
|
50: '#fef2f2',
|
|
100: '#fee2e2',
|
|
200: '#fecaca',
|
|
300: '#fca5a5',
|
|
400: '#f87171',
|
|
500: '#ef4444',
|
|
600: '#dc2626',
|
|
700: '#b91c1c',
|
|
800: '#991b1b',
|
|
900: '#7f1d1d',
|
|
},
|
|
|
|
yellow: {
|
|
50: '#fffbeb',
|
|
100: '#fef3c7',
|
|
200: '#fde68a',
|
|
300: '#fcd34d',
|
|
400: '#fbbf24',
|
|
500: '#f59e0b',
|
|
600: '#d97706',
|
|
700: '#b45309',
|
|
800: '#92400e',
|
|
900: '#78350f',
|
|
},
|
|
|
|
green: {
|
|
50: '#ecfdf5',
|
|
100: '#d1fae5',
|
|
200: '#a7f3d0',
|
|
300: '#6ee7b7',
|
|
400: '#34d399',
|
|
500: '#10b981',
|
|
600: '#059669',
|
|
700: '#047857',
|
|
800: '#065f46',
|
|
900: '#064e3b',
|
|
},
|
|
|
|
blue: {
|
|
50: '#eff6ff',
|
|
100: '#dbeafe',
|
|
200: '#bfdbfe',
|
|
300: '#93c5fd',
|
|
400: '#60a5fa',
|
|
500: '#3b82f6',
|
|
600: '#2563eb',
|
|
700: '#1d4ed8',
|
|
800: '#1e40af',
|
|
900: '#1e3a8a',
|
|
},
|
|
|
|
indigo: {
|
|
50: '#eef2ff',
|
|
100: '#e0e7ff',
|
|
200: '#c7d2fe',
|
|
300: '#a5b4fc',
|
|
400: '#818cf8',
|
|
500: '#6366f1',
|
|
600: '#4f46e5',
|
|
700: '#4338ca',
|
|
800: '#3730a3',
|
|
900: '#312e81',
|
|
},
|
|
|
|
purple: {
|
|
50: '#f5f3ff',
|
|
100: '#ede9fe',
|
|
200: '#ddd6fe',
|
|
300: '#c4b5fd',
|
|
400: '#a78bfa',
|
|
500: '#8b5cf6',
|
|
600: '#7c3aed',
|
|
700: '#6d28d9',
|
|
800: '#5b21b6',
|
|
900: '#4c1d95',
|
|
},
|
|
|
|
pink: {
|
|
50: '#fdf2f8',
|
|
100: '#fce7f3',
|
|
200: '#fbcfe8',
|
|
300: '#f9a8d4',
|
|
400: '#f472b6',
|
|
500: '#ec4899',
|
|
600: '#db2777',
|
|
700: '#be185d',
|
|
800: '#9d174d',
|
|
900: '#831843',
|
|
},
|
|
},
|
|
|
|
spacing: {
|
|
px: '1px',
|
|
0: '0px',
|
|
.../* @__PURE__ */ linear(4, 'rem', 4, 0.5, 0.5),
|
|
.../* @__PURE__ */ linear(12, 'rem', 4, 5),
|
|
14: '3.5rem',
|
|
.../* @__PURE__ */ linear(64, 'rem', 4, 16, 4),
|
|
72: '18rem',
|
|
80: '20rem',
|
|
96: '24rem',
|
|
},
|
|
|
|
durations: {
|
|
75: '75ms',
|
|
100: '100ms',
|
|
150: '150ms',
|
|
200: '200ms',
|
|
300: '300ms',
|
|
500: '500ms',
|
|
700: '700ms',
|
|
1e3: '1000ms',
|
|
},
|
|
|
|
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',
|
|
},
|
|
|
|
backdropBlur: /* @__PURE__ */ alias2('blur'),
|
|
backdropBrightness: /* @__PURE__ */ alias2('brightness'),
|
|
backdropContrast: /* @__PURE__ */ alias2('contrast'),
|
|
backdropGrayscale: /* @__PURE__ */ alias2('grayscale'),
|
|
backdropHueRotate: /* @__PURE__ */ alias2('hueRotate'),
|
|
backdropInvert: /* @__PURE__ */ alias2('invert'),
|
|
backdropOpacity: /* @__PURE__ */ alias2('opacity'),
|
|
backdropSaturate: /* @__PURE__ */ alias2('saturate'),
|
|
backdropSepia: /* @__PURE__ */ alias2('sepia'),
|
|
backgroundColor: /* @__PURE__ */ alias2('colors'),
|
|
backgroundImage: {
|
|
none: 'none',
|
|
},
|
|
|
|
backgroundOpacity: /* @__PURE__ */ alias2('opacity'),
|
|
backgroundSize: {
|
|
auto: 'auto',
|
|
cover: 'cover',
|
|
contain: 'contain',
|
|
},
|
|
|
|
blur: {
|
|
0: '0',
|
|
sm: '4px',
|
|
DEFAULT: '8px',
|
|
md: '12px',
|
|
lg: '16px',
|
|
xl: '24px',
|
|
'2xl': '40px',
|
|
'3xl': '64px',
|
|
},
|
|
|
|
brightness: {
|
|
.../* @__PURE__ */ linear(200, '', 100, 0, 50),
|
|
.../* @__PURE__ */ linear(110, '', 100, 90, 5),
|
|
75: '0.75',
|
|
125: '1.25',
|
|
},
|
|
|
|
borderColor: (theme2) => ({
|
|
...theme2('colors'),
|
|
DEFAULT: theme2('colors.gray.200', 'currentColor'),
|
|
}),
|
|
|
|
borderOpacity: /* @__PURE__ */ alias2('opacity'),
|
|
borderRadius: {
|
|
none: '0px',
|
|
sm: '0.125rem',
|
|
DEFAULT: '0.25rem',
|
|
md: '0.375rem',
|
|
lg: '0.5rem',
|
|
xl: '0.75rem',
|
|
'2xl': '1rem',
|
|
'3xl': '1.5rem',
|
|
'1/2': '50%',
|
|
full: '9999px',
|
|
},
|
|
|
|
borderWidth: {
|
|
DEFAULT: '1px',
|
|
.../* @__PURE__ */ exponential(8, 'px'),
|
|
},
|
|
|
|
boxShadow: {
|
|
sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
|
|
DEFAULT: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
|
|
md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
|
|
lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
|
|
xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
|
|
'2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
|
|
inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
|
|
none: 'none',
|
|
},
|
|
|
|
contrast: {
|
|
.../* @__PURE__ */ linear(200, '', 100, 0, 50),
|
|
75: '0.75',
|
|
125: '1.25',
|
|
},
|
|
|
|
divideColor: /* @__PURE__ */ alias2('borderColor'),
|
|
divideOpacity: /* @__PURE__ */ alias2('borderOpacity'),
|
|
divideWidth: /* @__PURE__ */ alias2('borderWidth'),
|
|
dropShadow: {
|
|
sm: '0 1px 1px rgba(0,0,0,0.05)',
|
|
DEFAULT: ['0 1px 2px rgba(0, 0, 0, 0.1)', '0 1px 1px rgba(0, 0, 0, 0.06)'],
|
|
md: ['0 4px 3px rgba(0, 0, 0, 0.07)', '0 2px 2px rgba(0, 0, 0, 0.06)'],
|
|
lg: ['0 10px 8px rgba(0, 0, 0, 0.04)', '0 4px 3px rgba(0, 0, 0, 0.1)'],
|
|
xl: ['0 20px 13px rgba(0, 0, 0, 0.03)', '0 8px 5px rgba(0, 0, 0, 0.08)'],
|
|
'2xl': '0 25px 25px rgba(0, 0, 0, 0.15)',
|
|
none: '0 0 #0000',
|
|
},
|
|
|
|
fill: { current: 'currentColor' },
|
|
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',
|
|
},
|
|
|
|
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"'.split(
|
|
','
|
|
),
|
|
serif: 'ui-serif,Georgia,Cambria,"Times New Roman",Times,serif'.split(','),
|
|
mono: 'ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace'.split(
|
|
','
|
|
),
|
|
},
|
|
|
|
fontSize: {
|
|
xs: ['0.75rem', '1rem'],
|
|
sm: ['0.875rem', '1.25rem'],
|
|
base: ['1rem', '1.5rem'],
|
|
lg: ['1.125rem', '1.75rem'],
|
|
xl: ['1.25rem', '1.75rem'],
|
|
'2xl': ['1.5rem', '2rem'],
|
|
'3xl': ['1.875rem', '2.25rem'],
|
|
'4xl': ['2.25rem', '2.5rem'],
|
|
'5xl': ['3rem', '1'],
|
|
'6xl': ['3.75rem', '1'],
|
|
'7xl': ['4.5rem', '1'],
|
|
'8xl': ['6rem', '1'],
|
|
'9xl': ['8rem', '1'],
|
|
},
|
|
|
|
fontWeight: {
|
|
thin: '100',
|
|
extralight: '200',
|
|
light: '300',
|
|
normal: '400',
|
|
medium: '500',
|
|
semibold: '600',
|
|
bold: '700',
|
|
extrabold: '800',
|
|
black: '900',
|
|
},
|
|
|
|
gridTemplateColumns: {},
|
|
gridTemplateRows: {},
|
|
gridAutoColumns: {
|
|
min: 'min-content',
|
|
max: 'max-content',
|
|
fr: 'minmax(0,1fr)',
|
|
},
|
|
|
|
gridAutoRows: {
|
|
min: 'min-content',
|
|
max: 'max-content',
|
|
fr: 'minmax(0,1fr)',
|
|
},
|
|
|
|
gridColumn: {
|
|
auto: 'auto',
|
|
'span-full': '1 / -1',
|
|
},
|
|
|
|
gridRow: {
|
|
auto: 'auto',
|
|
'span-full': '1 / -1',
|
|
},
|
|
|
|
gap: /* @__PURE__ */ alias2('spacing'),
|
|
gradientColorStops: /* @__PURE__ */ alias2('colors'),
|
|
height: (theme2) => ({
|
|
auto: 'auto',
|
|
...theme2('spacing'),
|
|
...ratios(2, 6),
|
|
full: '100%',
|
|
screen: '100vh',
|
|
}),
|
|
|
|
inset: (theme2) => ({
|
|
auto: 'auto',
|
|
...theme2('spacing'),
|
|
...ratios(2, 4),
|
|
full: '100%',
|
|
}),
|
|
|
|
keyframes: {
|
|
spin: {
|
|
from: {
|
|
transform: 'rotate(0deg)',
|
|
},
|
|
|
|
to: {
|
|
transform: 'rotate(360deg)',
|
|
},
|
|
},
|
|
|
|
ping: {
|
|
'0%': {
|
|
transform: 'scale(1)',
|
|
opacity: '1',
|
|
},
|
|
|
|
'75%,100%': {
|
|
transform: 'scale(2)',
|
|
opacity: '0',
|
|
},
|
|
},
|
|
|
|
pulse: {
|
|
'0%,100%': {
|
|
opacity: '1',
|
|
},
|
|
|
|
'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',
|
|
.../* @__PURE__ */ linear(10, 'rem', 4, 3),
|
|
},
|
|
|
|
margin: (theme2) => ({
|
|
auto: 'auto',
|
|
...theme2('spacing'),
|
|
}),
|
|
|
|
maxHeight: (theme2) => ({
|
|
...theme2('spacing'),
|
|
full: '100%',
|
|
screen: '100vh',
|
|
}),
|
|
|
|
maxWidth: (theme2, { 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',
|
|
prose: '65ch',
|
|
...breakpoints(theme2('screens')),
|
|
}),
|
|
|
|
minHeight: {
|
|
0: '0px',
|
|
full: '100%',
|
|
screen: '100vh',
|
|
},
|
|
|
|
minWidth: {
|
|
0: '0px',
|
|
full: '100%',
|
|
min: 'min-content',
|
|
max: 'max-content',
|
|
},
|
|
|
|
opacity: {
|
|
.../* @__PURE__ */ linear(100, '', 100, 0, 10),
|
|
5: '0.05',
|
|
25: '0.25',
|
|
75: '0.75',
|
|
95: '0.95',
|
|
},
|
|
|
|
order: {
|
|
first: '-9999',
|
|
last: '9999',
|
|
none: '0',
|
|
.../* @__PURE__ */ linear(12, '', 1, 1),
|
|
},
|
|
|
|
outline: {
|
|
none: ['2px solid transparent', '2px'],
|
|
white: ['2px dotted white', '2px'],
|
|
black: ['2px dotted black', '2px'],
|
|
},
|
|
|
|
padding: /* @__PURE__ */ alias2('spacing'),
|
|
placeholderColor: /* @__PURE__ */ alias2('colors'),
|
|
placeholderOpacity: /* @__PURE__ */ alias2('opacity'),
|
|
ringColor: (theme2) => ({
|
|
DEFAULT: theme2('colors.blue.500', '#3b82f6'),
|
|
...theme2('colors'),
|
|
}),
|
|
|
|
ringOffsetColor: /* @__PURE__ */ alias2('colors'),
|
|
ringOffsetWidth: /* @__PURE__ */ exponential(8, 'px'),
|
|
ringOpacity: (theme2) => ({
|
|
DEFAULT: '0.5',
|
|
...theme2('opacity'),
|
|
}),
|
|
|
|
ringWidth: {
|
|
DEFAULT: '3px',
|
|
.../* @__PURE__ */ exponential(8, 'px'),
|
|
},
|
|
|
|
rotate: {
|
|
.../* @__PURE__ */ exponential(2, 'deg'),
|
|
.../* @__PURE__ */ exponential(12, 'deg', 3),
|
|
.../* @__PURE__ */ exponential(180, 'deg', 45),
|
|
},
|
|
|
|
saturate: /* @__PURE__ */ linear(200, '', 100, 0, 50),
|
|
scale: {
|
|
.../* @__PURE__ */ linear(150, '', 100, 0, 50),
|
|
.../* @__PURE__ */ linear(110, '', 100, 90, 5),
|
|
75: '0.75',
|
|
125: '1.25',
|
|
},
|
|
|
|
sepia: {
|
|
0: '0',
|
|
DEFAULT: '100%',
|
|
},
|
|
|
|
skew: {
|
|
.../* @__PURE__ */ exponential(2, 'deg'),
|
|
.../* @__PURE__ */ exponential(12, 'deg', 3),
|
|
},
|
|
|
|
space: /* @__PURE__ */ alias2('spacing'),
|
|
stroke: {
|
|
current: 'currentColor',
|
|
},
|
|
|
|
strokeWidth: /* @__PURE__ */ linear(2),
|
|
textColor: /* @__PURE__ */ alias2('colors'),
|
|
textOpacity: /* @__PURE__ */ alias2('opacity'),
|
|
transitionDuration: (theme2) => ({
|
|
DEFAULT: '150ms',
|
|
...theme2('durations'),
|
|
}),
|
|
|
|
transitionDelay: /* @__PURE__ */ alias2('durations'),
|
|
transitionProperty: {
|
|
none: 'none',
|
|
all: 'all',
|
|
DEFAULT:
|
|
'background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter',
|
|
colors: 'background-color,border-color,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: (theme2) => ({
|
|
...theme2('spacing'),
|
|
...ratios(2, 4),
|
|
full: '100%',
|
|
}),
|
|
|
|
width: (theme2) => ({
|
|
auto: 'auto',
|
|
...theme2('spacing'),
|
|
...ratios(2, 6),
|
|
...ratios(12, 12),
|
|
screen: '100vw',
|
|
full: '100%',
|
|
min: 'min-content',
|
|
max: 'max-content',
|
|
}),
|
|
|
|
zIndex: {
|
|
auto: 'auto',
|
|
.../* @__PURE__ */ linear(50, '', 1, 0, 10),
|
|
},
|
|
};
|
|
|
|
var flattenColorPalette = (colors, target = {}, prefix = []) => {
|
|
Object.keys(colors).forEach((property2) => {
|
|
const value = colors[property2];
|
|
if (property2 == 'DEFAULT') {
|
|
target[join(prefix)] = value;
|
|
target[join(prefix, '.')] = value;
|
|
}
|
|
const key = [...prefix, property2];
|
|
target[join(key)] = value;
|
|
target[join(key, '.')] = value;
|
|
if (value && typeof value == 'object') {
|
|
flattenColorPalette(value, target, key);
|
|
}
|
|
}, target);
|
|
return target;
|
|
};
|
|
var resolveContext = {
|
|
negative: () => ({}),
|
|
breakpoints: (screens) =>
|
|
Object.keys(screens)
|
|
.filter((key) => typeof screens[key] == 'string')
|
|
.reduce((target, key) => {
|
|
target['screen-' + key] = screens[key];
|
|
return target;
|
|
}, {}),
|
|
};
|
|
|
|
var handleArbitraryValues = (section, key) =>
|
|
(key = key[0] == '[' && key.slice(-1) == ']' && key.slice(1, -1)) &&
|
|
includes(section, 'olor') == /^(#|(hsl|rgb)a?\(|[a-z]+$)/.test(key) &&
|
|
(includes(key, 'calc(')
|
|
? key.replace(
|
|
/(-?\d*\.?\d(?!\b-.+[,)](?![^+\-/*])\D)(?:%|[a-z]+)?|\))([+\-/*])/g,
|
|
'$1 $2 '
|
|
)
|
|
: key);
|
|
var makeThemeResolver = (config) => {
|
|
const cache = new Map();
|
|
const theme2 = { ...defaultTheme, ...config };
|
|
const deref = (theme3, section) => {
|
|
const base = theme3 && theme3[section];
|
|
const value = typeof base == 'function' ? base(resolve, resolveContext) : base;
|
|
return value && section == 'colors' ? flattenColorPalette(value) : value;
|
|
};
|
|
const resolve = (section, key, defaultValue) => {
|
|
const keypath = section.split('.');
|
|
section = keypath[0];
|
|
if (keypath.length > 1) {
|
|
defaultValue = key;
|
|
key = join(tail(keypath), '.');
|
|
}
|
|
let base = cache.get(section);
|
|
if (!base) {
|
|
cache.set(section, (base = { ...deref(theme2, section) }));
|
|
Object.assign(base, deref(theme2.extend, section));
|
|
}
|
|
if (key != null) {
|
|
key = (Array.isArray(key) ? join(key) : key) || 'DEFAULT';
|
|
const value = handleArbitraryValues(section, key) || base[key];
|
|
return value == null
|
|
? defaultValue
|
|
: Array.isArray(value) && !includes(['fontSize', 'outline', 'dropShadow'], section)
|
|
? join(value, ',')
|
|
: value;
|
|
}
|
|
return base;
|
|
};
|
|
return resolve;
|
|
};
|
|
|
|
// src/twind/translate.ts
|
|
var translate = (plugins, context) => (rule, isTranslating) => {
|
|
if (typeof rule.d == 'function') {
|
|
return rule.d(context);
|
|
}
|
|
const parameters = rule.d.split(/-(?![^[]*])/g);
|
|
if (!isTranslating && parameters[0] == 'tw' && rule.$ == rule.d) {
|
|
return rule.$;
|
|
}
|
|
for (let index = parameters.length; index; index--) {
|
|
const id = join(parameters.slice(0, index));
|
|
const plugin = plugins[id];
|
|
if (plugin) {
|
|
return typeof plugin == 'function'
|
|
? plugin(tail(parameters, index), context, id)
|
|
: typeof plugin == 'string'
|
|
? context[isTranslating ? 'css' : 'tw'](plugin)
|
|
: plugin;
|
|
}
|
|
}
|
|
};
|
|
|
|
// src/twind/decorate.ts
|
|
var _2;
|
|
var GROUP_RE = /^:(group(?:(?!-focus).+?)*)-(.+)$/;
|
|
var NOT_PREFIX_RE = /^(:not)-(.+)/;
|
|
var prepareVariantSelector = (variant) => (variant[1] == '[' ? tail(variant) : variant);
|
|
var decorate = (darkMode, variants, { theme: theme2, tag }) => {
|
|
const applyVariant = (translation, variant) => {
|
|
if ((_2 = theme2('screens', tail(variant), ''))) {
|
|
return { [buildMediaQuery(_2)]: translation };
|
|
}
|
|
if (variant == ':dark' && darkMode == 'class') {
|
|
return { '.dark &': translation };
|
|
}
|
|
if ((_2 = GROUP_RE.exec(variant))) {
|
|
return { [`.${escape(tag(_2[1]))}:${_2[2]} &`]: translation };
|
|
}
|
|
return {
|
|
[variants[tail(variant)] ||
|
|
'&' +
|
|
variant.replace(
|
|
NOT_PREFIX_RE,
|
|
(_4, not, variant2) => not + '(' + prepareVariantSelector(':' + variant2) + ')'
|
|
)]: translation,
|
|
};
|
|
};
|
|
return (translation, rule) => rule.v.reduceRight(applyVariant, translation);
|
|
};
|
|
|
|
// src/twind/presedence.ts
|
|
var _3;
|
|
var responsivePrecedence = (css) =>
|
|
(((_3 = /(?:^|min-width: *)(\d+(?:.\d+)?)(p)?/.exec(css))
|
|
? +_3[1] / (_3[2] ? 15 : 1) / 10
|
|
: 0) &
|
|
31) <<
|
|
22;
|
|
var seperatorPrecedence = (string) => {
|
|
_3 = 0;
|
|
for (let index = string.length; index--; ) {
|
|
_3 += includes('-:,', string[index]);
|
|
}
|
|
return _3;
|
|
};
|
|
var atRulePresedence = (css) => (seperatorPrecedence(css) & 15) << 18;
|
|
var PRECEDENCES_BY_PSEUDO_CLASS = [
|
|
'rst',
|
|
'st',
|
|
'en',
|
|
'd',
|
|
'nk',
|
|
'sited',
|
|
'pty',
|
|
'ecked',
|
|
'cus-w',
|
|
'ver',
|
|
'cus',
|
|
'cus-v',
|
|
'tive',
|
|
'sable',
|
|
'ad-on',
|
|
'tiona',
|
|
'quire',
|
|
];
|
|
|
|
var pseudoPrecedence = (pseudoClass) =>
|
|
1 <<
|
|
(~(_3 = PRECEDENCES_BY_PSEUDO_CLASS.indexOf(
|
|
pseudoClass.replace(GROUP_RE, ':$2').slice(3, 8)
|
|
))
|
|
? _3
|
|
: 17);
|
|
var makeVariantPresedenceCalculator = (theme2, variants) => (presedence, variant) =>
|
|
presedence |
|
|
((_3 = theme2('screens', tail(variant), ''))
|
|
? (1 << 27) | responsivePrecedence(buildMediaQuery(_3))
|
|
: variant == ':dark'
|
|
? 1 << 30
|
|
: (_3 = variants[variant] || variant.replace(NOT_PREFIX_RE, ':$2'))[0] == '@'
|
|
? atRulePresedence(_3)
|
|
: pseudoPrecedence(variant));
|
|
var declarationPropertyPrecedence = (property2) =>
|
|
property2[0] == '-'
|
|
? 0
|
|
: seperatorPrecedence(property2) +
|
|
((_3 = /^(?:(border-(?!w|c|sty)|[tlbr].{2,4}m?$|c.{7}$)|([fl].{5}l|g.{8}$|pl))/.exec(
|
|
property2
|
|
))
|
|
? +!!_3[1] || -!!_3[2]
|
|
: 0) +
|
|
1;
|
|
|
|
// src/twind/serialize.ts
|
|
var stringifyBlock = (body, selector) => selector + '{' + body + '}';
|
|
var serialize = (prefix, variants, context) => {
|
|
const { theme: theme2, tag } = context;
|
|
const tagVar = (_4, property2) => '--' + tag(property2);
|
|
const tagVars = (value) => `${value}`.replace(/--(tw-[\w-]+)\b/g, tagVar);
|
|
const stringifyDeclaration = (property2, value, important) => {
|
|
property2 = tagVars(property2);
|
|
return Array.isArray(value)
|
|
? join(
|
|
value.filter(Boolean).map((value2) => prefix(property2, tagVars(value2), important)),
|
|
';'
|
|
)
|
|
: prefix(property2, tagVars(value), important);
|
|
};
|
|
let rules2;
|
|
const stringify3 = (atRules, selector, presedence, css, important) => {
|
|
if (Array.isArray(css)) {
|
|
css.forEach(
|
|
(css2) => css2 && stringify3(atRules, selector, presedence, css2, important)
|
|
);
|
|
return;
|
|
}
|
|
let declarations = '';
|
|
let maxPropertyPresedence = 0;
|
|
let numberOfDeclarations = 0;
|
|
if (css['@apply']) {
|
|
css = merge(
|
|
evalThunk(apply(css['@apply']), context),
|
|
{ ...css, '@apply': void 0 },
|
|
context
|
|
);
|
|
}
|
|
Object.keys(css).forEach((key) => {
|
|
const value = evalThunk(css[key], context);
|
|
if (isCSSProperty(key, value)) {
|
|
if (value !== '' && key.length > 1) {
|
|
const property2 = hyphenate(key);
|
|
numberOfDeclarations += 1;
|
|
maxPropertyPresedence = Math.max(
|
|
maxPropertyPresedence,
|
|
declarationPropertyPrecedence(property2)
|
|
);
|
|
declarations =
|
|
(declarations && declarations + ';') +
|
|
stringifyDeclaration(property2, value, important);
|
|
}
|
|
} else if (value) {
|
|
if (key == ':global') {
|
|
key = '@global';
|
|
}
|
|
if (key[0] == '@') {
|
|
if (key[1] == 'g') {
|
|
stringify3([], '', 0, value, important);
|
|
} else if (key[1] == 'f') {
|
|
stringify3([], key, 0, value, important);
|
|
} else if (key[1] == 'k') {
|
|
const currentSize = rules2.length;
|
|
stringify3([], '', 0, value, important);
|
|
const waypoints = rules2.splice(currentSize, rules2.length - currentSize);
|
|
rules2.push({
|
|
r: stringifyBlock(
|
|
join(
|
|
waypoints.map((p) => p.r),
|
|
''
|
|
),
|
|
key
|
|
),
|
|
p: waypoints.reduce((sum, p) => sum + p.p, 0),
|
|
});
|
|
} else if (key[1] == 'i') {
|
|
(Array.isArray(value) ? value : [value]).forEach(
|
|
(value2) => value2 && rules2.push({ p: 0, r: `${key} ${value2};` })
|
|
);
|
|
} else {
|
|
if (key[2] == 'c') {
|
|
key = buildMediaQuery(context.theme('screens', tail(key, 8).trim()));
|
|
}
|
|
stringify3(
|
|
[...atRules, key],
|
|
selector,
|
|
presedence | responsivePrecedence(key) | atRulePresedence(key),
|
|
value,
|
|
important
|
|
);
|
|
}
|
|
} else {
|
|
stringify3(
|
|
atRules,
|
|
selector
|
|
? join(
|
|
selector.split(/,(?![^[]*])/g).map((selectorPart) =>
|
|
join(
|
|
key
|
|
.split(/,(?![^[]*])/g)
|
|
.map((keyPart) =>
|
|
includes(keyPart, '&')
|
|
? keyPart.replace(/&/g, selectorPart)
|
|
: (selectorPart && selectorPart + ' ') + keyPart
|
|
),
|
|
','
|
|
)
|
|
),
|
|
','
|
|
)
|
|
: key,
|
|
presedence,
|
|
value,
|
|
important
|
|
);
|
|
}
|
|
}
|
|
});
|
|
if (numberOfDeclarations) {
|
|
rules2.push({
|
|
r: atRules.reduceRight(stringifyBlock, stringifyBlock(declarations, selector)),
|
|
p:
|
|
presedence * (1 << 8) +
|
|
(((Math.max(0, 15 - numberOfDeclarations) & 15) << 4) |
|
|
((maxPropertyPresedence || 15) & 15)),
|
|
});
|
|
}
|
|
};
|
|
const variantPresedence = makeVariantPresedenceCalculator(theme2, variants);
|
|
return (css, className, rule, layer = 0) => {
|
|
layer <<= 28;
|
|
rules2 = [];
|
|
stringify3(
|
|
[],
|
|
className ? '.' + escape(className) : '',
|
|
rule ? rule.v.reduceRight(variantPresedence, layer) : layer,
|
|
css,
|
|
rule && rule.i
|
|
);
|
|
return rules2;
|
|
};
|
|
};
|
|
|
|
// src/twind/inject.ts
|
|
var inject = (sheet, mode2, init, context) => {
|
|
let sortedPrecedences;
|
|
init((value = []) => (sortedPrecedences = value));
|
|
let insertedRules;
|
|
init((value = new Set()) => (insertedRules = value));
|
|
return ({ r: css, p: presedence }) => {
|
|
if (!insertedRules.has(css)) {
|
|
insertedRules.add(css);
|
|
const index = sortedInsertionIndex(sortedPrecedences, presedence);
|
|
try {
|
|
sheet.insert(css, index);
|
|
sortedPrecedences.splice(index, 0, presedence);
|
|
} catch (error) {
|
|
if (!/:-[mwo]/.test(css)) {
|
|
mode2.report({ id: 'INJECT_CSS_ERROR', css, error }, context);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
};
|
|
|
|
// src/twind/configure.ts
|
|
var sanitize = (value, defaultValue, disabled, enabled = defaultValue) =>
|
|
value === false ? disabled : value === true ? enabled : value || defaultValue;
|
|
var loadMode = (mode2) =>
|
|
(typeof mode2 == 'string' ? { t: strict, a: warn, i: silent }[mode2[1]] : mode2) || warn;
|
|
var stringifyVariant = (selector, variant) =>
|
|
selector + (variant[1] == ':' ? tail(variant, 2) + ':' : tail(variant)) + ':';
|
|
var stringify2 = (rule, directive2 = rule.d) =>
|
|
typeof directive2 == 'function'
|
|
? ''
|
|
: rule.v.reduce(stringifyVariant, '') +
|
|
(rule.i ? '!' : '') +
|
|
(rule.n ? '-' : '') +
|
|
directive2;
|
|
var COMPONENT_PROPS = { _: { value: '', writable: true } };
|
|
var configure = (config = {}) => {
|
|
const theme2 = makeThemeResolver(config.theme);
|
|
const mode2 = loadMode(config.mode);
|
|
const hash = sanitize(config.hash, false, false, cyrb32);
|
|
const important = config.important;
|
|
let activeRule = { v: [] };
|
|
let translateDepth = 0;
|
|
const lastTranslations = [];
|
|
const context = {
|
|
tw: (...tokens) => process(tokens),
|
|
theme: (section, key, defaultValue) => {
|
|
var _a;
|
|
const value =
|
|
(_a = theme2(section, key, defaultValue)) != null
|
|
? _a
|
|
: mode2.unknown(
|
|
section,
|
|
key == null || Array.isArray(key) ? key : key.split('.'),
|
|
defaultValue != null,
|
|
context
|
|
);
|
|
return activeRule.n && value && includes('rg', (typeof value)[5])
|
|
? `calc(${value} * -1)`
|
|
: value;
|
|
},
|
|
tag: (value) => (hash ? hash(value) : value),
|
|
css: (rules2) => {
|
|
translateDepth++;
|
|
const lastTranslationsIndex = lastTranslations.length;
|
|
try {
|
|
(typeof rules2 == 'string' ? parse([rules2]) : rules2).forEach(convert);
|
|
const css = Object.create(null, COMPONENT_PROPS);
|
|
for (let index = lastTranslationsIndex; index < lastTranslations.length; index++) {
|
|
const translation = lastTranslations[index];
|
|
if (translation) {
|
|
switch (typeof translation) {
|
|
case 'object':
|
|
merge(css, translation, context);
|
|
break;
|
|
case 'string':
|
|
css._ += (css._ && ' ') + translation;
|
|
}
|
|
}
|
|
}
|
|
return css;
|
|
} finally {
|
|
lastTranslations.length = lastTranslationsIndex;
|
|
translateDepth--;
|
|
}
|
|
},
|
|
};
|
|
|
|
const translate2 = translate({ ...corePlugins, ...config.plugins }, context);
|
|
const doTranslate = (rule) => {
|
|
const parentRule = activeRule;
|
|
activeRule = rule;
|
|
try {
|
|
return evalThunk(translate2(rule), context);
|
|
} finally {
|
|
activeRule = parentRule;
|
|
}
|
|
};
|
|
const variants = { ...coreVariants, ...config.variants };
|
|
const decorate2 = decorate(config.darkMode || 'media', variants, context);
|
|
const serialize2 = serialize(
|
|
sanitize(config.prefix, autoprefix, noprefix),
|
|
variants,
|
|
context
|
|
);
|
|
const sheet =
|
|
config.sheet || (typeof window == 'undefined' ? voidSheet() : cssomSheet(config));
|
|
const { init = (callback) => callback() } = sheet;
|
|
const inject2 = inject(sheet, mode2, init, context);
|
|
let idToClassName;
|
|
init((value = new Map()) => (idToClassName = value));
|
|
const inlineDirectiveName = new WeakMap();
|
|
const evaluateFunctions = (key, value) =>
|
|
key == '_'
|
|
? void 0
|
|
: typeof value == 'function'
|
|
? JSON.stringify(evalThunk(value, context), evaluateFunctions)
|
|
: value;
|
|
const convert = (rule) => {
|
|
if (!translateDepth && activeRule.v.length) {
|
|
rule = { ...rule, v: [...activeRule.v, ...rule.v], $: '' };
|
|
}
|
|
if (!rule.$) {
|
|
rule.$ = stringify2(rule, inlineDirectiveName.get(rule.d));
|
|
}
|
|
let className = translateDepth ? null : idToClassName.get(rule.$);
|
|
if (className == null) {
|
|
let translation = doTranslate(rule);
|
|
if (!rule.$) {
|
|
rule.$ = cyrb32(JSON.stringify(translation, evaluateFunctions));
|
|
inlineDirectiveName.set(rule.d, rule.$);
|
|
rule.$ = stringify2(rule, rule.$);
|
|
}
|
|
if (translation && typeof translation == 'object') {
|
|
rule.v = rule.v.map(prepareVariantSelector);
|
|
if (important) rule.i = important;
|
|
translation = decorate2(translation, rule);
|
|
if (translateDepth) {
|
|
lastTranslations.push(translation);
|
|
} else {
|
|
const layer =
|
|
typeof rule.d == 'function' ? (typeof translation._ == 'string' ? 1 : 3) : 2;
|
|
className =
|
|
hash || typeof rule.d == 'function' ? (hash || cyrb32)(layer + rule.$) : rule.$;
|
|
serialize2(translation, className, rule, layer).forEach(inject2);
|
|
if (translation._) {
|
|
className += ' ' + translation._;
|
|
}
|
|
}
|
|
} else {
|
|
if (typeof translation == 'string') {
|
|
className = translation;
|
|
} else {
|
|
className = rule.$;
|
|
mode2.report({ id: 'UNKNOWN_DIRECTIVE', rule: className }, context);
|
|
}
|
|
if (translateDepth && typeof rule.d !== 'function') {
|
|
lastTranslations.push(className);
|
|
}
|
|
}
|
|
if (!translateDepth) {
|
|
idToClassName.set(rule.$, className);
|
|
ensureMaxSize(idToClassName, 3e4);
|
|
}
|
|
}
|
|
return className;
|
|
};
|
|
const process = (tokens) => join(parse(tokens).map(convert).filter(Boolean), ' ');
|
|
const preflight = sanitize(config.preflight, identity, false);
|
|
if (preflight) {
|
|
const css = createPreflight(theme2);
|
|
const styles = serialize2(
|
|
typeof preflight == 'function'
|
|
? evalThunk(preflight(css, context), context) || css
|
|
: { ...css, ...preflight }
|
|
);
|
|
init((injected = (styles.forEach(inject2), true)) => injected);
|
|
}
|
|
return {
|
|
init: () => mode2.report({ id: 'LATE_SETUP_CALL' }, context),
|
|
process,
|
|
};
|
|
};
|
|
|
|
// src/twind/instance.ts
|
|
var create = (config) => {
|
|
let process = (tokens) => {
|
|
init();
|
|
return process(tokens);
|
|
};
|
|
let init = (config2) => {
|
|
({ process, init } = configure(config2));
|
|
};
|
|
if (config) init(config);
|
|
let context;
|
|
const fromContext = (key) => () => {
|
|
if (!context) {
|
|
process([
|
|
(_4) => {
|
|
context = _4;
|
|
return '';
|
|
},
|
|
]);
|
|
}
|
|
return context[key];
|
|
};
|
|
return {
|
|
tw: Object.defineProperties((...tokens) => process(tokens), {
|
|
theme: {
|
|
get: fromContext('theme'),
|
|
},
|
|
}),
|
|
|
|
setup: (config2) => init(config2),
|
|
};
|
|
};
|
|
|
|
// src/twind/default.ts
|
|
var { tw, setup } = /* @__PURE__ */ create();
|
|
export {
|
|
apply,
|
|
autoprefix,
|
|
create,
|
|
cssomSheet,
|
|
directive,
|
|
cyrb32 as hash,
|
|
mode,
|
|
noprefix,
|
|
setup,
|
|
silent,
|
|
strict,
|
|
theme,
|
|
tw,
|
|
voidSheet,
|
|
warn,
|
|
};
|