@barocss/kit 0.8.2 → 0.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -0
- package/dist/index.cjs +434 -404
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +676 -677
- package/dist/index.d.ts +676 -677
- package/dist/index.js +433 -405
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -435,6 +435,26 @@ function staticUtility(name, decls, opts, ctx) {
|
|
|
435
435
|
* category: 'layout',
|
|
436
436
|
* });
|
|
437
437
|
*/
|
|
438
|
+
/**
|
|
439
|
+
* #300: a theme key that no built-in utility names (`theme.extend.borderRadius.card`) still resolves, as in
|
|
440
|
+
* Tailwind 4 where `--radius-card` gives `rounded-card`. Only word keys that start with a letter (numbers stay
|
|
441
|
+
* bare values), never `DEFAULT`; unknown keys return null so the utility emits nothing (#213).
|
|
442
|
+
*/
|
|
443
|
+
function themeKeyEntry(ctx, namespace, key) {
|
|
444
|
+
if (key === "DEFAULT" || !/^[a-zA-Z][\w-]*$/.test(key) || typeof ctx?.theme !== "function") return void 0;
|
|
445
|
+
const table = ctx.theme(namespace);
|
|
446
|
+
if (!table || typeof table !== "object" || !Object.prototype.hasOwnProperty.call(table, key)) return void 0;
|
|
447
|
+
return table[key] ?? void 0;
|
|
448
|
+
}
|
|
449
|
+
/** #300: the literal value of `theme.<namespace>.<key>` when it is a string, else null. */
|
|
450
|
+
function themeKeyValue(ctx, namespace, key) {
|
|
451
|
+
const v = themeKeyEntry(ctx, namespace, key);
|
|
452
|
+
return typeof v === "string" ? v : null;
|
|
453
|
+
}
|
|
454
|
+
/** #300: `var(--<varPrefix>-<key>)` when `theme.<namespace>.<key>` exists (the :root var BaroCSS emits for it), else null. */
|
|
455
|
+
function themeKeyVar(ctx, namespace, key, varPrefix) {
|
|
456
|
+
return themeKeyEntry(ctx, namespace, key) === void 0 ? null : `var(--${varPrefix}-${key})`;
|
|
457
|
+
}
|
|
438
458
|
/** #261: `var(--spacing-<key>)` for a named (non-numeric) `theme.spacing` key, else null. */
|
|
439
459
|
function spacingKeyValue(ctx, key, negative) {
|
|
440
460
|
if (key === "px" || !/^[a-zA-Z][\w-]*$/.test(key) || ctx.theme("spacing", key) == null) return null;
|
|
@@ -477,12 +497,18 @@ function functionalUtility(opts, ctx) {
|
|
|
477
497
|
}
|
|
478
498
|
let themeValue;
|
|
479
499
|
if (opts.themeKey && ctx.theme) themeValue = themeScalar(ctx.theme(opts.themeKey, finalValue));
|
|
500
|
+
let namespace = themeValue !== void 0 ? opts.themeKey : void 0;
|
|
480
501
|
if (!themeValue && opts.themeKeys && ctx.theme) for (const key of opts.themeKeys) {
|
|
481
502
|
themeValue = themeScalar(ctx.theme(key, finalValue));
|
|
482
|
-
if (themeValue !== void 0)
|
|
503
|
+
if (themeValue !== void 0) {
|
|
504
|
+
namespace = key;
|
|
505
|
+
break;
|
|
506
|
+
}
|
|
483
507
|
}
|
|
484
508
|
if (themeValue !== void 0) {
|
|
485
|
-
extra.
|
|
509
|
+
extra.themeNamespace = namespace;
|
|
510
|
+
extra.themeKey = finalValue;
|
|
511
|
+
if (namespace === "colors" || !(opts.themeKeys ?? [opts.themeKey]).includes("colors")) extra.realThemeValue = finalValue;
|
|
486
512
|
finalValue = themeValue;
|
|
487
513
|
if (opts.prop) return [decl(opts.prop, finalValue)];
|
|
488
514
|
if (opts.handle) {
|
|
@@ -1056,7 +1082,13 @@ function parseUtility(value, ctx) {
|
|
|
1056
1082
|
//#region src/core/astToCss.ts
|
|
1057
1083
|
var isSafePrelude = (text) => {
|
|
1058
1084
|
const t = String(text ?? "");
|
|
1059
|
-
return !hasCommentDelimiter(t) && !hasHtmlEndTagOpener(t) && isBalancedPrelude(t);
|
|
1085
|
+
return !hasCommentDelimiter(t) && !hasHtmlEndTagOpener(t) && isBalancedPrelude(t) && !/url\s*\(/i.test(t);
|
|
1086
|
+
};
|
|
1087
|
+
var uniqueDescriptors = (node) => {
|
|
1088
|
+
if (node.type !== "at-rule") return [];
|
|
1089
|
+
if (node.name !== "property") return node.nodes;
|
|
1090
|
+
const seen = /* @__PURE__ */ new Set();
|
|
1091
|
+
return node.nodes.filter((c) => c.type !== "decl" || !seen.has(c.prop) && !!seen.add(c.prop));
|
|
1060
1092
|
};
|
|
1061
1093
|
var isSafeDecl = (prop, value) => isStructureSafeValue(String(prop)) && isStructureSafeValue(String(value ?? "")) && !hasHtmlEndTagOpener(String(prop)) && !hasHtmlEndTagOpener(String(value ?? ""));
|
|
1062
1094
|
var importantPrefix = "!important";
|
|
@@ -1152,10 +1184,10 @@ function rootToCss(nodes, opts) {
|
|
|
1152
1184
|
if (isSafeDecl(node.prop, node.value)) list.push(minify ? `${node.prop}:${node.value};` : `${node.prop}: ${node.value};`);
|
|
1153
1185
|
} else if (node.type === "at-rule" && isSafePrelude(node.name) && isSafePrelude(node.params)) {
|
|
1154
1186
|
if (minify) {
|
|
1155
|
-
const body = node.
|
|
1187
|
+
const body = uniqueDescriptors(node).filter((child) => child.type === "decl" && isSafeDecl(child.prop, child.value)).map((child) => child.type === "decl" ? `${child.prop}:${child.value};` : "").join("");
|
|
1156
1188
|
list.push(`@${node.name} ${node.params}{${body}}`);
|
|
1157
1189
|
} else list.push(`@${node.name} ${node.params} {
|
|
1158
|
-
${node.
|
|
1190
|
+
${uniqueDescriptors(node).map((node) => {
|
|
1159
1191
|
if (node.type === "decl" && isSafeDecl(node.prop, node.value)) return `\t${node.prop}: ${node.value};`;
|
|
1160
1192
|
}).join("\n")}
|
|
1161
1193
|
}`);
|
|
@@ -1208,6 +1240,14 @@ function boxShadowToCssVars(boxShadow) {
|
|
|
1208
1240
|
* fontSize: { xs: ['0.75rem', '1rem'], ... }
|
|
1209
1241
|
* → { '--text-xs': '0.75rem', '--text-xs--line-height': '1rem' }
|
|
1210
1242
|
*/
|
|
1243
|
+
/** The line height of a fontSize tuple: `['4rem', '1.1']` or Tailwind's `['4rem', { lineHeight: '1.1' }]` (#300). */
|
|
1244
|
+
function fontSizeLineHeight(value) {
|
|
1245
|
+
if (!Array.isArray(value)) return void 0;
|
|
1246
|
+
const second = value[1];
|
|
1247
|
+
if (typeof second === "string" || typeof second === "number") return String(second);
|
|
1248
|
+
const lh = second?.lineHeight;
|
|
1249
|
+
return lh == null ? void 0 : String(lh);
|
|
1250
|
+
}
|
|
1211
1251
|
function fontSizeToCssVars(fontSize) {
|
|
1212
1252
|
if (!fontSize) return {};
|
|
1213
1253
|
const result = {};
|
|
@@ -1215,7 +1255,8 @@ function fontSizeToCssVars(fontSize) {
|
|
|
1215
1255
|
const value = fontSize[key];
|
|
1216
1256
|
if (Array.isArray(value)) {
|
|
1217
1257
|
result[`--text-${key}`] = value[0];
|
|
1218
|
-
|
|
1258
|
+
const lineHeight = fontSizeLineHeight(value);
|
|
1259
|
+
if (lineHeight) result[`--text-${key}--line-height`] = lineHeight;
|
|
1219
1260
|
} else result[`--text-${key}`] = value;
|
|
1220
1261
|
}
|
|
1221
1262
|
return result;
|
|
@@ -1701,6 +1742,11 @@ function parseClassToAst(fullClassName, ctx) {
|
|
|
1701
1742
|
variantChain: modifiers,
|
|
1702
1743
|
index: i
|
|
1703
1744
|
});
|
|
1745
|
+
if (result == null) {
|
|
1746
|
+
debugWarn(`[BAROCSS] Unknown variant: "${variant.type}" in "${fullClassName}"`);
|
|
1747
|
+
failures.add(fullClassName);
|
|
1748
|
+
return [];
|
|
1749
|
+
}
|
|
1704
1750
|
if (plugin.wrap && (result === "&" || typeof result === "object" && !Array.isArray(result) && result.selector === "&" || Array.isArray(result) && result.length === 1 && result[0].selector === "&")) continue;
|
|
1705
1751
|
if (typeof result === "string" && result.includes("&")) wrappers.push({
|
|
1706
1752
|
type: "rule",
|
|
@@ -1787,10 +1833,11 @@ function getAstCacheStats(ctx) {
|
|
|
1787
1833
|
* @example
|
|
1788
1834
|
* const css = generateCss('sm:dark:hover:bg-red-500 sm:focus:bg-blue-500', ctx);
|
|
1789
1835
|
*/
|
|
1836
|
+
var CLASS_SEPARATOR = /[ \t\n\f\r]+/;
|
|
1790
1837
|
function generateCss(classList, ctx, opts) {
|
|
1791
1838
|
const seen = /* @__PURE__ */ new Set();
|
|
1792
1839
|
const allAtRootNodes = [];
|
|
1793
|
-
const results = classList.split(
|
|
1840
|
+
const results = classList.split(CLASS_SEPARATOR).filter((cls) => {
|
|
1794
1841
|
if (!cls) return false;
|
|
1795
1842
|
if (opts?.dedup) {
|
|
1796
1843
|
if (seen.has(cls)) return false;
|
|
@@ -1850,7 +1897,7 @@ function generateCss(classList, ctx, opts) {
|
|
|
1850
1897
|
*/
|
|
1851
1898
|
function generateCssRules(classList, ctx, opts) {
|
|
1852
1899
|
const seen = /* @__PURE__ */ new Set();
|
|
1853
|
-
return classList.split(
|
|
1900
|
+
return classList.split(CLASS_SEPARATOR).filter((cls) => {
|
|
1854
1901
|
if (!cls) return false;
|
|
1855
1902
|
if (opts?.dedup) {
|
|
1856
1903
|
if (seen.has(cls)) return false;
|
|
@@ -2626,105 +2673,81 @@ textarea {
|
|
|
2626
2673
|
resize: vertical;
|
|
2627
2674
|
}
|
|
2628
2675
|
`;
|
|
2676
|
+
/**
|
|
2677
|
+
* Full preflight: a port of Tailwind CSS v4.3.3's preflight.css (MIT), rule for rule (#336).
|
|
2678
|
+
* `--theme(--x, fallback)` becomes `var(--x, fallback)`; the default sans/mono families also fall back to
|
|
2679
|
+
* `--font-sans`/`--font-mono` so a BaroCSS theme applies. Checked by tests/compat/preflight-336.test.ts.
|
|
2680
|
+
*/
|
|
2629
2681
|
var preflightFullCSS = `
|
|
2630
|
-
/* BaroCSS Preflight - Full
|
|
2631
|
-
/* =============================== */
|
|
2632
|
-
|
|
2633
|
-
/* Box sizing rules */
|
|
2682
|
+
/* BaroCSS Preflight - Full (Tailwind 4.3.3) */
|
|
2634
2683
|
*,
|
|
2635
|
-
|
|
2636
|
-
|
|
2684
|
+
::after,
|
|
2685
|
+
::before,
|
|
2686
|
+
::backdrop,
|
|
2687
|
+
::file-selector-button {
|
|
2637
2688
|
box-sizing: border-box;
|
|
2638
|
-
}
|
|
2639
|
-
|
|
2640
|
-
/* Remove default margin and padding; reset border to Tailwind v4's universal
|
|
2641
|
-
\`border: 0 solid\` so a bare border/border-t (width set by the utility, style
|
|
2642
|
-
otherwise \`none\`) renders. Width 0 keeps borders invisible until a utility
|
|
2643
|
-
sets one. */
|
|
2644
|
-
* {
|
|
2645
2689
|
margin: 0;
|
|
2646
2690
|
padding: 0;
|
|
2647
2691
|
border: 0 solid;
|
|
2648
2692
|
}
|
|
2649
2693
|
|
|
2650
|
-
|
|
2651
|
-
|
|
2652
|
-
min-height: 100vh;
|
|
2653
|
-
scroll-behavior: smooth;
|
|
2654
|
-
text-rendering: optimizeSpeed;
|
|
2694
|
+
html,
|
|
2695
|
+
:host {
|
|
2655
2696
|
line-height: 1.5;
|
|
2656
|
-
-webkit-
|
|
2657
|
-
-
|
|
2658
|
-
|
|
2659
|
-
|
|
2660
|
-
|
|
2661
|
-
|
|
2662
|
-
ol {
|
|
2663
|
-
list-style: none;
|
|
2664
|
-
}
|
|
2665
|
-
|
|
2666
|
-
/* Make images easier to work with */
|
|
2667
|
-
img,
|
|
2668
|
-
picture {
|
|
2669
|
-
max-width: 100%;
|
|
2670
|
-
display: block;
|
|
2671
|
-
}
|
|
2672
|
-
|
|
2673
|
-
/* Inherit fonts for inputs and buttons */
|
|
2674
|
-
input,
|
|
2675
|
-
button,
|
|
2676
|
-
textarea,
|
|
2677
|
-
select {
|
|
2678
|
-
font: inherit;
|
|
2697
|
+
-webkit-text-size-adjust: 100%;
|
|
2698
|
+
tab-size: 4;
|
|
2699
|
+
font-family: var(--default-font-family, var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'));
|
|
2700
|
+
font-feature-settings: var(--default-font-feature-settings, normal);
|
|
2701
|
+
font-variation-settings: var(--default-font-variation-settings, normal);
|
|
2702
|
+
-webkit-tap-highlight-color: transparent;
|
|
2679
2703
|
}
|
|
2680
2704
|
|
|
2681
|
-
|
|
2682
|
-
|
|
2683
|
-
|
|
2684
|
-
|
|
2685
|
-
}
|
|
2686
|
-
|
|
2687
|
-
*,
|
|
2688
|
-
*::before,
|
|
2689
|
-
*::after {
|
|
2690
|
-
animation-duration: 0.01ms !important;
|
|
2691
|
-
animation-iteration-count: 1 !important;
|
|
2692
|
-
transition-duration: 0.01ms !important;
|
|
2693
|
-
scroll-behavior: auto !important;
|
|
2694
|
-
}
|
|
2705
|
+
hr {
|
|
2706
|
+
height: 0;
|
|
2707
|
+
color: inherit;
|
|
2708
|
+
border-top-width: 1px;
|
|
2695
2709
|
}
|
|
2696
2710
|
|
|
2697
|
-
|
|
2698
|
-
|
|
2699
|
-
|
|
2700
|
-
display: block;
|
|
2711
|
+
abbr:where([title]) {
|
|
2712
|
+
-webkit-text-decoration: underline dotted;
|
|
2713
|
+
text-decoration: underline dotted;
|
|
2701
2714
|
}
|
|
2702
2715
|
|
|
2703
|
-
|
|
2704
|
-
|
|
2705
|
-
|
|
2706
|
-
|
|
2707
|
-
|
|
2708
|
-
|
|
2709
|
-
font-
|
|
2710
|
-
font-
|
|
2711
|
-
font-variation-settings: var(--default-font-variation-settings, normal);
|
|
2716
|
+
h1,
|
|
2717
|
+
h2,
|
|
2718
|
+
h3,
|
|
2719
|
+
h4,
|
|
2720
|
+
h5,
|
|
2721
|
+
h6 {
|
|
2722
|
+
font-size: inherit;
|
|
2723
|
+
font-weight: inherit;
|
|
2712
2724
|
}
|
|
2713
2725
|
|
|
2714
|
-
/* Remove the gray background on active links in IE 10 */
|
|
2715
2726
|
a {
|
|
2716
|
-
background-color: transparent;
|
|
2717
|
-
text-decoration: none;
|
|
2718
2727
|
color: inherit;
|
|
2728
|
+
-webkit-text-decoration: inherit;
|
|
2729
|
+
text-decoration: inherit;
|
|
2719
2730
|
}
|
|
2720
2731
|
|
|
2721
|
-
/* Add the correct font weight in Chrome, Edge, and Safari */
|
|
2722
2732
|
b,
|
|
2723
2733
|
strong {
|
|
2724
2734
|
font-weight: bolder;
|
|
2725
2735
|
}
|
|
2726
2736
|
|
|
2727
|
-
|
|
2737
|
+
code,
|
|
2738
|
+
kbd,
|
|
2739
|
+
samp,
|
|
2740
|
+
pre {
|
|
2741
|
+
font-family: var(--default-mono-font-family, var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace));
|
|
2742
|
+
font-feature-settings: var(--default-mono-font-feature-settings, normal);
|
|
2743
|
+
font-variation-settings: var(--default-mono-font-variation-settings, normal);
|
|
2744
|
+
font-size: 1em;
|
|
2745
|
+
}
|
|
2746
|
+
|
|
2747
|
+
small {
|
|
2748
|
+
font-size: 80%;
|
|
2749
|
+
}
|
|
2750
|
+
|
|
2728
2751
|
sub,
|
|
2729
2752
|
sup {
|
|
2730
2753
|
font-size: 75%;
|
|
@@ -2741,265 +2764,49 @@ sup {
|
|
|
2741
2764
|
top: -0.5em;
|
|
2742
2765
|
}
|
|
2743
2766
|
|
|
2744
|
-
/* Improve media defaults */
|
|
2745
|
-
svg {
|
|
2746
|
-
vertical-align: middle;
|
|
2747
|
-
}
|
|
2748
|
-
|
|
2749
|
-
/* Remove border on iframe */
|
|
2750
|
-
iframe {
|
|
2751
|
-
border: 0;
|
|
2752
|
-
}
|
|
2753
|
-
|
|
2754
|
-
/* Table defaults */
|
|
2755
2767
|
table {
|
|
2768
|
+
text-indent: 0;
|
|
2769
|
+
border-color: inherit;
|
|
2756
2770
|
border-collapse: collapse;
|
|
2757
|
-
border-spacing: 0;
|
|
2758
2771
|
}
|
|
2759
2772
|
|
|
2760
|
-
|
|
2761
|
-
|
|
2762
|
-
input,
|
|
2763
|
-
optgroup,
|
|
2764
|
-
select,
|
|
2765
|
-
textarea {
|
|
2766
|
-
font-family: inherit;
|
|
2767
|
-
font-size: 100%;
|
|
2768
|
-
line-height: 1.15;
|
|
2769
|
-
margin: 0;
|
|
2773
|
+
:-moz-focusring:where(:not(iframe)) {
|
|
2774
|
+
outline: auto;
|
|
2770
2775
|
}
|
|
2771
2776
|
|
|
2772
|
-
button,
|
|
2773
|
-
select {
|
|
2774
|
-
text-transform: none;
|
|
2775
|
-
}
|
|
2776
|
-
|
|
2777
|
-
button,
|
|
2778
|
-
[type="button"],
|
|
2779
|
-
[type="reset"],
|
|
2780
|
-
[type="submit"] {
|
|
2781
|
-
-webkit-appearance: button;
|
|
2782
|
-
}
|
|
2783
|
-
|
|
2784
|
-
button::-moz-focus-inner,
|
|
2785
|
-
[type="button"]::-moz-focus-inner,
|
|
2786
|
-
[type="reset"]::-moz-focus-inner,
|
|
2787
|
-
[type="submit"]::-moz-focus-inner {
|
|
2788
|
-
border-style: none;
|
|
2789
|
-
padding: 0;
|
|
2790
|
-
}
|
|
2791
|
-
|
|
2792
|
-
button:-moz-focusring,
|
|
2793
|
-
[type="button"]:-moz-focusring,
|
|
2794
|
-
[type="reset"]:-moz-focusring,
|
|
2795
|
-
[type="submit"]:-moz-focusring {
|
|
2796
|
-
outline: 1px dotted ButtonText;
|
|
2797
|
-
}
|
|
2798
|
-
|
|
2799
|
-
/* Remove the inner border and padding in Firefox */
|
|
2800
|
-
button::-moz-focus-inner,
|
|
2801
|
-
[type="button"]::-moz-focus-inner,
|
|
2802
|
-
[type="reset"]::-moz-focus-inner,
|
|
2803
|
-
[type="submit"]::-moz-focus-inner {
|
|
2804
|
-
border-style: none;
|
|
2805
|
-
padding: 0;
|
|
2806
|
-
}
|
|
2807
|
-
|
|
2808
|
-
/* Restore the focus styles unset by the previous rule */
|
|
2809
|
-
button:-moz-focusring,
|
|
2810
|
-
[type="button"]:-moz-focusring,
|
|
2811
|
-
[type="reset"]:-moz-focusring,
|
|
2812
|
-
[type="submit"]:-moz-focusring {
|
|
2813
|
-
outline: 1px dotted ButtonText;
|
|
2814
|
-
}
|
|
2815
|
-
|
|
2816
|
-
/* Correct the padding in Firefox */
|
|
2817
|
-
fieldset {
|
|
2818
|
-
padding: 0.35em 0.75em 0.625em;
|
|
2819
|
-
}
|
|
2820
|
-
|
|
2821
|
-
/* Remove padding so developers aren't caught out when they zero out fieldset elements */
|
|
2822
|
-
legend {
|
|
2823
|
-
box-sizing: border-box;
|
|
2824
|
-
color: inherit;
|
|
2825
|
-
display: table;
|
|
2826
|
-
max-width: 100%;
|
|
2827
|
-
padding: 0;
|
|
2828
|
-
white-space: normal;
|
|
2829
|
-
}
|
|
2830
|
-
|
|
2831
|
-
/* Add the correct vertical alignment in Chrome, Firefox, and Opera */
|
|
2832
2777
|
progress {
|
|
2833
2778
|
vertical-align: baseline;
|
|
2834
2779
|
}
|
|
2835
2780
|
|
|
2836
|
-
|
|
2837
|
-
|
|
2838
|
-
overflow: auto;
|
|
2839
|
-
}
|
|
2840
|
-
|
|
2841
|
-
/* Correct the cursor style of increment and decrement buttons in Chrome */
|
|
2842
|
-
[type="number"]::-webkit-inner-spin-button,
|
|
2843
|
-
[type="number"]::-webkit-outer-spin-button {
|
|
2844
|
-
height: auto;
|
|
2845
|
-
}
|
|
2846
|
-
|
|
2847
|
-
/* Remove the inner padding in Chrome and Safari on macOS */
|
|
2848
|
-
[type="search"] {
|
|
2849
|
-
-webkit-appearance: textfield;
|
|
2850
|
-
outline-offset: -2px;
|
|
2851
|
-
}
|
|
2852
|
-
|
|
2853
|
-
/* Remove the inner padding in Chrome and Safari on macOS */
|
|
2854
|
-
[type="search"]::-webkit-search-decoration {
|
|
2855
|
-
-webkit-appearance: none;
|
|
2856
|
-
}
|
|
2857
|
-
|
|
2858
|
-
/* Remove the default vertical scrollbar in IE */
|
|
2859
|
-
textarea {
|
|
2860
|
-
overflow: auto;
|
|
2861
|
-
}
|
|
2862
|
-
|
|
2863
|
-
/* Correct the cursor style of increment and decrement buttons in Chrome */
|
|
2864
|
-
[type="number"]::-webkit-inner-spin-button,
|
|
2865
|
-
[type="number"]::-webkit-outer-spin-button {
|
|
2866
|
-
height: auto;
|
|
2781
|
+
summary {
|
|
2782
|
+
display: list-item;
|
|
2867
2783
|
}
|
|
2868
2784
|
|
|
2869
|
-
|
|
2870
|
-
|
|
2871
|
-
|
|
2872
|
-
|
|
2873
|
-
}
|
|
2874
|
-
|
|
2875
|
-
/* Remove the inner padding in Chrome and Safari on macOS */
|
|
2876
|
-
[type="search"]::-webkit-search-decoration {
|
|
2877
|
-
-webkit-appearance: none;
|
|
2878
|
-
}
|
|
2879
|
-
|
|
2880
|
-
/* Additional full reset styles */
|
|
2881
|
-
abbr[title] {
|
|
2882
|
-
border-bottom: none;
|
|
2883
|
-
text-decoration: underline;
|
|
2884
|
-
text-decoration: underline dotted;
|
|
2885
|
-
}
|
|
2886
|
-
|
|
2887
|
-
/* Add the correct font size in all browsers */
|
|
2888
|
-
small {
|
|
2889
|
-
font-size: 80%;
|
|
2890
|
-
}
|
|
2891
|
-
|
|
2892
|
-
/* Prevent overflow of the container in all browsers */
|
|
2893
|
-
code,
|
|
2894
|
-
kbd,
|
|
2895
|
-
pre,
|
|
2896
|
-
samp {
|
|
2897
|
-
font-family: var(--default-mono-font-family, var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace));
|
|
2898
|
-
font-feature-settings: var(--default-mono-font-feature-settings, normal);
|
|
2899
|
-
font-variation-settings: var(--default-mono-font-variation-settings, normal);
|
|
2900
|
-
font-size: 1em;
|
|
2785
|
+
ol,
|
|
2786
|
+
ul,
|
|
2787
|
+
menu {
|
|
2788
|
+
list-style: none;
|
|
2901
2789
|
}
|
|
2902
2790
|
|
|
2903
|
-
|
|
2791
|
+
img,
|
|
2792
|
+
svg,
|
|
2793
|
+
video,
|
|
2794
|
+
canvas,
|
|
2904
2795
|
audio,
|
|
2905
|
-
|
|
2906
|
-
|
|
2907
|
-
|
|
2908
|
-
|
|
2909
|
-
|
|
2910
|
-
template {
|
|
2911
|
-
display: none;
|
|
2912
|
-
}
|
|
2913
|
-
|
|
2914
|
-
/* Hidden attribute */
|
|
2915
|
-
[hidden] {
|
|
2916
|
-
display: none;
|
|
2917
|
-
}
|
|
2918
|
-
|
|
2919
|
-
/* Focus styles */
|
|
2920
|
-
:focus {
|
|
2921
|
-
outline: 2px solid #3b82f6;
|
|
2922
|
-
outline-offset: 2px;
|
|
2923
|
-
}
|
|
2924
|
-
|
|
2925
|
-
/* Skip link for accessibility */
|
|
2926
|
-
.skip-link {
|
|
2927
|
-
position: absolute;
|
|
2928
|
-
top: -40px;
|
|
2929
|
-
left: 6px;
|
|
2930
|
-
background: #000;
|
|
2931
|
-
color: white;
|
|
2932
|
-
padding: 8px;
|
|
2933
|
-
text-decoration: none;
|
|
2934
|
-
z-index: 100;
|
|
2935
|
-
}
|
|
2936
|
-
|
|
2937
|
-
.skip-link:focus {
|
|
2938
|
-
top: 6px;
|
|
2796
|
+
iframe,
|
|
2797
|
+
embed,
|
|
2798
|
+
object {
|
|
2799
|
+
display: block;
|
|
2800
|
+
vertical-align: middle;
|
|
2939
2801
|
}
|
|
2940
2802
|
|
|
2941
|
-
|
|
2942
|
-
|
|
2943
|
-
|
|
2944
|
-
|
|
2945
|
-
*::after {
|
|
2946
|
-
background: transparent !important;
|
|
2947
|
-
color: #000 !important;
|
|
2948
|
-
box-shadow: none !important;
|
|
2949
|
-
text-shadow: none !important;
|
|
2950
|
-
}
|
|
2951
|
-
|
|
2952
|
-
a,
|
|
2953
|
-
a:visited {
|
|
2954
|
-
text-decoration: underline;
|
|
2955
|
-
}
|
|
2956
|
-
|
|
2957
|
-
a[href]:after {
|
|
2958
|
-
content: " (" attr(href) ")";
|
|
2959
|
-
}
|
|
2960
|
-
|
|
2961
|
-
abbr[title]:after {
|
|
2962
|
-
content: " (" attr(title) ")";
|
|
2963
|
-
}
|
|
2964
|
-
|
|
2965
|
-
a[href^="#"]:after,
|
|
2966
|
-
a[href^="javascript:"]:after {
|
|
2967
|
-
content: "";
|
|
2968
|
-
}
|
|
2969
|
-
|
|
2970
|
-
pre,
|
|
2971
|
-
blockquote {
|
|
2972
|
-
border: 1px solid #999;
|
|
2973
|
-
page-break-inside: avoid;
|
|
2974
|
-
}
|
|
2975
|
-
|
|
2976
|
-
thead {
|
|
2977
|
-
display: table-header-group;
|
|
2978
|
-
}
|
|
2979
|
-
|
|
2980
|
-
tr,
|
|
2981
|
-
img {
|
|
2982
|
-
page-break-inside: avoid;
|
|
2983
|
-
}
|
|
2984
|
-
|
|
2985
|
-
img {
|
|
2986
|
-
max-width: 100% !important;
|
|
2987
|
-
}
|
|
2988
|
-
|
|
2989
|
-
p,
|
|
2990
|
-
h2,
|
|
2991
|
-
h3 {
|
|
2992
|
-
orphans: 3;
|
|
2993
|
-
widows: 3;
|
|
2994
|
-
}
|
|
2995
|
-
|
|
2996
|
-
h2,
|
|
2997
|
-
h3 {
|
|
2998
|
-
page-break-after: avoid;
|
|
2999
|
-
}
|
|
2803
|
+
img,
|
|
2804
|
+
video {
|
|
2805
|
+
max-width: 100%;
|
|
2806
|
+
height: auto;
|
|
3000
2807
|
}
|
|
3001
2808
|
|
|
3002
|
-
/*
|
|
2809
|
+
/* form-control reset */
|
|
3003
2810
|
button,
|
|
3004
2811
|
input,
|
|
3005
2812
|
select,
|
|
@@ -3032,7 +2839,8 @@ textarea,
|
|
|
3032
2839
|
opacity: 1;
|
|
3033
2840
|
}
|
|
3034
2841
|
|
|
3035
|
-
@supports (not (-webkit-appearance: -apple-pay-button)) or
|
|
2842
|
+
@supports (not (-webkit-appearance: -apple-pay-button)) or
|
|
2843
|
+
(contain-intrinsic-size: 1px) {
|
|
3036
2844
|
::placeholder {
|
|
3037
2845
|
color: color-mix(in oklab, currentcolor 50%, transparent);
|
|
3038
2846
|
}
|
|
@@ -3041,6 +2849,58 @@ textarea,
|
|
|
3041
2849
|
textarea {
|
|
3042
2850
|
resize: vertical;
|
|
3043
2851
|
}
|
|
2852
|
+
|
|
2853
|
+
::-webkit-search-decoration {
|
|
2854
|
+
-webkit-appearance: none;
|
|
2855
|
+
}
|
|
2856
|
+
|
|
2857
|
+
::-webkit-date-and-time-value {
|
|
2858
|
+
min-height: 1lh;
|
|
2859
|
+
text-align: inherit;
|
|
2860
|
+
}
|
|
2861
|
+
|
|
2862
|
+
::-webkit-datetime-edit {
|
|
2863
|
+
display: inline-flex;
|
|
2864
|
+
}
|
|
2865
|
+
|
|
2866
|
+
::-webkit-datetime-edit-fields-wrapper {
|
|
2867
|
+
padding: 0;
|
|
2868
|
+
}
|
|
2869
|
+
|
|
2870
|
+
::-webkit-datetime-edit,
|
|
2871
|
+
::-webkit-datetime-edit-year-field,
|
|
2872
|
+
::-webkit-datetime-edit-month-field,
|
|
2873
|
+
::-webkit-datetime-edit-day-field,
|
|
2874
|
+
::-webkit-datetime-edit-hour-field,
|
|
2875
|
+
::-webkit-datetime-edit-minute-field,
|
|
2876
|
+
::-webkit-datetime-edit-second-field,
|
|
2877
|
+
::-webkit-datetime-edit-millisecond-field,
|
|
2878
|
+
::-webkit-datetime-edit-meridiem-field {
|
|
2879
|
+
padding-block: 0;
|
|
2880
|
+
}
|
|
2881
|
+
|
|
2882
|
+
::-webkit-calendar-picker-indicator {
|
|
2883
|
+
line-height: 1;
|
|
2884
|
+
}
|
|
2885
|
+
|
|
2886
|
+
:-moz-ui-invalid {
|
|
2887
|
+
box-shadow: none;
|
|
2888
|
+
}
|
|
2889
|
+
|
|
2890
|
+
button,
|
|
2891
|
+
input:where([type='button'], [type='reset'], [type='submit']),
|
|
2892
|
+
::file-selector-button {
|
|
2893
|
+
appearance: button;
|
|
2894
|
+
}
|
|
2895
|
+
|
|
2896
|
+
::-webkit-inner-spin-button,
|
|
2897
|
+
::-webkit-outer-spin-button {
|
|
2898
|
+
height: auto;
|
|
2899
|
+
}
|
|
2900
|
+
|
|
2901
|
+
[hidden]:where(:not([hidden='until-found'])) {
|
|
2902
|
+
display: none !important;
|
|
2903
|
+
}
|
|
3044
2904
|
`;
|
|
3045
2905
|
//#endregion
|
|
3046
2906
|
//#region src/core/context.ts
|
|
@@ -3276,6 +3136,7 @@ function jsonToAst(input, ctx) {
|
|
|
3276
3136
|
variantChain: [],
|
|
3277
3137
|
index: i
|
|
3278
3138
|
});
|
|
3139
|
+
if (result == null) continue;
|
|
3279
3140
|
if (plugin.wrap && (result === "&" || typeof result === "object" && !Array.isArray(result) && result.selector === "&" || Array.isArray(result) && result.length === 1 && result[0].selector === "&")) {} else if (typeof result === "string" && result.includes("&")) wrappers.push({
|
|
3280
3141
|
type: "rule",
|
|
3281
3142
|
selector: result
|
|
@@ -3952,6 +3813,7 @@ functionalUtility({
|
|
|
3952
3813
|
prop: "transition-timing-function",
|
|
3953
3814
|
supportsArbitrary: true,
|
|
3954
3815
|
supportsCustomProperty: true,
|
|
3816
|
+
handleBareValue: ({ value, ctx }) => themeKeyVar(ctx, "transitionTimingFunction", value, "ease") ?? (/^(\d|\.\d)/.test(value) ? value : null),
|
|
3955
3817
|
handle: (value, _ctx, _token) => {
|
|
3956
3818
|
return [decl("transition-timing-function", value)];
|
|
3957
3819
|
},
|
|
@@ -4136,6 +3998,7 @@ functionalUtility({
|
|
|
4136
3998
|
prop: "filter",
|
|
4137
3999
|
supportsArbitrary: true,
|
|
4138
4000
|
supportsCustomProperty: true,
|
|
4001
|
+
handleBareValue: ({ value, ctx }) => themeKeyVar(ctx, "blur", value, "blur") ?? (/^(\d|\.\d)/.test(value) ? value : null),
|
|
4139
4002
|
handle: (value, _ctx, token) => {
|
|
4140
4003
|
if (token.customProperty) return [decl("--baro-blur", `blur(var(${value}))`), filters$1()];
|
|
4141
4004
|
return [decl("--baro-blur", `blur(${value})`), filters$1()];
|
|
@@ -4231,13 +4094,14 @@ functionalUtility({
|
|
|
4231
4094
|
transparent: "transparent"
|
|
4232
4095
|
}[extra?.realThemeValue ?? value];
|
|
4233
4096
|
if (keyword) return dropShadowColor(keyword, opacity);
|
|
4097
|
+
const key = extra?.realThemeValue ?? value;
|
|
4098
|
+
const named = token.arbitrary ? null : namedDropShadow(ctx, key);
|
|
4099
|
+
if (named) return dropShadowValue(named, opacity, `drop-shadow(var(--drop-shadow-${key}))`);
|
|
4234
4100
|
if (extra?.realThemeValue) return dropShadowColor(value, opacity, `var(--color-${extra.realThemeValue})`);
|
|
4235
4101
|
if (token.arbitrary) {
|
|
4236
4102
|
if (parseColor(value)) return dropShadowColor(value, opacity);
|
|
4237
4103
|
return dropShadowValue(value, opacity);
|
|
4238
4104
|
}
|
|
4239
|
-
const named = namedDropShadow(ctx, value);
|
|
4240
|
-
if (named) return dropShadowValue(named, opacity, `drop-shadow(var(--drop-shadow-${value}))`);
|
|
4241
4105
|
return null;
|
|
4242
4106
|
},
|
|
4243
4107
|
handleCustomProperty: (value) => {
|
|
@@ -4355,6 +4219,7 @@ functionalUtility({
|
|
|
4355
4219
|
prop: "backdrop-filter",
|
|
4356
4220
|
supportsArbitrary: true,
|
|
4357
4221
|
supportsCustomProperty: true,
|
|
4222
|
+
handleBareValue: ({ value, ctx }) => themeKeyVar(ctx, "blur", value, "blur") ?? (/^(\d|\.\d)/.test(value) ? value : null),
|
|
4358
4223
|
handle: (value, _ctx, token) => {
|
|
4359
4224
|
if (token.customProperty) return [decl("--baro-backdrop-blur", `blur(var(${value}))`), ...filters()];
|
|
4360
4225
|
return [decl("--baro-backdrop-blur", `blur(${value})`), ...filters()];
|
|
@@ -4510,11 +4375,15 @@ function boxShadowLayer(layer, value, opacity) {
|
|
|
4510
4375
|
decl("box-shadow", SHADOW_COMPOSITE)
|
|
4511
4376
|
];
|
|
4512
4377
|
}
|
|
4513
|
-
function namedBoxShadow(layer, name, opacity) {
|
|
4514
|
-
if (layer === "shadow")
|
|
4515
|
-
|
|
4516
|
-
|
|
4517
|
-
|
|
4378
|
+
function namedBoxShadow(layer, name, opacity, ctx) {
|
|
4379
|
+
if (layer === "shadow") {
|
|
4380
|
+
if (own(NAMED_SHADOWS, name)) return boxShadowLayer(layer, NAMED_SHADOWS[name], opacity);
|
|
4381
|
+
} else {
|
|
4382
|
+
if (own(NAMED_INSET_SHADOWS, name)) return boxShadowLayer(layer, NAMED_INSET_SHADOWS[name], opacity);
|
|
4383
|
+
if (!opacity && own(INSET_EXTENSIONS, name)) return boxShadowLayer(layer, INSET_EXTENSIONS[name], void 0);
|
|
4384
|
+
}
|
|
4385
|
+
const custom = ctx && name !== "none" ? themeKeyValue(ctx, layer === "shadow" ? "boxShadow" : "insetShadow", name) : null;
|
|
4386
|
+
return custom ? boxShadowLayer(layer, custom, opacity) : null;
|
|
4518
4387
|
}
|
|
4519
4388
|
staticUtility("shadow-none", [
|
|
4520
4389
|
ringShadowProperties,
|
|
@@ -4554,10 +4423,10 @@ for (const layer of ["shadow", "inset-shadow"]) functionalUtility({
|
|
|
4554
4423
|
supportsCustomProperty: true,
|
|
4555
4424
|
supportsOpacity: true,
|
|
4556
4425
|
themeKeys: ["colors"],
|
|
4557
|
-
handleBareValue: ({ value, extra }) => namedBoxShadow(layer, value, extra?.opacity) ? value : null,
|
|
4558
|
-
handle: (value,
|
|
4426
|
+
handleBareValue: ({ value, ctx, extra }) => namedBoxShadow(layer, value, extra?.opacity, ctx) ? value : null,
|
|
4427
|
+
handle: (value, ctx, token, extra) => {
|
|
4559
4428
|
const opacity = extra?.opacity;
|
|
4560
|
-
const named = !
|
|
4429
|
+
const named = !token.arbitrary ? namedBoxShadow(layer, extra?.realThemeValue ?? value, opacity, ctx) : null;
|
|
4561
4430
|
if (named) return named;
|
|
4562
4431
|
const color = layerColor(layer, value, opacity, token, extra?.realThemeValue);
|
|
4563
4432
|
if (color !== void 0) return color;
|
|
@@ -4589,8 +4458,8 @@ functionalUtility({
|
|
|
4589
4458
|
handleBareValue: ({ value, ctx }) => namedTextShadow(ctx, value) ? value : null,
|
|
4590
4459
|
handle: (value, ctx, token, extra) => {
|
|
4591
4460
|
const opacity = extra?.opacity;
|
|
4592
|
-
if (!
|
|
4593
|
-
const named = namedTextShadow(ctx, value);
|
|
4461
|
+
if (!token.arbitrary) {
|
|
4462
|
+
const named = namedTextShadow(ctx, extra?.realThemeValue ?? value);
|
|
4594
4463
|
if (named) return textShadowValue(named, opacity);
|
|
4595
4464
|
}
|
|
4596
4465
|
const color = layerColor("text-shadow", value, opacity, token, extra?.realThemeValue);
|
|
@@ -4631,6 +4500,22 @@ function ringShadowValue(width) {
|
|
|
4631
4500
|
["--baro-ring-offset-shadow", `var(--baro-ring-inset,) 0 0 0 var(--baro-ring-offset-width) var(--baro-ring-offset-color)`]
|
|
4632
4501
|
], { category: "effects" });
|
|
4633
4502
|
});
|
|
4503
|
+
var ringOffsetWidth = (width) => [decl("--baro-ring-offset-width", width), decl("--baro-ring-offset-shadow", "var(--baro-ring-inset,) 0 0 0 var(--baro-ring-offset-width) var(--baro-ring-offset-color)")];
|
|
4504
|
+
functionalUtility({
|
|
4505
|
+
name: "ring-offset",
|
|
4506
|
+
themeKeys: ["ringOffsetWidth", "colors"],
|
|
4507
|
+
supportsArbitrary: true,
|
|
4508
|
+
supportsOpacity: true,
|
|
4509
|
+
handleBareValue: ({ value }) => /^\d+$/.test(value) ? `${value}px` : null,
|
|
4510
|
+
handle: (value, _ctx, token, extra) => {
|
|
4511
|
+
if (extra?.themeNamespace === "ringOffsetWidth") return ringOffsetWidth(value);
|
|
4512
|
+
if (extra?.realThemeValue) return themeColorDecls("--baro-ring-offset-color", value, extra);
|
|
4513
|
+
if (token.arbitrary) return parseColor(value) ? [decl("--baro-ring-offset-color", value)] : parseLength(value) ? ringOffsetWidth(value) : null;
|
|
4514
|
+
if (/^\d+px$/.test(value)) return ringOffsetWidth(value);
|
|
4515
|
+
return null;
|
|
4516
|
+
},
|
|
4517
|
+
category: "effects"
|
|
4518
|
+
});
|
|
4634
4519
|
[
|
|
4635
4520
|
["inset-ring", "1px"],
|
|
4636
4521
|
["inset-ring-0", "0px"],
|
|
@@ -4662,9 +4547,14 @@ functionalUtility({
|
|
|
4662
4547
|
supportsArbitrary: true,
|
|
4663
4548
|
supportsCustomProperty: true,
|
|
4664
4549
|
supportsOpacity: true,
|
|
4665
|
-
themeKeys: ["colors"],
|
|
4550
|
+
themeKeys: ["colors", "ringWidth"],
|
|
4666
4551
|
handle: (value, ctx, token, extra) => {
|
|
4667
4552
|
const main = value;
|
|
4553
|
+
if (extra?.themeNamespace === "ringWidth") return [
|
|
4554
|
+
ringShadowProperties(),
|
|
4555
|
+
decl("--baro-ring-shadow", ringShadowValue(value)),
|
|
4556
|
+
decl("box-shadow", SHADOW_COMPOSITE)
|
|
4557
|
+
];
|
|
4668
4558
|
const opacity = extra?.opacity;
|
|
4669
4559
|
const realThemeValue = extra?.realThemeValue;
|
|
4670
4560
|
if (realThemeValue) return createRingColorDecls("--baro-ring-color", main, opacity, realThemeValue);
|
|
@@ -4960,6 +4850,7 @@ functionalUtility({
|
|
|
4960
4850
|
supportsArbitrary: true,
|
|
4961
4851
|
supportsCustomProperty: true,
|
|
4962
4852
|
supportsFraction: true,
|
|
4853
|
+
handleBareValue: ({ value, ctx }) => themeKeyVar(ctx, "aspect", value, "aspect") ?? (/^(\d|\.\d)/.test(value) ? value : null),
|
|
4963
4854
|
description: "aspect-ratio utility (theme, arbitrary, custom property, fraction supported)",
|
|
4964
4855
|
category: "layout"
|
|
4965
4856
|
});
|
|
@@ -4983,7 +4874,7 @@ functionalUtility({
|
|
|
4983
4874
|
supportsArbitrary: true,
|
|
4984
4875
|
supportsCustomProperty: true,
|
|
4985
4876
|
supportsFraction: true,
|
|
4986
|
-
handleBareValue: ({ value }) => parseNumber(value),
|
|
4877
|
+
handleBareValue: ({ value, ctx }) => parseNumber(value) ?? themeKeyVar(ctx, "container", value, "container"),
|
|
4987
4878
|
description: "columns utility (theme, arbitrary, custom property, fraction supported)",
|
|
4988
4879
|
category: "layout"
|
|
4989
4880
|
});
|
|
@@ -6032,10 +5923,10 @@ functionalUtility({
|
|
|
6032
5923
|
supportsArbitrary: true,
|
|
6033
5924
|
supportsCustomProperty: true,
|
|
6034
5925
|
supportsFraction: true,
|
|
6035
|
-
handleBareValue: ({ value }) => {
|
|
5926
|
+
handleBareValue: ({ value, ctx }) => {
|
|
6036
5927
|
if (parseNumber(value)) return `calc(var(--spacing) * ${value})`;
|
|
6037
5928
|
if (parseFractionOrNumber(value)) return `calc(${value} * 100%)`;
|
|
6038
|
-
return
|
|
5929
|
+
return themeKeyVar(ctx, "container", value, "container");
|
|
6039
5930
|
},
|
|
6040
5931
|
description: "max-width utility (spacing, fraction, arbitrary, custom property, static supported)",
|
|
6041
5932
|
category: "sizing"
|
|
@@ -6145,11 +6036,11 @@ functionalUtility({
|
|
|
6145
6036
|
supportsArbitrary: true,
|
|
6146
6037
|
supportsCustomProperty: true,
|
|
6147
6038
|
supportsFraction: true,
|
|
6148
|
-
handleBareValue: ({ value, token }) => {
|
|
6039
|
+
handleBareValue: ({ value, token, ctx }) => {
|
|
6149
6040
|
if (token.negative) return null;
|
|
6150
6041
|
if (parseNumber(value)) return `calc(var(--spacing) * ${value})`;
|
|
6151
6042
|
if (parseFractionOrNumber(value)) return `calc(${value} * 100%)`;
|
|
6152
|
-
return null;
|
|
6043
|
+
return name.includes("inline") ? themeKeyVar(ctx, "container", value, "container") : null;
|
|
6153
6044
|
},
|
|
6154
6045
|
description: `${prop} utility (spacing, fraction, arbitrary, custom property, keywords)`,
|
|
6155
6046
|
category: "sizing"
|
|
@@ -6175,21 +6066,34 @@ staticUtility("text-6xl", [["font-size", "var(--text-6xl)"], ["line-height", "va
|
|
|
6175
6066
|
staticUtility("text-7xl", [["font-size", "var(--text-7xl)"], ["line-height", "var(--baro-leading, var(--text-7xl--line-height))"]], { category: "typography" });
|
|
6176
6067
|
staticUtility("text-8xl", [["font-size", "var(--text-8xl)"], ["line-height", "var(--baro-leading, var(--text-8xl--line-height))"]], { category: "typography" });
|
|
6177
6068
|
staticUtility("text-9xl", [["font-size", "var(--text-9xl)"], ["line-height", "var(--baro-leading, var(--text-9xl--line-height))"]], { category: "typography" });
|
|
6178
|
-
|
|
6179
|
-
|
|
6180
|
-
|
|
6181
|
-
|
|
6182
|
-
|
|
6183
|
-
|
|
6184
|
-
|
|
6185
|
-
|
|
6186
|
-
|
|
6069
|
+
function fontWeightUtility(name) {
|
|
6070
|
+
registerUtility({
|
|
6071
|
+
name: `font-${name}`,
|
|
6072
|
+
match: (className) => className === `font-${name}`,
|
|
6073
|
+
handler: (_value, ctx) => {
|
|
6074
|
+
const family = themeKeyVar(ctx, "fontFamily", name, "font");
|
|
6075
|
+
return family ? [decl("font-family", family)] : [decl("font-weight", `var(--font-weight-${name})`)];
|
|
6076
|
+
},
|
|
6077
|
+
category: "typography"
|
|
6078
|
+
});
|
|
6079
|
+
}
|
|
6080
|
+
fontWeightUtility("thin");
|
|
6081
|
+
fontWeightUtility("extralight");
|
|
6082
|
+
fontWeightUtility("light");
|
|
6083
|
+
fontWeightUtility("normal");
|
|
6084
|
+
fontWeightUtility("medium");
|
|
6085
|
+
fontWeightUtility("semibold");
|
|
6086
|
+
fontWeightUtility("bold");
|
|
6087
|
+
fontWeightUtility("extrabold");
|
|
6088
|
+
fontWeightUtility("black");
|
|
6187
6089
|
functionalUtility({
|
|
6188
6090
|
name: "font",
|
|
6189
6091
|
supportsArbitrary: true,
|
|
6190
6092
|
supportsCustomProperty: true,
|
|
6093
|
+
handleBareValue: ({ value, ctx }) => themeKeyVar(ctx, "fontFamily", value, "font") ?? themeKeyVar(ctx, "fontWeight", value, "font-weight") ?? (/^(\d|\.\d)/.test(value) ? value : null),
|
|
6191
6094
|
handle: (value, _ctx, token) => {
|
|
6192
6095
|
if (token.prefix !== "font") return null;
|
|
6096
|
+
if (!token.arbitrary && value.startsWith("var(--font-weight-")) return [decl("font-weight", value)];
|
|
6193
6097
|
if (parseNumber(value)) return [decl("font-weight", value)];
|
|
6194
6098
|
return [decl("font-family", value)];
|
|
6195
6099
|
},
|
|
@@ -6212,9 +6116,9 @@ staticUtility("tracking-widest", [["letter-spacing", "var(--letter-spacing-wides
|
|
|
6212
6116
|
functionalUtility({
|
|
6213
6117
|
name: "tracking",
|
|
6214
6118
|
prop: "letter-spacing",
|
|
6215
|
-
themeKey: "letterSpacing",
|
|
6216
6119
|
supportsArbitrary: true,
|
|
6217
6120
|
supportsCustomProperty: true,
|
|
6121
|
+
handleBareValue: ({ value, ctx }) => themeKeyVar(ctx, "letterSpacing", value, "letter-spacing") ?? (/^(\d|\.\d)/.test(value) ? value : null),
|
|
6218
6122
|
description: "letter-spacing utility (theme, arbitrary, custom property supported)",
|
|
6219
6123
|
category: "typography"
|
|
6220
6124
|
});
|
|
@@ -6250,11 +6154,14 @@ staticUtility("leading-loose", [
|
|
|
6250
6154
|
], { category: "typography" });
|
|
6251
6155
|
functionalUtility({
|
|
6252
6156
|
name: "leading",
|
|
6253
|
-
prop: "line-height",
|
|
6254
|
-
themeKey: "lineHeight",
|
|
6255
6157
|
supportsArbitrary: true,
|
|
6256
6158
|
supportsCustomProperty: true,
|
|
6257
|
-
handleBareValue: ({ value }) =>
|
|
6159
|
+
handleBareValue: ({ value, ctx }) => {
|
|
6160
|
+
const v = themeKeyValue(ctx, "lineHeight", value);
|
|
6161
|
+
if (v != null) return `var(--leading-${value}, ${v})`;
|
|
6162
|
+
const numbered = ctx.theme("lineHeight", value);
|
|
6163
|
+
return typeof numbered === "string" ? numbered : parseNumber(value);
|
|
6164
|
+
},
|
|
6258
6165
|
handle: (value) => [
|
|
6259
6166
|
decl("--baro-leading", value),
|
|
6260
6167
|
decl("line-height", value),
|
|
@@ -6311,8 +6218,11 @@ functionalUtility({
|
|
|
6311
6218
|
supportsArbitrary: true,
|
|
6312
6219
|
supportsCustomProperty: true,
|
|
6313
6220
|
supportsOpacity: true,
|
|
6221
|
+
handleBareValue: ({ value, ctx, extra }) => (extra?.opacity ? null : themeKeyVar(ctx, "fontSize", value, "text")) ?? (/^(\d|\.\d)/.test(value) ? value : null),
|
|
6314
6222
|
handle: (value, ctx, token, extra) => {
|
|
6315
6223
|
if (extra?.realThemeValue) return themeColorDecls("color", value, extra);
|
|
6224
|
+
const sizeKey = !token.arbitrary && !token.customProperty ? /^var\(--text-([\w-]+)\)$/.exec(value)?.[1] : void 0;
|
|
6225
|
+
if (sizeKey) return fontSizeLineHeight(ctx.theme("fontSize", sizeKey)) ? [decl("font-size", value), decl("line-height", `var(--baro-leading, var(--text-${sizeKey}--line-height))`)] : [decl("font-size", value)];
|
|
6316
6226
|
const kind = textArbitraryKind(value);
|
|
6317
6227
|
return [decl(kind.fontSize ? "font-size" : "color", kind.value)];
|
|
6318
6228
|
},
|
|
@@ -6435,11 +6345,12 @@ functionalUtility({
|
|
|
6435
6345
|
});
|
|
6436
6346
|
functionalUtility({
|
|
6437
6347
|
name: "decoration",
|
|
6438
|
-
|
|
6348
|
+
themeKeys: ["textDecorationThickness", "colors"],
|
|
6439
6349
|
supportsArbitrary: true,
|
|
6440
6350
|
supportsCustomProperty: true,
|
|
6441
6351
|
supportsOpacity: true,
|
|
6442
6352
|
handle: (value, ctx, token, extra) => {
|
|
6353
|
+
if (extra?.themeNamespace === "textDecorationThickness") return [decl("text-decoration-thickness", value)];
|
|
6443
6354
|
if (extra?.realThemeValue) return themeColorDecls("text-decoration-color", value, extra);
|
|
6444
6355
|
return [decl("text-decoration-color", value)];
|
|
6445
6356
|
},
|
|
@@ -6523,7 +6434,7 @@ functionalUtility({
|
|
|
6523
6434
|
prop: "content",
|
|
6524
6435
|
supportsArbitrary: true,
|
|
6525
6436
|
supportsCustomProperty: true,
|
|
6526
|
-
handle: (value) => [decl("--baro-content",
|
|
6437
|
+
handle: (value) => [decl("--baro-content", value), decl("content", "var(--baro-content)")],
|
|
6527
6438
|
handleCustomProperty: (value) => [decl("--baro-content", `var(${value})`), decl("content", "var(--baro-content)")],
|
|
6528
6439
|
description: "content utility (arbitrary, custom property supported)",
|
|
6529
6440
|
category: "typography"
|
|
@@ -6803,7 +6714,20 @@ staticUtility("rounded-2xl", [["border-radius", "var(--radius-2xl)"]], { categor
|
|
|
6803
6714
|
staticUtility("rounded-3xl", [["border-radius", "var(--radius-3xl)"]], { category: "borders" });
|
|
6804
6715
|
staticUtility("rounded-4xl", [["border-radius", "var(--radius-4xl)"]], { category: "borders" });
|
|
6805
6716
|
staticUtility("rounded-xs", [["border-radius", "var(--radius-xs)"]], { category: "borders" });
|
|
6806
|
-
|
|
6717
|
+
var FULL = "calc(infinity * 1px)";
|
|
6718
|
+
function roundedFull(name, props) {
|
|
6719
|
+
registerUtility({
|
|
6720
|
+
name,
|
|
6721
|
+
match: (className) => className === name,
|
|
6722
|
+
handler: (_value, ctx) => {
|
|
6723
|
+
const own = themeKeyValue(ctx, "borderRadius", "full");
|
|
6724
|
+
const value = own != null && own !== "9999px" && own !== FULL ? "var(--radius-full)" : FULL;
|
|
6725
|
+
return props.map((prop) => decl(prop, value));
|
|
6726
|
+
},
|
|
6727
|
+
category: "borders"
|
|
6728
|
+
});
|
|
6729
|
+
}
|
|
6730
|
+
roundedFull("rounded-full", ["border-radius"]);
|
|
6807
6731
|
[
|
|
6808
6732
|
["rounded-t", ["border-top-left-radius", "border-top-right-radius"]],
|
|
6809
6733
|
["rounded-r", ["border-top-right-radius", "border-bottom-right-radius"]],
|
|
@@ -6832,14 +6756,14 @@ staticUtility("rounded-full", [["border-radius", "9999px"]], { category: "border
|
|
|
6832
6756
|
staticUtility(`${name}-3xl`, propList.map((prop) => [prop, "var(--radius-3xl)"]), { category: "borders" });
|
|
6833
6757
|
staticUtility(`${name}-4xl`, propList.map((prop) => [prop, "var(--radius-4xl)"]), { category: "borders" });
|
|
6834
6758
|
staticUtility(`${name}-xs`, propList.map((prop) => [prop, "var(--radius-xs)"]), { category: "borders" });
|
|
6835
|
-
|
|
6759
|
+
roundedFull(`${name}-full`, propList);
|
|
6836
6760
|
functionalUtility({
|
|
6837
6761
|
name,
|
|
6838
6762
|
supportsArbitrary: true,
|
|
6839
6763
|
supportsCustomProperty: true,
|
|
6840
|
-
handleBareValue: ({ value }) => {
|
|
6764
|
+
handleBareValue: ({ value, ctx }) => {
|
|
6841
6765
|
if (!logical && parseNumber(value)) return `calc(var(--spacing) * ${value})`;
|
|
6842
|
-
return
|
|
6766
|
+
return themeKeyVar(ctx, "borderRadius", value, "radius");
|
|
6843
6767
|
},
|
|
6844
6768
|
handle: (value) => propList.map((prop) => decl(prop, value)),
|
|
6845
6769
|
description: `${name} utility (spacing, arbitrary, custom property support)`,
|
|
@@ -6851,9 +6775,9 @@ functionalUtility({
|
|
|
6851
6775
|
handle: (value, _ctx, token) => token.prefix === "rounded" ? [decl("border-radius", value)] : null,
|
|
6852
6776
|
supportsArbitrary: true,
|
|
6853
6777
|
supportsCustomProperty: true,
|
|
6854
|
-
handleBareValue: ({ value }) => {
|
|
6778
|
+
handleBareValue: ({ value, ctx }) => {
|
|
6855
6779
|
if (parseNumber(value)) return `calc(var(--spacing) * ${value})`;
|
|
6856
|
-
return
|
|
6780
|
+
return themeKeyVar(ctx, "borderRadius", value, "radius");
|
|
6857
6781
|
},
|
|
6858
6782
|
description: "border-radius utility (spacing, arbitrary, custom property support)",
|
|
6859
6783
|
category: "borders"
|
|
@@ -6902,7 +6826,7 @@ var withBorderStyle = (props, width) => [
|
|
|
6902
6826
|
staticUtility(`${name}`, styled("1px"));
|
|
6903
6827
|
functionalUtility({
|
|
6904
6828
|
name,
|
|
6905
|
-
themeKeys: ["
|
|
6829
|
+
themeKeys: ["colors", "borderWidth"],
|
|
6906
6830
|
supportsOpacity: true,
|
|
6907
6831
|
supportsArbitrary: true,
|
|
6908
6832
|
supportsCustomProperty: true,
|
|
@@ -6911,6 +6835,7 @@ var withBorderStyle = (props, width) => [
|
|
|
6911
6835
|
return null;
|
|
6912
6836
|
},
|
|
6913
6837
|
handle: (value, ctx, token, extra) => {
|
|
6838
|
+
if (extra?.themeNamespace === "borderWidth") return withBorderStyle(propList, value);
|
|
6914
6839
|
if (extra?.realThemeValue) return propList.flatMap((prop) => themeColorDecls(prop.replace("width", "color"), value, extra));
|
|
6915
6840
|
if (parseColor(value)) return propList.map((prop) => decl(prop.replace("width", "color"), value));
|
|
6916
6841
|
if (token.arbitrary) return withBorderStyle(propList, value);
|
|
@@ -6957,6 +6882,7 @@ Object.entries({
|
|
|
6957
6882
|
staticUtility(`divide-${axis}-reverse`, [rule(":where(& > :not(:last-child))", [decl(rev, "1")])], { category: "borders" });
|
|
6958
6883
|
functionalUtility({
|
|
6959
6884
|
name: `divide-${axis}`,
|
|
6885
|
+
themeKeys: ["divideWidth", "borderWidth"],
|
|
6960
6886
|
supportsArbitrary: true,
|
|
6961
6887
|
handleBareValue: ({ value }) => /^\d+$/.test(value) ? `${value}px` : null,
|
|
6962
6888
|
handle: (value) => divide(value),
|
|
@@ -6971,6 +6897,7 @@ functionalUtility({
|
|
|
6971
6897
|
supportsCustomProperty: true,
|
|
6972
6898
|
supportsOpacity: true,
|
|
6973
6899
|
handle: (value, ctx, token, extra) => {
|
|
6900
|
+
if (extra?.themeNamespace === "borderWidth") return withBorderStyle(["border-width"], value);
|
|
6974
6901
|
if (extra?.realThemeValue) return themeColorDecls("border-color", value, extra);
|
|
6975
6902
|
if (token.arbitrary) {
|
|
6976
6903
|
if (parseLength(value)) return withBorderStyle(["border-width"], value);
|
|
@@ -7047,11 +6974,12 @@ functionalUtility({
|
|
|
7047
6974
|
});
|
|
7048
6975
|
functionalUtility({
|
|
7049
6976
|
name: "outline",
|
|
7050
|
-
themeKeys: ["colors", "
|
|
6977
|
+
themeKeys: ["colors", "outlineWidth"],
|
|
7051
6978
|
supportsArbitrary: true,
|
|
7052
6979
|
supportsCustomProperty: true,
|
|
7053
6980
|
supportsOpacity: true,
|
|
7054
6981
|
handle: (value, ctx, token, extra) => {
|
|
6982
|
+
if (extra?.themeNamespace === "outlineWidth") return withOutlineStyle(value);
|
|
7055
6983
|
if (extra?.realThemeValue) return themeColorDecls("outline-color", value, extra);
|
|
7056
6984
|
if (parseColor(value)) return [decl("outline-color", value)];
|
|
7057
6985
|
if (parseNumber(value)) return withOutlineStyle(`${value}px`);
|
|
@@ -7524,11 +7452,11 @@ staticUtility("stroke-black", [["stroke", "#000"]], { category: "svg" });
|
|
|
7524
7452
|
staticUtility("stroke-white", [["stroke", "#fff"]], { category: "svg" });
|
|
7525
7453
|
functionalUtility({
|
|
7526
7454
|
name: "stroke",
|
|
7527
|
-
themeKeys: ["colors"],
|
|
7455
|
+
themeKeys: ["colors", "strokeWidth"],
|
|
7528
7456
|
supportsArbitrary: true,
|
|
7529
7457
|
supportsCustomProperty: true,
|
|
7530
7458
|
handle: (value, ctx, token, extra) => {
|
|
7531
|
-
if (parseNumber(value)) return [decl("stroke-width", value)];
|
|
7459
|
+
if (parseNumber(value) || extra?.themeNamespace === "strokeWidth") return [decl("stroke-width", value)];
|
|
7532
7460
|
if (extra?.realThemeValue) return [decl("stroke", `var(--color-${extra.realThemeValue})`)];
|
|
7533
7461
|
return [decl("stroke", value)];
|
|
7534
7462
|
},
|
|
@@ -7684,7 +7612,7 @@ staticModifier("open", ["&:is([open], :popover-open, :open)"], {
|
|
|
7684
7612
|
var withPseudoContent = (ast) => [
|
|
7685
7613
|
atRoot([property("--baro-content", "\"\"")]),
|
|
7686
7614
|
...ast,
|
|
7687
|
-
decl("content", "var(--baro-content)")
|
|
7615
|
+
...ast.some((n) => n.type === "decl" && n.prop === "content") ? [] : [decl("content", "var(--baro-content)")]
|
|
7688
7616
|
];
|
|
7689
7617
|
staticModifier("before", ["&::before"], {
|
|
7690
7618
|
source: "pseudo",
|
|
@@ -7694,19 +7622,14 @@ staticModifier("after", ["&::after"], {
|
|
|
7694
7622
|
source: "pseudo",
|
|
7695
7623
|
astHandler: withPseudoContent
|
|
7696
7624
|
});
|
|
7697
|
-
staticModifier("placeholder", [
|
|
7698
|
-
|
|
7699
|
-
|
|
7700
|
-
"&::-moz-placeholder",
|
|
7701
|
-
"&:-ms-input-placeholder"
|
|
7702
|
-
], { source: "pseudo" });
|
|
7703
|
-
staticModifier("selection", ["&::selection", "&::-moz-selection"], { source: "pseudo" });
|
|
7704
|
-
staticModifier("file", ["&::file-selector-button", "&::-webkit-file-upload-button"], { source: "pseudo" });
|
|
7625
|
+
staticModifier("placeholder", ["&::placeholder"], { source: "pseudo" });
|
|
7626
|
+
staticModifier("selection", ["& *::selection", "&::selection"], { source: "pseudo" });
|
|
7627
|
+
staticModifier("file", ["&::file-selector-button"], { source: "pseudo" });
|
|
7705
7628
|
staticModifier("marker", [
|
|
7629
|
+
"& *::marker",
|
|
7706
7630
|
"&::marker",
|
|
7707
|
-
"
|
|
7708
|
-
"&::-
|
|
7709
|
-
"&::-moz-list-number"
|
|
7631
|
+
"& *::-webkit-details-marker",
|
|
7632
|
+
"&::-webkit-details-marker"
|
|
7710
7633
|
], { source: "pseudo" });
|
|
7711
7634
|
staticModifier("details-content", ["&::details-content"], { source: "pseudo" });
|
|
7712
7635
|
staticModifier("first-line", ["&::first-line"], { source: "pseudo" });
|
|
@@ -7764,7 +7687,9 @@ function attributeVariantSelector(variant) {
|
|
|
7764
7687
|
return `[${kind}-${key}=${/^(["']).*\1$/.test(raw) ? raw : `"${decodeArbitrarySelector(raw)}"`}]`;
|
|
7765
7688
|
}
|
|
7766
7689
|
const bare = /^data-([a-zA-Z0-9_-]+)$/.exec(variant);
|
|
7767
|
-
|
|
7690
|
+
if (bare) return `[data-${bare[1]}]`;
|
|
7691
|
+
const aria = /^aria-([a-zA-Z0-9_-]+)$/.exec(variant);
|
|
7692
|
+
return aria ? `[aria-${aria[1]}="true"]` : void 0;
|
|
7768
7693
|
}
|
|
7769
7694
|
/**
|
|
7770
7695
|
* The argument of a `:has()`/`:not()` built from an arbitrary value: a selector list is wrapped as `*:is(…)`
|
|
@@ -7785,6 +7710,80 @@ function hasTopLevelComma(value) {
|
|
|
7785
7710
|
}
|
|
7786
7711
|
return false;
|
|
7787
7712
|
}
|
|
7713
|
+
/**
|
|
7714
|
+
* #335: the pseudo-class selector (`:hover`, `:first-child`, `:nth-child(odd)`) of a registered static
|
|
7715
|
+
* variant, for compounding in not-/group-/peer-/has- forms, or null when the variant is unknown or is not a
|
|
7716
|
+
* single pseudo-class (pseudo-elements, at-rules, multi-selector variants). Tailwind 4.3.3 emits nothing
|
|
7717
|
+
* for a compound variant whose inner variant it cannot compound (`not-foo`, `group-before`, `peer-has-foo`).
|
|
7718
|
+
*/
|
|
7719
|
+
function pseudoClassOf(name, ctx) {
|
|
7720
|
+
const plugin = getModifier(ctx).find((p) => p.name === name && p.match(name, ctx));
|
|
7721
|
+
if (!plugin?.modifySelector) return null;
|
|
7722
|
+
const r = plugin.modifySelector({
|
|
7723
|
+
selector: "&",
|
|
7724
|
+
fullClassName: "",
|
|
7725
|
+
mod: { type: name },
|
|
7726
|
+
context: ctx
|
|
7727
|
+
});
|
|
7728
|
+
const list = Array.isArray(r) ? r : r && typeof r === "object" ? [r] : typeof r === "string" ? [{ selector: r }] : [];
|
|
7729
|
+
if (list.length !== 1) return null;
|
|
7730
|
+
const m = /^&(:(?!:)[a-zA-Z-]+(?:\(.*\))?)$/.exec(list[0].selector);
|
|
7731
|
+
return m ? m[1] : null;
|
|
7732
|
+
}
|
|
7733
|
+
/**
|
|
7734
|
+
* #352: the selector `not-<v>` / `group-not-<v>` negates: an attribute variant (`data-*`, `aria-*`), a
|
|
7735
|
+
* pseudo-class (#335), or a wrap-free `has-*` variant (`has-[…]`, `has-aria-*`), as Tailwind 4.3.3 compounds
|
|
7736
|
+
* them. Null when `<v>` is unknown or is not a single compound on `&`.
|
|
7737
|
+
*/
|
|
7738
|
+
function negatableSelectorOf(name, ctx) {
|
|
7739
|
+
const attr = attributeVariantSelector(name);
|
|
7740
|
+
if (attr) return attr;
|
|
7741
|
+
const pc = pseudoClassOf(name, ctx);
|
|
7742
|
+
if (pc || !name.startsWith("has-")) return pc;
|
|
7743
|
+
const plugin = getModifier(ctx).find((p) => p.match(name, ctx));
|
|
7744
|
+
if (!plugin?.modifySelector || plugin.wrap || plugin.astHandler) return null;
|
|
7745
|
+
const r = plugin.modifySelector({
|
|
7746
|
+
selector: "&",
|
|
7747
|
+
fullClassName: "",
|
|
7748
|
+
mod: { type: name },
|
|
7749
|
+
context: ctx
|
|
7750
|
+
});
|
|
7751
|
+
const list = Array.isArray(r) ? r : r && typeof r === "object" ? [r] : typeof r === "string" ? [{ selector: r }] : [];
|
|
7752
|
+
if (list.length !== 1) return null;
|
|
7753
|
+
const m = /^&(:has\(.+\))$/.exec(list[0].selector);
|
|
7754
|
+
return m && !m[1].includes("&") ? m[1] : null;
|
|
7755
|
+
}
|
|
7756
|
+
/**
|
|
7757
|
+
* #352: `not-<v>` for a wrap-only at-rule variant (`md`, `max-md`, `min-[…]`, `print`, `motion-safe`,
|
|
7758
|
+
* `supports-[…]`, `dark` in media mode): the same at-rule with its condition negated (`@media not (…)`,
|
|
7759
|
+
* `@supports not (…)`), as Tailwind 4.3.3 emits it. Null for anything else, and for a prelude that is a list
|
|
7760
|
+
* or already combines conditions, where a leading `not` would not negate the whole query.
|
|
7761
|
+
*/
|
|
7762
|
+
function negatedAtRuleOf(name, ctx) {
|
|
7763
|
+
if (name.startsWith("not-")) return null;
|
|
7764
|
+
const plugin = getModifier(ctx).find((p) => p.match(name, ctx));
|
|
7765
|
+
if (!plugin?.wrap || plugin.astHandler) return null;
|
|
7766
|
+
if (plugin.modifySelector) {
|
|
7767
|
+
const r = plugin.modifySelector({
|
|
7768
|
+
selector: "&",
|
|
7769
|
+
fullClassName: "",
|
|
7770
|
+
mod: { type: name },
|
|
7771
|
+
context: ctx
|
|
7772
|
+
});
|
|
7773
|
+
if ((typeof r === "string" ? r : Array.isArray(r) ? r.length === 1 ? r[0].selector : null : r?.selector) !== "&") return null;
|
|
7774
|
+
}
|
|
7775
|
+
const items = plugin.wrap({ type: name }, ctx);
|
|
7776
|
+
if (items.length !== 1) return null;
|
|
7777
|
+
const node = items[0];
|
|
7778
|
+
if (node.type !== "at-rule" || node.name !== "media" && node.name !== "supports" || node.nodes?.length) return null;
|
|
7779
|
+
const params = (node.params ?? "").trim();
|
|
7780
|
+
if (!params || /^not\b|,|\s(and|or)\s/i.test(params)) return null;
|
|
7781
|
+
return {
|
|
7782
|
+
...node,
|
|
7783
|
+
params: `not ${params}`,
|
|
7784
|
+
nodes: []
|
|
7785
|
+
};
|
|
7786
|
+
}
|
|
7788
7787
|
//#endregion
|
|
7789
7788
|
//#region src/presets/variants/responsive.ts
|
|
7790
7789
|
functionalModifier((mod, context) => {
|
|
@@ -7935,6 +7934,7 @@ function innerCompound(variant, ctx) {
|
|
|
7935
7934
|
mod: { type: variant },
|
|
7936
7935
|
context: ctx
|
|
7937
7936
|
});
|
|
7937
|
+
if (out == null) return void 0;
|
|
7938
7938
|
const list = typeof out === "string" ? [{ selector: out }] : Array.isArray(out) ? out : [out];
|
|
7939
7939
|
if (list.length !== 1) return void 0;
|
|
7940
7940
|
const sel = list[0].selector;
|
|
@@ -8029,6 +8029,10 @@ functionalModifier((mod, ctx) => {
|
|
|
8029
8029
|
}, groupHasSelector);
|
|
8030
8030
|
//#endregion
|
|
8031
8031
|
//#region src/presets/variants/negation-variants.ts
|
|
8032
|
+
functionalModifier((mod, context) => /^not-(?!@)/.test(mod) && !!negatedAtRuleOf(mod.slice(4), context), () => "&", (mod, context) => {
|
|
8033
|
+
const node = negatedAtRuleOf(mod.type.slice(4), context);
|
|
8034
|
+
return node ? [node] : [];
|
|
8035
|
+
});
|
|
8032
8036
|
functionalModifier((mod) => /^not-\[.*\]$/.test(mod), ({ selector, mod }) => {
|
|
8033
8037
|
const m = /^not-\[(.+)\]$/.exec(mod.type);
|
|
8034
8038
|
if (m) {
|
|
@@ -8050,10 +8054,12 @@ functionalModifier((mod) => /^not-\[.*\]$/.test(mod), ({ selector, mod }) => {
|
|
|
8050
8054
|
source: "attribute"
|
|
8051
8055
|
};
|
|
8052
8056
|
});
|
|
8053
|
-
functionalModifier((mod) => /^not-/.test(mod) && !mod.startsWith("not-@"), ({ selector, mod }) => {
|
|
8057
|
+
functionalModifier((mod) => /^not-/.test(mod) && !mod.startsWith("not-@"), ({ selector, mod, context }) => {
|
|
8054
8058
|
const m = /^not-(.+)$/.exec(mod.type);
|
|
8059
|
+
const inner = m ? negatableSelectorOf(m[1], context) : null;
|
|
8060
|
+
if (m && !inner) return null;
|
|
8055
8061
|
return {
|
|
8056
|
-
selector:
|
|
8062
|
+
selector: inner ? `&:not(${inner})` : selector,
|
|
8057
8063
|
flatten: false,
|
|
8058
8064
|
wrappingType: "rule",
|
|
8059
8065
|
source: "attribute"
|
|
@@ -8113,7 +8119,7 @@ functionalModifier((mod) => /^aria-/.test(mod), ({ selector, mod }) => {
|
|
|
8113
8119
|
source: "aria"
|
|
8114
8120
|
};
|
|
8115
8121
|
}, void 0);
|
|
8116
|
-
functionalModifier((mod) => mod.startsWith("not-") && !mod.startsWith("not-@"), ({ selector, mod }) => {
|
|
8122
|
+
functionalModifier((mod) => mod.startsWith("not-") && !mod.startsWith("not-@"), ({ selector, mod, context }) => {
|
|
8117
8123
|
const pseudo = mod.type.replace("not-", "");
|
|
8118
8124
|
if (pseudo.startsWith("[")) {
|
|
8119
8125
|
const inner = pseudo.slice(1, -1);
|
|
@@ -8125,10 +8131,14 @@ functionalModifier((mod) => mod.startsWith("not-") && !mod.startsWith("not-@"),
|
|
|
8125
8131
|
selector: `&:not(${functionalArgument(inner)})`,
|
|
8126
8132
|
source: "attribute"
|
|
8127
8133
|
};
|
|
8128
|
-
} else
|
|
8129
|
-
|
|
8130
|
-
|
|
8131
|
-
|
|
8134
|
+
} else {
|
|
8135
|
+
const inner = negatableSelectorOf(pseudo, context);
|
|
8136
|
+
if (!inner) return null;
|
|
8137
|
+
return {
|
|
8138
|
+
selector: `&:not(${inner})`,
|
|
8139
|
+
source: "attribute"
|
|
8140
|
+
};
|
|
8141
|
+
}
|
|
8132
8142
|
}, void 0);
|
|
8133
8143
|
functionalModifier((mod) => /^data-/.test(mod), ({ selector, mod }) => {
|
|
8134
8144
|
const bracket = /^data-\[([a-zA-Z0-9_-]+)(?:=([^\]]+))?\]$/.exec(mod.type);
|
|
@@ -8241,11 +8251,13 @@ functionalModifier((mod) => /^(group|peer)-hover(\/[a-zA-Z0-9_-]+)?$/.test(mod),
|
|
|
8241
8251
|
source: kind
|
|
8242
8252
|
};
|
|
8243
8253
|
}, () => [atRule("media", "(hover: hover)", [])]);
|
|
8244
|
-
function negated(value) {
|
|
8254
|
+
function negated(value, ctx) {
|
|
8245
8255
|
const v = value.slice(4);
|
|
8246
|
-
|
|
8256
|
+
if (v.startsWith("[") && v.endsWith("]")) return `:not(*:is(${decodeArbitrarySelector(v.slice(1, -1))}))`;
|
|
8257
|
+
const inner = negatableSelectorOf(v, ctx);
|
|
8258
|
+
return inner ? `:not(${inner})` : null;
|
|
8247
8259
|
}
|
|
8248
|
-
functionalModifier((mod) => /^group-(.+)$/.test(mod) && !atRuleHas(mod), ({ selector, mod }) => {
|
|
8260
|
+
functionalModifier((mod) => /^group-(.+)$/.test(mod) && !atRuleHas(mod), ({ selector, mod, context }) => {
|
|
8249
8261
|
const raw = /^group-(.+)$/.exec(mod.type);
|
|
8250
8262
|
const [variant, base] = splitGroupName("group", raw?.[1] ?? "");
|
|
8251
8263
|
const m = raw ? [raw[0], variant] : null;
|
|
@@ -8261,11 +8273,14 @@ functionalModifier((mod) => /^group-(.+)$/.test(mod) && !atRuleHas(mod), ({ sele
|
|
|
8261
8273
|
wrappingType: "rule",
|
|
8262
8274
|
source: "group"
|
|
8263
8275
|
};
|
|
8264
|
-
if (m?.[1]?.startsWith("not-"))
|
|
8265
|
-
|
|
8266
|
-
|
|
8267
|
-
|
|
8268
|
-
|
|
8276
|
+
if (m?.[1]?.startsWith("not-")) {
|
|
8277
|
+
const neg = negated(m[1], context);
|
|
8278
|
+
return neg ? {
|
|
8279
|
+
selector: `&:is(${g}${neg} *)`,
|
|
8280
|
+
wrappingType: "rule",
|
|
8281
|
+
source: "group"
|
|
8282
|
+
} : null;
|
|
8283
|
+
}
|
|
8269
8284
|
if (m?.[1]?.startsWith("has-")) {
|
|
8270
8285
|
const pattern = /^has-\[([a-zA-Z0-9_-]+)\]$/.exec(m?.[1]);
|
|
8271
8286
|
if (pattern) return {
|
|
@@ -8291,8 +8306,10 @@ functionalModifier((mod) => /^group-(.+)$/.test(mod) && !atRuleHas(mod), ({ sele
|
|
|
8291
8306
|
};
|
|
8292
8307
|
}
|
|
8293
8308
|
}
|
|
8309
|
+
const pc = m ? pseudoClassOf(m[1], context) : null;
|
|
8310
|
+
if (m && !pc) return null;
|
|
8294
8311
|
return m ? {
|
|
8295
|
-
selector: `&:is(${g}
|
|
8312
|
+
selector: `&:is(${g}${pc} *)`,
|
|
8296
8313
|
wrappingType: "rule",
|
|
8297
8314
|
source: "group"
|
|
8298
8315
|
} : {
|
|
@@ -8300,7 +8317,7 @@ functionalModifier((mod) => /^group-(.+)$/.test(mod) && !atRuleHas(mod), ({ sele
|
|
|
8300
8317
|
source: "group"
|
|
8301
8318
|
};
|
|
8302
8319
|
}, void 0);
|
|
8303
|
-
functionalModifier((mod) => /^peer-(.+)$/.test(mod) && !atRuleHas(mod), ({ selector, mod }) => {
|
|
8320
|
+
functionalModifier((mod) => /^peer-(.+)$/.test(mod) && !atRuleHas(mod), ({ selector, mod, context }) => {
|
|
8304
8321
|
const raw = /^peer-(.+)$/.exec(mod.type);
|
|
8305
8322
|
const [variant, base] = splitGroupName("peer", raw?.[1] ?? "");
|
|
8306
8323
|
const m = raw ? [raw[0], variant] : null;
|
|
@@ -8321,14 +8338,22 @@ functionalModifier((mod) => /^peer-(.+)$/.test(mod) && !atRuleHas(mod), ({ selec
|
|
|
8321
8338
|
selector: `&:is(${g}:has(${functionalArgument(value.slice(5, -1))}) ~ *)`,
|
|
8322
8339
|
source: "peer"
|
|
8323
8340
|
};
|
|
8324
|
-
if (value?.startsWith("has-"))
|
|
8325
|
-
|
|
8326
|
-
|
|
8327
|
-
|
|
8328
|
-
|
|
8329
|
-
|
|
8330
|
-
|
|
8331
|
-
}
|
|
8341
|
+
if (value?.startsWith("has-")) {
|
|
8342
|
+
const pc = pseudoClassOf(value.slice(4), context);
|
|
8343
|
+
if (!pc) return null;
|
|
8344
|
+
return {
|
|
8345
|
+
selector: `&:is(${g}:has(${pc})~*)`,
|
|
8346
|
+
source: "peer"
|
|
8347
|
+
};
|
|
8348
|
+
}
|
|
8349
|
+
if (value?.startsWith("not-")) {
|
|
8350
|
+
const neg = negated(value, context);
|
|
8351
|
+
if (!neg) return null;
|
|
8352
|
+
return {
|
|
8353
|
+
selector: `&:is(${g}${neg} ~ *)`,
|
|
8354
|
+
source: "peer"
|
|
8355
|
+
};
|
|
8356
|
+
}
|
|
8332
8357
|
if (value?.startsWith("aria-")) {
|
|
8333
8358
|
let pattern = /^aria-([a-zA-Z0-9_]+)$/.exec(value);
|
|
8334
8359
|
if (pattern) return {
|
|
@@ -8349,8 +8374,10 @@ functionalModifier((mod) => /^peer-(.+)$/.test(mod) && !atRuleHas(mod), ({ selec
|
|
|
8349
8374
|
};
|
|
8350
8375
|
}
|
|
8351
8376
|
}
|
|
8377
|
+
const pc = m ? pseudoClassOf(value, context) : null;
|
|
8378
|
+
if (m && !pc) return null;
|
|
8352
8379
|
return m ? {
|
|
8353
|
-
selector: `&:is(${g}
|
|
8380
|
+
selector: `&:is(${g}${pc}~*)`,
|
|
8354
8381
|
source: "peer"
|
|
8355
8382
|
} : {
|
|
8356
8383
|
selector,
|
|
@@ -8399,6 +8426,7 @@ function toPx(n, unit) {
|
|
|
8399
8426
|
}
|
|
8400
8427
|
function preludeKey(kind, prelude) {
|
|
8401
8428
|
const container = kind === "container";
|
|
8429
|
+
if (!container && /^\s*not\b/i.test(prelude)) return [0, 0];
|
|
8402
8430
|
const min = MIN_W.exec(prelude);
|
|
8403
8431
|
if (min) return [container ? 4 : 2, toPx(min[1], min[2])];
|
|
8404
8432
|
const max = MAX_W.exec(prelude);
|
|
@@ -8434,6 +8462,6 @@ function upperBound(keys, key) {
|
|
|
8434
8462
|
return lo;
|
|
8435
8463
|
}
|
|
8436
8464
|
//#endregion
|
|
8437
|
-
export { AstCache, IncrementalParser, ParseResultCache, UtilityCache, WeakCache, arbitraryPropertyRegistration, astCache, astToCss, atRoot, atRule, clearAllCaches, clearAstCache, collectDeclPaths, comment, compareKeys, configGetter, createContext, decl, declPathToAst, deepMerge, defaultConfig, escapeClassName, expandThemeFunctions, functionalModifier, functionalUtility, generateCss, generateCssFromJson, generateCssRules, getAstCacheStats, getModifier, getPreflightCSS, getUtility, hasCommentDelimiter, hasCommentToken, hasHtmlEndTagOpener, hasPreset, isBalancedPrelude, isDebug, isSafeVariantToken, isSafeVariantValue, isStructureSafeValue, isWellFormedVariantBrackets, jsonToAst, mergeAstTreeList, modifierRegistry, normalizeMathSpacing, optimizeAst, parseClassName, parseClassToAst, parseResultCache, property, raw, registerModifier, registerUtility, resolveTheme, rootToCss, rule, ruleSortKey, setContextCacheReset, setDebug, staticModifier, staticUtility, styleRule, themeGetter, themeToCssVars, tokenize, upperBound, utilityCache };
|
|
8465
|
+
export { AstCache, IncrementalParser, ParseResultCache, UtilityCache, WeakCache, arbitraryPropertyRegistration, astCache, astToCss, atRoot, atRule, clearAllCaches, clearAstCache, collectDeclPaths, comment, compareKeys, configGetter, createContext, decl, declPathToAst, deepMerge, defaultConfig, escapeClassName, expandThemeFunctions, functionalModifier, functionalUtility, generateCss, generateCssFromJson, generateCssRules, getAstCacheStats, getModifier, getPreflightCSS, getUtility, hasCommentDelimiter, hasCommentToken, hasHtmlEndTagOpener, hasPreset, isBalancedPrelude, isDebug, isSafeVariantToken, isSafeVariantValue, isStructureSafeValue, isWellFormedVariantBrackets, jsonToAst, mergeAstTreeList, modifierRegistry, normalizeMathSpacing, optimizeAst, parseClassName, parseClassToAst, parseResultCache, property, raw, registerModifier, registerUtility, resolveTheme, rootToCss, rule, ruleSortKey, setContextCacheReset, setDebug, staticModifier, staticUtility, styleRule, themeGetter, themeKeyValue, themeKeyVar, themeToCssVars, tokenize, upperBound, utilityCache };
|
|
8438
8466
|
|
|
8439
8467
|
//# sourceMappingURL=index.js.map
|