@beamwind/core
Version:
compiles tailwind like shorthand syntax into css at runtime
1,291 lines (1,273 loc) • 43.5 kB
JavaScript
var __assign = Object.assign;
// src/is.ts
var is = (value, type) => typeof value === type;
var string = (value) => is(value, "string");
var object = (value) => value != null && is(value, "object");
var array = Array.isArray;
var fn = (value) => is(value, "function");
// src/util.ts
var join = (parts, separator = "-") => parts.join(separator);
var joinTruthy = (parts, separator) => join(parts.filter(Boolean), separator);
var tail = (array2, startIndex = 1) => array2.slice(startIndex);
var identity = (value) => value;
var capitalize = (value) => value[0].toUpperCase() + tail(value);
var uppercasePattern = /([A-Z])/g;
var prefixAndLowerCase = (char) => `-${char.toLowerCase()}`;
var hyphenate = (value) => value.replace(uppercasePattern, prefixAndLowerCase);
var createCache = () => {
if (typeof Map === "function") {
return new Map();
}
const store = Object.create(null);
return {
has(key) {
return key in store;
},
get(key) {
return store[key];
},
set(key, value) {
store[key] = value;
}
};
};
var interleave = (strings, interpolations) => {
const result = [strings[0]];
for (let index = 0; index < interpolations.length; ) {
if (string(interpolations[index])) {
;
result[result.length - 1] += interpolations[index] + strings[++index];
} else {
if (interpolations[index]) {
result.push(interpolations[index]);
}
result.push(strings[++index]);
}
}
return result;
};
var asTokens = (tokens) => array(tokens[0]) && array(tokens[0].raw) ? interleave(tokens[0], tail(tokens)) : tokens;
var sortedInsertionIndex = (array2, element) => {
let high = array2.length;
if (high === 0)
return 0;
for (let low = 0; low < high; ) {
const pivot = high + low >> 1;
if (array2[pivot] <= element) {
low = pivot + 1;
} else {
high = pivot;
}
}
return high;
};
var merge = (a, b) => a && b ? __assign(__assign({}, a), b) : a || b || {};
// src/css.ts
var escape = typeof CSS !== "undefined" && CSS.escape || ((className) => className.replace(/[!"#$%&'()*+,./:;<=>?@[\]^`{|}~]/g, "\\$&"));
var isGroupVariant = (variant) => variant.slice(0, 7) === ":group-";
var isPseudoVariant = (variant) => variant[0] === ":" && !isGroupVariant(variant);
var isAtRuleVariant = (variant) => variant[0] === "@";
var toClassName = (token, variants3) => {
const base = join(variants3, "");
return (base && tail(base) + ":") + token;
};
var createSelector = (className, variants3, selectorDecorator, tag) => selectorDecorator(variants3.reduce((selector, variant) => (isGroupVariant(variant) ? `.${escape(tag("group"))}:${tail(variant, 7)} ` : "") + selector + (isPseudoVariant(variant) ? variant : ""), "." + escape(className)));
var createRule = (className, variants3, declaration, selectorDecorator, tag) => variants3.reduceRight((rule, variant) => isAtRuleVariant(variant) ? `${variant}{${rule}}` : rule, `${createSelector(className, variants3, selectorDecorator, tag)}{${declaration}}`);
// src/env.ts
var isBrowser = typeof window !== "undefined";
// src/injectors.ts
var STYLE_ELEMENT_ID = "__beamwind";
var getStyleElement = (nonce) => {
let element = document.getElementById(STYLE_ELEMENT_ID);
if (!element) {
element = document.createElement("style");
element.id = STYLE_ELEMENT_ID;
nonce && (element.nonce = nonce);
document.head.appendChild(element);
}
return element;
};
var virtualInjector = ({target = []} = {}) => ({
target,
insert: (rule, index) => target.splice(index, 0, rule)
});
var cssomInjector = ({
nonce,
target = getStyleElement(nonce).sheet
} = {}) => ({
target,
insert: target.insertRule.bind(target)
});
var noOpInjector = () => ({
target: null,
insert: () => {
}
});
// src/theme.ts
var resolveContext = {
breakpoints: (source) => Object.keys(source).reduce((target, key) => {
target["screen-" + key] = source[key];
return target;
}, {})
};
var createThemeResolver = (source, extend) => {
const cache = createCache();
const resolveSection = (object2, section) => {
const base = object2[section];
return fn(base) ? base(resolver, resolveContext) : base;
};
const resolver = (section, key, defaultValue) => {
let base = cache.get(section);
if (!base) {
base = merge(resolveSection(source, section), resolveSection(extend, section));
cache.set(section, base);
}
if (key) {
let value = base[key];
if (fn(value)) {
value = value(resolver, resolveContext);
}
return value == null ? defaultValue : value;
}
return base;
};
resolver.extend = (overrides) => {
overrides = fn(overrides) ? overrides(resolver) : overrides;
return createThemeResolver(merge(source, overrides), overrides && overrides.extend ? Object.keys(overrides.extend).reduce((extend2, section) => {
extend2[section] = merge(extend2[section], overrides.extend[section]);
return extend2;
}, merge({}, extend)) : extend);
};
return resolver;
};
var theme = createThemeResolver({
screens: {
sm: "640px",
md: "768px",
lg: "1024px",
xl: "1280px",
"2xl": "1536px"
},
colors: {
transparent: "transparent",
current: "currentColor"
},
durations: {},
spacing: {
px: "1px",
0: "0px"
},
animation: {
none: "none"
},
backgroundColor: (theme5) => theme5("colors"),
backgroundImage: {
none: "none"
},
backgroundOpacity: (theme5) => theme5("opacity"),
borderColor: (theme5) => __assign(__assign({}, theme5("colors")), {
DEFAULT: "currentColor"
}),
borderOpacity: (theme5) => theme5("opacity"),
borderRadius: {
none: "0px",
DEFAULT: "0.25rem",
full: "9999px"
},
borderWidth: {
DEFAULT: "1px"
},
boxShadow: {
none: "0 0 transparent"
},
divideColor: (theme5) => theme5("borderColor"),
divideOpacity: (theme5) => theme5("borderOpacity"),
divideWidth: (theme5) => theme5("borderWidth"),
fill: {current: "currentColor"},
flex: {
1: "1 1 0%",
auto: "1 1 auto",
initial: "0 1 auto",
none: "none"
},
fontFamily: {
sans: "ui-sans-serif,system-ui,sans-serif",
serif: "ui-serif,serif",
mono: "ui-monospace,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: (theme5) => theme5("spacing"),
gradientColorStops: (theme5) => theme5("colors"),
height: (theme5) => __assign(__assign({
auto: "auto"
}, theme5("spacing")), {
full: "100%",
screen: "100vh"
}),
inset: (theme5) => __assign(__assign({
auto: "auto"
}, theme5("spacing")), {
full: "100%"
}),
keyframes: {},
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"
},
margin: (theme5) => __assign({
auto: "auto"
}, theme5("spacing")),
maxHeight: (theme5) => __assign(__assign({}, theme5("spacing")), {
full: "100%",
screen: "100vh"
}),
maxWidth: (theme5, {breakpoints}) => __assign({
none: "none",
0: "0rem",
full: "100%",
min: "min-content",
max: "max-content"
}, breakpoints(theme5("screens"))),
minHeight: {
0: "0px",
full: "100%",
screen: "100vh"
},
minWidth: {
0: "0px",
full: "100%",
min: "min-content",
max: "max-content"
},
opacity: {
0: "0",
25: "0.25",
50: "0.5",
75: "0.75",
100: "1"
},
order: {
first: "-9999",
last: "9999",
none: "0"
},
outline: {
none: ["2px solid transparent", "2px"]
},
padding: (theme5) => theme5("spacing"),
placeholderColor: (theme5) => theme5("colors"),
placeholderOpacity: (theme5) => theme5("opacity"),
ringColor: (theme5) => theme5("colors"),
ringOffsetColor: (theme5) => theme5("colors"),
ringOffsetWidth: {},
ringOpacity: (theme5) => theme5("opacity"),
ringWidth: {
DEFAULT: "3px"
},
rotate: {},
scale: {},
skew: {},
space: (theme5) => theme5("spacing"),
stroke: {
current: "currentColor"
},
strokeWidth: {},
textColor: (theme5) => theme5("colors"),
textOpacity: (theme5) => theme5("opacity"),
transitionDuration: (theme5) => __assign({
DEFAULT: "150ms"
}, theme5("durations")),
transitionDelay: (theme5) => theme5("durations"),
transitionProperty: {
none: "none",
all: "all",
DEFAULT: "background-color,border-color,color,fill,stroke,opacity,box-shadow,transform",
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)"
},
translate: (theme5) => __assign(__assign({}, theme5("spacing")), {
full: "100%"
}),
width: (theme5) => __assign(__assign({
auto: "auto"
}, theme5("spacing")), {
full: "100%",
screen: "100vw",
min: "min-content",
max: "max-content"
}),
zIndex: {
auto: "auto"
}
}, {});
// src/prefix.ts
import {prefixProperty, prefixValue} from "tiny-css-prefixer";
var autoprefix = (property, value) => {
const declaration = `${property}:${prefixValue(property, value)}`;
let cssText = declaration;
const flag = prefixProperty(property);
if (flag & 1)
cssText += `;-ms-${declaration}`;
if (flag & 2)
cssText += `;-moz-${declaration}`;
if (flag & 4)
cssText += `;-webkit-${declaration}`;
return cssText;
};
var noprefix = (property, value) => `${property}:${value}`;
// src/hash.ts
var imul = Math.imul || ((opA, opB) => {
opB |= 0;
let result = (opA & 4194303) * opB;
if (opA & 4290772992)
result += (opA & 4290772992) * opB | 0;
return result | 0;
});
var cyrb32 = (value) => {
let h = 9;
for (let index = value.length; index--; ) {
h = imul(h ^ value.charCodeAt(index), 1597334677);
}
return "_" + ((h ^ h >>> 9) >>> 0).toString(36);
};
// src/variants.ts
var size;
var variants = {
":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)"
};
var createVariant = (variant, theme5) => (size = theme5("screens", tail(variant))) ? `@media (min-width: ${size})` : variants[variant] || variant;
// src/precedence.ts
var precedence;
var match;
var responsivePrecedence = (css3) => (match = /\(\s*min-width:\s*(\d+(?:.\d+)?)(p)?/.exec(css3)) ? +match[1] / (match[2] ? 15 : 1) / 10 : 0;
var seperatorPrecedence = (string2) => {
precedence = 0;
for (let index = string2.length; index--; ) {
if (~"-:,".indexOf(string2[index])) {
++precedence;
}
}
return precedence;
};
var PRECEDENCES_BY_PSEUDO_CLASS = [
"rst",
"st",
"h-chi",
"nk",
"sited",
"pty",
"ecked",
"oup-h",
"oup-f",
"cus-w",
"ver",
"cus",
"cus-v",
"tive",
"sable"
];
var pseudoPrecedence = (pseudoClass) => ~(precedence = PRECEDENCES_BY_PSEUDO_CLASS.indexOf(pseudoClass.slice(3, 8))) ? precedence : PRECEDENCES_BY_PSEUDO_CLASS.length;
var accumulatePseudoPrecedence = (precedence3, variant) => {
return precedence3 | (isAtRuleVariant(variant) ? 0 : 1 << pseudoPrecedence(variant));
};
var PROPERTY_PRECEDENCE_CORRECTION_GROUPS = /^(?:(border-(?:[tlbr].{2,4}-)?(?:w|c|sty)|[tlbr].{2,4}m?$|c.{7}$)|([fl].{5}l|g.{8}$|pl))/;
var propertyPrecedence = (property) => {
const unprefixedProperty = property[0] === "-" ? tail(property, property.indexOf("-", 1) + 1) : property;
const match2 = PROPERTY_PRECEDENCE_CORRECTION_GROUPS.exec(unprefixedProperty);
return seperatorPrecedence(unprefixedProperty) + (match2 ? +!!match2[1] || -!!match2[2] : 0) + 1;
};
var declarationPropertyPrecedence = (property) => property[0] === "-" ? 0 : propertyPrecedence(property);
var descending = (value) => Math.max(0, 15 - value);
var declarationValuePrecedence = (property, value) => descending(seperatorPrecedence(value));
var declarationsCountPrecedence = (declarations) => descending(Object.keys(declarations).filter((property) => declarations[property]).length);
var max = (declarations, iteratee) => Object.keys(declarations).reduce((result, property) => declarations[property] ? Math.max(result, iteratee(property, declarations[property])) : result, 0);
var calculatePrecedence = (darkMode, variantsCss, declarations) => {
const rp = responsivePrecedence(variantsCss[0] || "");
return ((rp & 31) << 21 | +darkMode << 20 | (seperatorPrecedence(join((rp ? tail(variantsCss) : variantsCss).filter(isAtRuleVariant), ";")) & 15) << 16 | variantsCss.reduce(accumulatePseudoPrecedence, 0) & 65535) * (1 << 12) + ((declarationsCountPrecedence(declarations) & 15) << 8 | (max(declarations, declarationPropertyPrecedence) & 15) << 4 | max(declarations, declarationValuePrecedence) & 15);
};
// src/helpers.ts
var apply = (...tokens) => (parse2) => parse2(asTokens(tokens));
var positions = (resolve) => (value, position2, prefix2, suffix) => {
if (value) {
const properties = position2 && resolve(position2);
if (properties && properties.length > 0) {
return properties.reduce((declarations, property) => {
declarations[joinTruthy([prefix2, property, suffix])] = value;
return declarations;
}, {});
}
}
};
var CORNERS = {
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"]
};
var corners = positions((key) => CORNERS[key]);
var X_Y_TO_EDGES = {x: "lr", y: "tb"};
var EDGES = {
t: "top",
r: "right",
b: "bottom",
l: "left"
};
var expandEdges = (key) => {
const parts = (X_Y_TO_EDGES[key] || key || "").split("").sort().reduce((result, edge) => {
if (result && EDGES[edge]) {
result.push(EDGES[edge]);
return result;
}
}, []);
if (parts && parts.length > 0)
return parts;
};
var edges = positions(expandEdges);
// src/plugins.ts
var _;
var __;
var $;
var parseColorComponent = (chars, factor) => Math.round(parseInt(chars, 16) * factor);
var asRGBA = (color, opacityProperty2, opacityDefault) => {
if (color && color[0] === "#") {
const length = (color.length - 1) / 3;
const factor = [17, 1, 0.062272][length - 1];
return `rgba(${parseColorComponent(color.substr(1, length), factor)},${parseColorComponent(color.substr(1 + length, length), factor)},${parseColorComponent(color.substr(1 + 2 * length, length), factor)},var(--${opacityProperty2}${opacityDefault ? "," + opacityDefault : ""}))`;
}
return color;
};
var withOpacityFallback = (property, kind, color, tag) => color ? {
[`--${tag(kind + "-opacity")}`]: "1",
[property]: (_ = asRGBA(color, tag(kind + "-opacity"))) && _ !== color ? [color, _] : color
} : void 0;
var reversableEdge = (parts, theme5, section, tag, prefix2, suffix) => (_ = {x: ["right", "left"], y: ["bottom", "top"]}[parts[1]]) && ($ = `--${tag(`${parts[0]}-${parts[1]}-reverse`)}`) ? parts[2] === "reverse" ? {
[$]: "1"
} : {
[$]: "0",
[joinTruthy([prefix2, _[0], suffix])]: (__ = theme5(section, tail(parts, 2))) && `calc(${__} * var(${$}))`,
[joinTruthy([prefix2, _[1], suffix])]: __ && [__, `calc(${__} * calc(1 - var(${$})))`]
} : void 0;
var propertyValue = (property, separator) => (parts) => ({[property]: join(tail(parts), separator)});
var themeProperty = (section) => (parts, theme5) => ({
[hyphenate(section)]: theme5(section, tail(parts))
});
var propertyAndValue = (parts) => propertyValue(parts[0])(parts);
var display = (parts) => ({display: join(parts)});
var position = (parts) => ({position: parts[0]});
var textTransform = (parts) => ({"text-transform": parts[0]});
var textDecoration = (parts) => ({"text-decoration": join(parts)});
var inset = (parts, theme5) => ({[parts[0]]: theme5("inset", tail(parts))});
var opacityProperty = (parts, theme5, tag, sectionPrefix = parts[0]) => ({
[`--${tag(parts[0] + "-opacity")}`]: theme5(sectionPrefix + "Opacity", tail(parts, 2))
});
var border = (parts, theme5, tag) => {
switch (parts[1]) {
case "solid":
case "dashed":
case "dotted":
case "double":
case "none":
return propertyValue("border-style")(parts);
case "collapse":
case "separate":
return propertyValue("border-collapse")(parts);
case "opacity":
return opacityProperty(parts, theme5, tag);
}
return (_ = theme5(`${parts[0]}Width`, tail(parts), "")) ? {"border-width": _} : withOpacityFallback("border-color", parts[0], theme5(`${parts[0]}Color`, tail(parts)), tag);
};
var minMax = (parts, theme5) => (_ = {w: "width", h: "height"}[parts[1]]) && {
[`${parts[0]}-${_}`]: theme5(`${parts[0]}${capitalize(_)}`, tail(parts, 2))
};
var edgesPluginFor = (key) => (parts, theme5) => parts[0][1] ? edges(theme5(key, tail(parts)), parts[0][1], key) : {[key]: theme5(key, tail(parts))};
var padding = edgesPluginFor("padding");
var margin = edgesPluginFor("margin");
var gridPlugin = (kind) => (parts) => {
switch (parts[1]) {
case "auto":
return {[`grid-${kind}`]: "auto"};
case "span":
return parts[2] && {
[`grid-${kind}`]: parts[2] === "full" ? "1 / -1" : `span ${parts[2]} / span ${parts[2]}`
};
case "start":
case "end":
return parts.length === 3 && {
[`grid-${kind}-${parts[1]}`]: parts[2]
};
}
};
var placeHelper = (property, parts) => ({
[property]: (~"wun".indexOf(parts[1][3]) ? "space-" : "") + parts[1]
});
var contentPluginFor = (property) => (parts) => {
switch (parts[1]) {
case "start":
case "end":
return {[property]: `flex-${parts[1]}`};
}
return placeHelper(property, parts);
};
var transform = (tag, gpu) => `${gpu ? `translate3d(var(--${tag("translate-x")},0),var(--${tag("translate-y")},0),0)` : `translateX(var(--${tag("translate-x")},0)) translateY(var(--${tag("translate-y")},0))`} rotate(var(--${tag("rotate")},0)) skewX(var(--${tag("skew-x")},0)) skewY(var(--${tag("skew-y")},0)) scaleX(var(--${tag("scale-x")},1)) scaleY(var(--${tag("scale-y")},1))`;
var transformFunction = (parts, theme5, {tag}) => (_ = theme5(parts[0], parts[2] || parts[1])) && {
[`--${tag(parts[0] + "-x")}`]: parts[1] !== "y" && _,
[`--${tag(parts[0] + "-y")}`]: parts[1] !== "x" && _,
transform: [`${parts[0]}${parts[2] ? parts[1].toUpperCase() : ""}(${_})`, transform(tag)]
};
var boxShadow = (tag) => `var(--${tag("ring-offset-shadow")},0 0 transparent),var(--${tag("ring-shadow")},0 0 transparent),var(--${tag("shadow")},0 0 transparent)`;
var gradientColorStop = (parts, theme5, {tag}) => (_ = theme5("gradientColorStops", tail(parts))) && {
[`--${tag("gradient-" + parts[0])}`]: _
};
var utilities = {
shadow: (parts, theme5, {tag}) => (_ = theme5("boxShadow", tail(parts))) && {
[`--${tag("shadow")}`]: _,
"box-shadow": [_, boxShadow(tag)]
},
ring(parts, theme5, {tag}) {
switch (parts[1]) {
case "inset":
return {[`--${tag("ring-inset")}`]: "inset"};
case "opacity":
return opacityProperty(parts, theme5, tag);
case "offset":
return (_ = theme5("ringOffsetWidth", tail(parts, 2), "")) ? {
[`--${tag("ring-offset-width")}`]: _
} : {
[`--${tag("ring-offset-color")}`]: theme5("ringOffsetColor", tail(parts, 2))
};
}
return (_ = theme5("ringWidth", tail(parts), "")) ? {
[`--${tag("ring-offset-shadow")}`]: `var(--${tag("ring-inset")},/*!*/ /*!*/) 0 0 0 var(--${tag("ring-offset-width")},${theme5("ringOffsetWidth", "", "0px")}) var(--${tag("ring-offset-color")},${theme5("ringOffsetColor", "", "#fff")})`,
[`--${tag("ring-shadow")}`]: `var(--${tag("ring-inset")},/*!*/ /*!*/) 0 0 0 calc(${_} + var(--${tag("ring-offset-width")},${theme5("ringOffsetWidth", "", "0px")})) var(--${tag("ring-color")},${theme5("ringColor", "", asRGBA(theme5("ringColor", "", "#93c5fd"), tag("ring-opacity"), theme5("ringOpacity", "", "0.5")))})`,
"box-shadow": boxShadow(tag)
} : {
[`--${tag("ring-opacity")}`]: "1",
[`--${tag("ring-color")}`]: asRGBA(theme5("ringColor", tail(parts)), tag("ring-opacity"))
};
},
duration: themeProperty("transitionDuration"),
delay: themeProperty("transitionDelay"),
tracking: themeProperty("letterSpacing"),
leading: themeProperty("lineHeight"),
z: themeProperty("zIndex"),
opacity: themeProperty("opacity"),
ease: themeProperty("transitionTimingFunction"),
w: themeProperty("width"),
h: themeProperty("height"),
fill: themeProperty("fill"),
order: themeProperty("order"),
origin: propertyValue("transform-origin", " "),
select: propertyValue("user-select"),
"pointer-events": propertyValue("pointer-events"),
align: propertyValue("vertical-align"),
whitespace: propertyValue("white-space"),
transform: (parts, theme5, {tag}) => parts[1] === "none" ? {transform: "none"} : {
[`--${tag("translate-x")}`]: "0",
[`--${tag("translate-y")}`]: "0",
[`--${tag("rotate")}`]: "0",
[`--${tag("skew-x")}`]: "0",
[`--${tag("skew-y")}`]: "0",
[`--${tag("scale-x")}`]: "1",
[`--${tag("scale-y")}`]: "1",
transform: transform(tag, parts[1] === "gpu")
},
rotate: (parts, theme5, {tag}) => (_ = theme5("rotate", tail(parts))) && {
[`--${tag("rotate")}`]: _,
transform: [`rotate(${_})`, transform(tag)]
},
scale: transformFunction,
translate: transformFunction,
skew: transformFunction,
gap: (parts, theme5) => (_ = {x: "column", y: "row"}[parts[1]]) ? {[_ + "-gap"]: theme5("gap", tail(parts, 2))} : themeProperty("gap")(parts, theme5),
stroke: (parts, theme5) => (_ = theme5("stroke", tail(parts), "")) ? {stroke: _} : themeProperty("strokeWidth")(parts, theme5),
outline: (parts, theme5) => (_ = theme5("outline", tail(parts))) && {
outline: _[0],
"outline-offset": _[1]
},
break(parts) {
switch (parts[1]) {
case "normal":
return {
"word-break": "normal",
"overflow-wrap": "normal"
};
case "words":
return {"overflow-wrap": "break-word"};
case "all":
return {"word-break": "break-all"};
}
},
underline: textDecoration,
"no-underline": textDecoration(["none"]),
"line-through": textDecoration,
"text-underline": textDecoration(["underline"]),
"text-no-underline": textDecoration(["none"]),
"text-line-through": textDecoration(["line", "through"]),
uppercase: textTransform,
lowercase: textTransform,
capitalize: textTransform,
"normal-case": textTransform(["none"]),
"text-normal-case": textTransform(["none"]),
text(parts, theme5, {tag}) {
switch (parts[1]) {
case "left":
case "center":
case "right":
case "justify":
return propertyValue("text-align")(parts);
case "uppercase":
case "lowercase":
case "capitalize":
return textTransform(tail(parts));
case "opacity":
return opacityProperty(parts, theme5, tag);
}
const fontSize = theme5("fontSize", tail(parts), "");
if (fontSize) {
return string(fontSize) ? {"font-size": fontSize} : {
"font-size": fontSize[0],
"line-height": string(fontSize[1]) ? fontSize[1] : fontSize[1].lineHeight,
"letter-spacing": fontSize[1].letterSpacing
};
}
return withOpacityFallback("color", "text", theme5("textColor", tail(parts)), tag);
},
bg(parts, theme5, {tag}) {
switch (parts[1]) {
case "fixed":
case "local":
case "scroll":
return propertyValue("background-attachment", ",")(parts);
case "bottom":
case "center":
case "left":
case "right":
case "top":
return propertyValue("background-position", " ")(parts);
case "no":
return parts[2] === "repeat" && propertyValue("background-repeat")(parts);
case "auto":
case "cover":
case "contain":
return propertyValue("background-size")(parts);
case "repeat":
switch (parts[2]) {
case "x":
case "y":
return propertyValue("background-repeat")(parts);
}
return {"background-repeat": parts[2] || parts[1]};
case "opacity":
return opacityProperty(parts, theme5, tag, "background");
case "clip":
return {"background-clip": parts[2] + (parts[2] === "text" ? "" : "-box")};
case "gradient":
if (parts[2] === "to" && (_ = expandEdges(parts[3]))) {
return {
"background-image": `linear-gradient(to ${join(_, " ")},var(--${tag("gradient-stops")},var(--${tag("gradient-from")},transparent),var(--${tag("gradient-to")},transparent)))`
};
}
}
return (_ = theme5("backgroundImage", tail(parts), "")) ? {"background-image": _} : merge(withOpacityFallback("background-color", "bg", theme5("backgroundColor", tail(parts)), tag), withOpacityFallback("color", "text", theme5("textColor", parts[1] === "on" ? tail(parts, 2) : ["on"].concat(tail(parts)), ""), tag));
},
from: gradientColorStop,
to: gradientColorStop,
via: (parts, theme5, {tag}) => (_ = theme5("gradientColorStops", tail(parts))) && {
[`--${tag("gradient-stops")}`]: `var(--${tag("gradient-from")},transparent),${_},var(--${tag("gradient-to")},transparent)`
},
rounded: (parts, theme5) => corners(theme5("borderRadius", tail(parts, 2), ""), parts[1], "border", "radius") || themeProperty("borderRadius")(parts, theme5),
"transition-none": {"transition-property": "none"},
transition: (parts, theme5) => ({
transition: joinTruthy([
theme5("transitionProperty", tail(parts)),
theme5("transitionDuration", ""),
theme5("transitionTimingFunction", "")
], " ")
}),
flex(parts, theme5) {
switch (parts[1]) {
case "row":
case "col":
return {
"flex-direction": join(parts[1] === "col" ? ["column"].concat(tail(parts, 2)) : tail(parts, 1))
};
case "nowrap":
case "wrap":
return propertyValue("flex-wrap")(parts);
case "grow":
case "shrink":
return {[`flex-${parts[1]}`]: parts[2] || "1"};
}
return (_ = theme5("flex", tail(parts), "")) ? {flex: _} : display(parts);
},
grid(parts) {
switch (parts[1]) {
case "cols":
case "rows":
return parts.length > 2 && {
[`grid-template-${parts[1] === "cols" ? "columns" : parts[1]}`]: parts.length === 3 && Number(parts[2]) ? `repeat(${parts[2]},minmax(0,1fr))` : join(tail(parts, 2), " ")
};
case "flow":
return parts.length > 2 && {
"grid-auto-flow": join(parts[2] === "col" ? ["column"].concat(tail(parts, 3)) : tail(parts, 2), " ")
};
}
return display(parts);
},
auto(parts) {
switch (parts[1]) {
case "cols":
case "rows":
return (_ = parts.length === 3 ? {
auto: "auto",
min: "min-content",
max: "max-content",
fr: "minmax(0,1fr)"
}[parts[2]] || `minmax(0,${parts[2]})` : parts.length > 3 && `minmax(${join(tail(parts, 2), ",")})`) && {
[`grid-auto-${parts[1] === "cols" ? "columns" : "rows"}`]: _
};
}
},
"not-sr-only": {
position: "static",
width: "auto",
height: "auto",
padding: "0",
margin: "0",
overflow: "visible",
clip: "auto",
"white-space": "normal"
},
hidden: display(["none"]),
inline: display,
block: display,
contents: display,
table(parts) {
switch (parts[1]) {
case "auto":
case "fixed":
return propertyValue("table-layout")(parts);
}
return display(parts);
},
flow: display,
d: (parts) => display(tail(parts)),
static: position,
fixed: position,
absolute: position,
relative: position,
sticky: position,
visible: {visibility: "visible"},
invisible: {visibility: "hidden"},
antialiased: {
"-webkit-font-smoothing": "antialiased",
"-moz-osx-font-smoothing": "grayscale"
},
"subpixel-antialiased": {
"-webkit-font-smoothing": "auto",
"-moz-osx-font-smoothing": "auto"
},
truncate: {
overflow: "hidden",
"text-overflow": "ellipsis",
"white-space": "nowrap"
},
resize: (parts) => parts.length <= 2 && {
resize: {x: "vertical", y: "horizontal"}[parts[1]] || parts[1] || "both"
},
clearfix: [
"::after",
{
content: '""',
display: "table",
clear: "both"
}
],
object(parts) {
switch (parts[1]) {
case "contain":
case "cover":
case "fill":
case "none":
case "scale":
return propertyValue("object-fit")(parts);
}
return propertyValue("object-position", " ")(parts);
},
top: inset,
right: inset,
bottom: inset,
left: inset,
inset: (parts, theme5) => (_ = expandEdges(parts[1])) ? edges(theme5("inset", tail(parts, 2)), parts[1]) : (_ = theme5("inset", tail(parts))) && {
top: _,
right: _,
bottom: _,
left: _
},
items(parts) {
switch (parts[1]) {
case "start":
case "end":
return {"align-items": `flex-${parts[1]}`};
}
return propertyValue("align-items")(parts);
},
content: contentPluginFor("align-content"),
justify: contentPluginFor("justify-content"),
self: contentPluginFor("align-self"),
place: (parts) => placeHelper("place-" + parts[1], tail(parts)),
col: gridPlugin("column"),
row: gridPlugin("row"),
list(parts) {
switch (parts[1]) {
case "inside":
case "outside":
return propertyValue("list-style-position")(parts);
}
return propertyValue("list-style-type")(parts);
},
"sr-only": {
position: "absolute",
width: "1px",
height: "1px",
padding: "0",
margin: "-1px",
overflow: "hidden",
clip: "rect(0,0,0,0)",
"white-space": "nowrap",
"border-width": "0"
},
box: (parts) => ({"box-sizing": `${parts[1]}-box`}),
appearance: propertyAndValue,
cursor: propertyAndValue,
float: propertyAndValue,
clear: propertyAndValue,
overflow(parts) {
switch (parts[1]) {
case "ellipsis":
case "clip":
return propertyValue("text-overflow")(parts);
}
return parts[2] ? {[`overflow-${parts[1]}`]: parts[2]} : propertyAndValue(parts);
},
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,
italic: {"font-style": "italic"},
"not-italic": {"font-style": "normal"},
"font-italic": {"font-style": "italic"},
"font-not-italic": {"font-style": "normal"},
font: (parts, theme5) => (_ = theme5("fontFamily", tail(parts), "")) ? {"font-family": _} : themeProperty("fontWeight")(parts, theme5),
space: (parts, theme5, {tag}) => (_ = reversableEdge(parts, theme5, "space", tag, "margin")) && [
">:not([hidden])~:not([hidden])",
_
],
border: (parts, theme5, {tag}) => expandEdges(parts[1]) ? edges(theme5("borderWidth", tail(parts, 2)), parts[1], "border", "width") : border(parts, theme5, tag),
divide: (parts, theme5, {tag}) => (_ = reversableEdge(parts, theme5, "divideWidth", tag, "border", "width") || border(parts, theme5, tag)) && [">:not([hidden])~:not([hidden])", _],
placeholder: (parts, theme5, {tag}) => (_ = parts[1] === "opacity" ? opacityProperty(parts, theme5, tag) : withOpacityFallback("color", "placeholder", theme5("placeholderColor", tail(parts)), tag)) && ["::placeholder", _],
min: minMax,
max: minMax,
animate: (parts, theme5, {keyframes: keyframes2}) => {
const animation = theme5("animation", _ = tail(parts));
return animation && {
animation: string(animation) ? animation : `${keyframes2(animation[1] || join(_))} ${animation[0]}`
};
},
overscroll: (parts) => ({
["overscroll-behavior" + (parts[2] ? "-" + parts[1] : "")]: parts[2] || parts[1]
})
};
// src/modes.ts
var mode = (report) => ({
unknown(section, parts, optional) {
if (!optional) {
report(`No theme value found for ${section}[${JSON.stringify(join(parts) || "DEFAULT")}]`);
}
},
warn(message, directive) {
report((directive ? `[${directive}] ` : "") + message);
}
});
var warn = mode((message) => console.warn(message));
var strict = mode((message) => {
throw new Error(message);
});
// src/context.ts
var withoutDarkVariant = (variant) => variant !== ":dark";
var createContext = (config) => {
let darkMode = "media";
let darkModeClass = "dark";
let activeTheme = theme;
let activePlugins = utilities;
let injector;
let nonce;
const inits = [];
let prefix2 = autoprefix;
let hash2 = cyrb32;
let mode2 = warn;
const idToClassName = createCache();
const cachedClassNames = createCache();
const sortedPrecedences = [];
const withDarkModeClass = (selectorDecorator) => (selector) => `.${darkModeClass} ${selectorDecorator(selector)}`;
const setup2 = (nextConfig) => (array(nextConfig) ? nextConfig : [nextConfig]).forEach(({
darkMode: nextDarkMode = darkMode,
darkModeClass: nextDarkModeClass = darkModeClass,
theme: nextTheme,
plugins: newPlugins,
init,
injector: nextInjector,
nonce: nextNonce = nonce,
prefix: nextPrefix = prefix2,
hash: nextHash = hash2,
mode: nextMode = mode2
} = {}) => {
if (nextInjector && sortedPrecedences.length > 0) {
throw new Error("Changing the injector after first use is not supported");
}
darkMode = nextDarkMode;
darkModeClass = nextDarkModeClass;
nextTheme && (activeTheme = activeTheme.extend(nextTheme));
activePlugins = merge(activePlugins, newPlugins);
init && inits.push(init);
injector = nextInjector || injector;
nonce = nextNonce;
prefix2 = nextPrefix;
hash2 = nextHash;
mode2 = nextMode;
});
const serializeDeclaration = (property, value) => array(value) ? join(value.filter(Boolean).map((value2) => prefix2(property, value2)), ";") : prefix2(property, value);
const serializeDeclarationList = (declarations) => Object.keys(declarations).reduce((body, property) => declarations[property] ? (body && body + ";") + serializeDeclaration(property, declarations[property]) : body, "");
const variantToCss = (variant) => createVariant(variant, activeTheme);
const tag = (directive) => hash2 ? hash2(directive) : directive;
const insert = (rule, presedence) => {
if (!injector) {
injector = isBrowser ? cssomInjector({nonce}) : noOpInjector();
}
const index = sortedInsertionIndex(sortedPrecedences, presedence);
try {
injector.insert(rule, index);
sortedPrecedences.splice(index, 0, presedence);
} catch (error) {
if (!/:-[mwo]/.test(rule)) {
mode2.warn(error.message);
}
}
};
const inject = (id, className, rule, variantsCss, declarations, darkMode2) => {
if (!cachedClassNames.has(className)) {
if (inits.length) {
inits.forEach((init) => init((rule2) => insert(rule2, 0), activeTheme));
inits.length = 0;
}
insert(rule, calculatePrecedence(darkMode2, variantsCss, declarations));
cachedClassNames.set(className, true);
}
idToClassName.set(id, className);
};
setup2(config);
return {
t: (section, keypath, defaultValue) => {
const parts = array(keypath) ? keypath : [keypath];
const value = activeTheme(section, join(parts) || "DEFAULT");
return value == null ? defaultValue || mode2.unknown(section, parts, defaultValue != null, activeTheme) : value;
},
p: (id) => activePlugins[id],
a: tag,
r: (section, key, defaultValue) => activeTheme(section, key, defaultValue),
g: (directive, variants3) => idToClassName.get(toClassName(directive, variants3)),
s: (directive, variants3, className) => idToClassName.set(toClassName(directive, variants3), className),
i(directive, variants3, declarations, selectorDecorator = identity) {
const id = toClassName(directive, variants3);
let className = idToClassName.get(id);
if (!className) {
const useDarkMode = variants3.indexOf(":dark") >= 0;
if (useDarkMode && darkMode === "class") {
selectorDecorator = withDarkModeClass(selectorDecorator);
variants3 = variants3.filter(withoutDarkVariant);
}
const variantsCss = variants3.map(variantToCss);
const declarationBody = serializeDeclarationList(declarations);
className = hash2 ? hash2(join([join(variantsCss, "\0"), selectorDecorator(""), declarationBody], "\0")) : id;
inject(id, className, createRule(className, variantsCss, declarationBody, selectorDecorator, tag), variantsCss, declarations, useDarkMode);
}
return className;
},
k(name, waypoints) {
const id = "\0" + name;
let className = idToClassName.get(id);
if (!className) {
const declarationBody = Object.keys(waypoints).reduce((body, waypoint) => `${body}${waypoint}{${serializeDeclarationList(waypoints[waypoint])}}`, "");
className = hash2 ? hash2(declarationBody) : name;
const rule = `@keyframes ${className}{${declarationBody}}`;
inject(id, className, rule, [rule], {}, false);
}
return className;
},
c: setup2,
w(directive, message) {
mode2.warn(message, directive);
}
};
};
// src/process.ts
var negate;
var currentContext;
var groupings = [];
var classNames = [];
var theme3 = (section, key, defaultValue) => {
const value = currentContext.t(section, key, defaultValue);
return negate && value && string(value) ? `calc(${value} * -1)` : value;
};
var keyframes = (name, waypoints) => currentContext.k(name, waypoints || currentContext.t("keyframes", name) || {});
var processTokenResult = (token, variants3, result) => {
const lastClassNameLength = classNames.length;
startGrouping();
if (string(result)) {
parseString(result);
} else {
result(parse);
}
endGrouping();
currentContext.s(token, variants3, join(tail(classNames, lastClassNameLength), " "));
};
var handlePluginResult = (token, variants3, result) => {
if (fn(result) || string(result)) {
return !processTokenResult(token, variants3, result);
}
let suffix;
if (array(result)) {
suffix = result[0];
result = result[1];
}
if (object(result)) {
return classNames.push(currentContext.i(token, variants3, result, string(suffix) ? (selector) => selector + suffix : suffix));
}
};
var handleNegation = (value) => value[0] === "-" ? (negate = "-", tail(value)) : (negate = "", value);
var translate = (token, variants3) => {
const className = token === "group" && currentContext.a(token) || currentContext.g(token, variants3);
if (className != null) {
return className && classNames.push(className);
}
let directive = token;
directive = handleNegation(directive);
let parts = directive.split("-");
let plugin;
for (let index = parts.length; index; index--) {
const id = join(parts.slice(0, index));
plugin = currentContext.p(id);
if (plugin) {
parts = tail(parts, index);
parts.unshift(id);
break;
}
}
if (!handlePluginResult(token, variants3, fn(plugin) ? plugin(parts, theme3, {keyframes, tag: currentContext.a}) : plugin)) {
currentContext.w(token, plugin ? `Plugin "${parts[0]}" had no result` : `No plugin for "${directive}" found`);
}
};
var reset = (array2) => {
array2.length = 0;
};
var startGrouping = (value = "") => {
groupings.push(value);
return "";
};
var endGrouping = (isWhitespace) => {
const index = groupings.lastIndexOf("");
if (~index) {
groupings.splice(index + ~~isWhitespace, groupings.length - index + ~~isWhitespace);
}
};
var onlyPrefixes = (s) => s && s[0] !== ":";
var onlyVariants = (s) => s[0] === ":";
var translateBuffer = (buffer) => {
if (buffer) {
buffer = handleNegation(buffer);
const p = join(groupings.filter(onlyPrefixes));
translate(buffer === "&" ? p : negate + (p && p + "-") + buffer, groupings.filter(onlyVariants));
}
return "";
};
var parseString = (token, isVariant) => {
let char;
let buffer = "";
for (let position2 = 0; position2 < token.length; ) {
switch (char = token[position2++]) {
case ":":
if (buffer) {
buffer = startGrouping(":" + buffer);
}
break;
case "(":
if (buffer) {
buffer = startGrouping(buffer);
}
startGrouping();
break;
case ")":
case " ":
case " ":
case "\n":
case "\r":
buffer = translateBuffer(buffer);
endGrouping(char !== ")");
break;
default:
buffer += char;
}
}
if (isVariant) {
if (buffer) {
startGrouping(":" + buffer);
}
} else {
translateBuffer(buffer);
}
};
var parseGroupedToken = (token) => {
if (token) {
startGrouping();
parse(token);
endGrouping();
}
};
var parseGroup = (key, token) => {
if (token) {
startGrouping();
const isVariant = string(token) || array(token) || object(token) || fn(token);
parseString(key, isVariant);
if (isVariant) {
parseGroupedToken(token);
}
endGrouping();
}
};
var nextTokenId = 0;
var parse = (token) => {
if (string(token)) {
parseString(token);
} else if (array(token)) {
token.forEach(parseGroupedToken);
} else if (fn(token)) {
handlePluginResult(`__${token.name}_${(++nextTokenId).toString(36)}`, groupings.filter(onlyVariants), token(theme3, {keyframes, tag: currentContext.a}));
} else if (object(token)) {
Object.keys(token).forEach((key) => {
parseGroup(key, token[key]);
});
}
};
var process = (token, context2) => {
if (currentContext) {
throw new Error("There is already an active context");
}
currentContext = context2;
reset(classNames);
reset(groupings);
try {
token.forEach(parseGroupedToken);
} finally {
;
currentContext = void 0;
}
return join(classNames, " ");
};
// src/instance.ts
var createInstance = (options) => {
const context2 = createContext(options);
return {
bw: (...tokens) => process(asTokens(tokens), context2),
setup: context2.c,
theme: context2.r
};
};
// src/index.ts
var instance2 = createInstance();
var {bw} = instance2;
var {setup} = instance2;
var {theme: theme4} = instance2;
export {
apply,
autoprefix,
bw,
corners,
createInstance,
cssomInjector,
cyrb32,
edges,
expandEdges,
join,
mode,
noOpInjector,
noprefix,
setup,
strict,
tail,
theme4 as theme,
virtualInjector,
warn
};