@webjsdev/ui 0.3.12 → 0.3.13
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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@webjsdev/ui",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.13",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "The AI-first component library for WebJs, a full-stack JavaScript framework built on web components with server-side rendering and no build step. Class-helper functions for visuals, custom elements only where state matters, source-copied into your repo so you own it.",
|
|
6
6
|
"bin": {
|
|
@@ -9,14 +9,16 @@
|
|
|
9
9
|
* NativeSelect wrapper → nativeSelectWrapperClass()
|
|
10
10
|
* NativeSelect chevron → nativeSelectIconClass()
|
|
11
11
|
* NativeSelect option → bare <option> (or nativeSelectOptionClass()
|
|
12
|
-
* for explicit overrides
|
|
12
|
+
* for explicit overrides, since the theme
|
|
13
13
|
* stylesheet sets Canvas / CanvasText on
|
|
14
14
|
* every <option> automatically)
|
|
15
15
|
*
|
|
16
|
-
*
|
|
17
|
-
*
|
|
18
|
-
*
|
|
19
|
-
*
|
|
16
|
+
* The theme stylesheet forces Canvas / CanvasText on every <option> so the
|
|
17
|
+
* dropdown reads in both light and dark themes regardless of OS preference.
|
|
18
|
+
* It arrives with the design tokens (`npx @webjsdev/ui init`, or `add`, which
|
|
19
|
+
* writes the block when it is missing), so it is in the first paint and works
|
|
20
|
+
* with JavaScript off. Advanced overrides use `nativeSelectOptionClass()` and
|
|
21
|
+
* `nativeSelectOptGroupClass()`.
|
|
20
22
|
*
|
|
21
23
|
* Design tokens used: --input, --background, --primary, --primary-foreground,
|
|
22
24
|
* --muted-foreground, --ring, --destructive.
|
|
@@ -58,61 +60,17 @@ import { cn } from '../lib/utils.ts';
|
|
|
58
60
|
|
|
59
61
|
export type NativeSelectSize = 'default' | 'sm';
|
|
60
62
|
|
|
61
|
-
//
|
|
62
|
-
//
|
|
63
|
-
//
|
|
64
|
-
//
|
|
65
|
-
//
|
|
66
|
-
// from the <select> matches that dark popup: the option disappears,
|
|
67
|
-
// only the focused/selected one stays visible because the browser
|
|
68
|
-
// overlays its own highlight on it.
|
|
63
|
+
// The <option> / <optgroup> colour rule is NOT injected from here. It lives in
|
|
64
|
+
// the theme stylesheet the kit installs, so it is in the first paint, works
|
|
65
|
+
// with JavaScript off, and does not make this module client-effecting (a
|
|
66
|
+
// module-scope call pins every page that imports it, #1320). See the
|
|
67
|
+
// `select option, select optgroup` rule in the theme block.
|
|
69
68
|
//
|
|
70
|
-
//
|
|
71
|
-
//
|
|
72
|
-
//
|
|
73
|
-
//
|
|
74
|
-
//
|
|
75
|
-
// hover-card docs examples both do this), in which case the rule
|
|
76
|
-
// never matched and the dropdown reverted to invisible-options.
|
|
77
|
-
// Broadening to `select option, select optgroup` makes the fix work
|
|
78
|
-
// everywhere the user has imported native-select, with no required
|
|
79
|
-
// wrapper. The Canvas/CanvasText pair is a safe default: they ARE
|
|
80
|
-
// the system colours the browser would have painted anyway when no
|
|
81
|
-
// rule applied; we just stop relying on inheritance to pull through.
|
|
82
|
-
// Selector specificity is 0,0,2 (two elements), so any user who
|
|
83
|
-
// genuinely needs custom <option> colours can override with a single
|
|
84
|
-
// class anywhere in their cascade (e.g. `.my-select option { ... }`
|
|
85
|
-
// at 0,1,2 wins).
|
|
86
|
-
//
|
|
87
|
-
// `nativeSelectOptionClass()` and `nativeSelectOptGroupClass()` stay
|
|
88
|
-
// exported for users who want to opt into the same colours via the
|
|
89
|
-
// class helper instead of the global rule. They emit the same
|
|
90
|
-
// `bg-[Canvas] text-[CanvasText]` Tailwind utilities: redundant if
|
|
91
|
-
// this stylesheet is installed, but harmless and matches the broader
|
|
92
|
-
// shadcn convention of "every part has a class helper".
|
|
93
|
-
const STYLES = `
|
|
94
|
-
select option,
|
|
95
|
-
select optgroup {
|
|
96
|
-
background-color: Canvas;
|
|
97
|
-
color: CanvasText;
|
|
98
|
-
}
|
|
99
|
-
`;
|
|
100
|
-
|
|
101
|
-
let installed = false;
|
|
102
|
-
export function installNativeSelectStyles(): void {
|
|
103
|
-
if (installed || typeof document === 'undefined') return;
|
|
104
|
-
if (document.getElementById('ui-native-select-styles')) {
|
|
105
|
-
installed = true;
|
|
106
|
-
return;
|
|
107
|
-
}
|
|
108
|
-
const style = document.createElement('style');
|
|
109
|
-
style.id = 'ui-native-select-styles';
|
|
110
|
-
style.textContent = STYLES;
|
|
111
|
-
document.head.appendChild(style);
|
|
112
|
-
installed = true;
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
if (typeof document !== 'undefined') installNativeSelectStyles();
|
|
69
|
+
// `nativeSelectOptionClass()` and `nativeSelectOptGroupClass()` stay exported
|
|
70
|
+
// for users who want to opt into the same colours via a class helper. They
|
|
71
|
+
// emit the same `bg-[Canvas] text-[CanvasText]` utilities: redundant when the
|
|
72
|
+
// theme block is present, harmless, and they match the broader shadcn
|
|
73
|
+
// convention that every part has a class helper.
|
|
116
74
|
|
|
117
75
|
export const nativeSelectWrapperClass = (): string =>
|
|
118
76
|
'group/native-select relative w-fit has-[select:disabled]:opacity-50';
|
|
@@ -50,99 +50,106 @@ function walk(value: ClassValue, out: string[]): void {
|
|
|
50
50
|
// IMPORTANT: text-size (text-sm, text-xs, text-base, text-lg, …) and
|
|
51
51
|
// text-color (text-primary, text-foreground, …) are DIFFERENT properties
|
|
52
52
|
// and must be in different groups. Same for bg-size vs bg-color etc.
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
]
|
|
53
|
+
// Built on FIRST USE, not at module load. A module-scope `...borderGroups()`
|
|
54
|
+
// spread is a real top-level call, so the elision analyser reads this module as
|
|
55
|
+
// client-effecting and every page that reaches `cn` on a component-free path
|
|
56
|
+
// ships whole instead of being elided (#1320).
|
|
57
|
+
let _groups: Array<[RegExp, string]> | undefined;
|
|
58
|
+
function GROUPS(): Array<[RegExp, string]> {
|
|
59
|
+
return (_groups ??= [
|
|
60
|
+
[/^p-/, 'p'], [/^px-/, 'px'], [/^py-/, 'py'], [/^pt-/, 'pt'], [/^pr-/, 'pr'], [/^pb-/, 'pb'], [/^pl-/, 'pl'],
|
|
61
|
+
[/^m-/, 'm'], [/^mx-/, 'mx'], [/^my-/, 'my'], [/^mt-/, 'mt'], [/^mr-/, 'mr'], [/^mb-/, 'mb'], [/^ml-/, 'ml'],
|
|
62
|
+
[/^w-/, 'w'], [/^h-/, 'h'], [/^size-/, 'size'],
|
|
63
|
+
// A `bg-[url(…)]` / `bg-[linear-gradient(…)]` background image is classified
|
|
64
|
+
// by its FUNCTION, since it carries no type hint to classify it by. The
|
|
65
|
+
// hinted forms are handled centrally, in `hintedGroup`.
|
|
66
|
+
[/^bg-\[(url\(|linear-gradient|radial-gradient|conic-gradient)/, 'bg-image'],
|
|
67
|
+
[/^bg-(linear|gradient|conic|radial|none)/, 'bg-image'],
|
|
68
|
+
[/^bg-(no-repeat|repeat|repeat-x|repeat-y|repeat-round|repeat-space)$/, 'bg-repeat'],
|
|
69
|
+
[/^bg-(fixed|local|scroll)$/, 'bg-attach'],
|
|
70
|
+
[/^bg-(auto|cover|contain)$/, 'bg-size'],
|
|
71
|
+
[/^bg-size-/, 'bg-size'],
|
|
72
|
+
// Two entries rather than one alternation: the first covers the live v4
|
|
73
|
+
// compounds (`bg-top-left`), the second the bare keywords plus the v4.1
|
|
74
|
+
// deprecated reversed compounds (`bg-left-top`), which tailwind-merge still
|
|
75
|
+
// carries. An unmatched `bg-*` token falls into the colour catch-all below and
|
|
76
|
+
// evicts a real colour, so admitting a dead spelling is the safe direction.
|
|
77
|
+
[/^bg-(top|bottom)(-(left|right))?$/, 'bg-position'],
|
|
78
|
+
[/^bg-(left|right|center)(-(top|bottom))?$/, 'bg-position'],
|
|
79
|
+
[/^bg-position-/, 'bg-position'],
|
|
80
|
+
// Clip, origin, and blend mode are three more properties under the same
|
|
81
|
+
// prefix. Each sat in `bg-color` before, so `bg-clip-text` evicted a real
|
|
82
|
+
// background colour (the gradient-text idiom lost its clip silently).
|
|
83
|
+
[/^bg-clip-(border|padding|content|text)$/, 'bg-clip'],
|
|
84
|
+
[/^bg-origin-(border|padding|content)$/, 'bg-origin'],
|
|
85
|
+
[/^bg-blend-(normal|multiply|screen|overlay|darken|lighten|color-dodge|color-burn|hard-light|soft-light|difference|exclusion|hue|saturation|color|luminosity)$/, 'bg-blend'],
|
|
86
|
+
[/^bg-/, 'bg-color'],
|
|
87
|
+
// text-shadow is its own property, and its size scale and its colour are two
|
|
88
|
+
// properties again. All three entries precede the text- patterns below, which
|
|
89
|
+
// is what keeps a `text-shadow-*` token out of `text-size` and `text-color`.
|
|
90
|
+
[/^text-shadow(-(2xs|xs|sm|md|lg|none))?(\/([\d.]+|\[[^\]]*\]))?$/, 'text-shadow'],
|
|
91
|
+
[/^text-shadow-(\[(inset|-|\.|\d|var\()|\(--)/, 'text-shadow'],
|
|
92
|
+
[/^text-shadow-/, 'text-shadow-color'],
|
|
93
|
+
// Font size: explicit list of Tailwind size scale.
|
|
94
|
+
[/^text-(xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl)$/, 'text-size'],
|
|
95
|
+
// Alignment, wrapping, and overflow are three more properties under the same
|
|
96
|
+
// prefix. Each was previously excluded from text-color by a lookahead and then
|
|
97
|
+
// matched nothing at all, so two alignments never collapsed.
|
|
98
|
+
[/^text-(left|center|right|justify|start|end)$/, 'text-align'],
|
|
99
|
+
[/^text-(wrap|nowrap|balance|pretty)$/, 'text-wrap'],
|
|
100
|
+
[/^text-(ellipsis|clip)$/, 'text-overflow'],
|
|
101
|
+
// Text color: anything else under the prefix. The specific groups above are
|
|
102
|
+
// the whole carve-out, so no negative lookahead is needed here as well.
|
|
103
|
+
[/^text-/, 'text-color'],
|
|
104
|
+
// Border sub-properties that are neither a width nor a colour. These come
|
|
105
|
+
// FIRST so the width / colour classifier below never sees them.
|
|
106
|
+
[/^border-(collapse|separate)$/, 'border-collapse'],
|
|
107
|
+
[/^border-spacing(-[xy])?-/, 'border-spacing'],
|
|
108
|
+
[/^border-(solid|dashed|dotted|double|hidden|none)$/, 'border-style'],
|
|
109
|
+
...borderGroups(),
|
|
110
|
+
[/^rounded(-[a-z]+)?$/, 'rounded'],
|
|
111
|
+
[/^rounded-/, 'rounded'],
|
|
112
|
+
[/^opacity-/, 'opacity'],
|
|
113
|
+
[/^font-(thin|light|normal|medium|semibold|bold|black|extralight|extrabold)$/, 'font-weight'],
|
|
114
|
+
// Box-shadow SIZE and box-shadow COLOUR are two properties (`box-shadow` and
|
|
115
|
+
// `--tw-shadow-color`), so they need two groups. `shadow-none` is a size,
|
|
116
|
+
// `shadow-inherit` / `shadow-initial` are colours, and Tailwind accepts an
|
|
117
|
+
// alpha modifier on a size as well as on a colour, so `shadow-lg/25` has to
|
|
118
|
+
// stay on the size side. An unhinted arbitrary value is a SIZE when it opens
|
|
119
|
+
// with `inset`, a sign, a dot, or a digit (a shadow offset list) and also
|
|
120
|
+
// when it is a bare `var()` or the `(--x)` variable shorthand: Tailwind
|
|
121
|
+
// itself resolves an ambiguous arbitrary shadow to `box-shadow` unless the
|
|
122
|
+
// value is provably a colour, and `shadow-[var(--shadow-glow)]` is the normal
|
|
123
|
+
// way to write a design-token shadow. This is the one place the
|
|
124
|
+
// `borderGroups()` convention inverts, because a bare `border-[var(--x)]` is
|
|
125
|
+
// far more often a colour while a bare `shadow-[var(--x)]` is far more often
|
|
126
|
+
// a shadow. The size entries must precede the colour catch-all, or every
|
|
127
|
+
// size lands in the colour group and the bug inverts rather than being fixed.
|
|
128
|
+
[/^shadow(-(2xs|xs|sm|md|lg|xl|2xl|inner|none))?(\/([\d.]+|\[[^\]]*\]))?$/, 'shadow'],
|
|
129
|
+
[/^shadow-(\[(inset|-|\.|\d|var\()|\(--)/, 'shadow'],
|
|
130
|
+
// A bare name the size scale does not list reads as a colour, because
|
|
131
|
+
// `shadow-primary` is overwhelmingly more common than a `@theme`-extended
|
|
132
|
+
// `--shadow-card`. A project that adds a custom shadow NAME is the residual
|
|
133
|
+
// gap, and the docs say so rather than claiming the split is total.
|
|
134
|
+
[/^shadow-/, 'shadow-color'],
|
|
135
|
+
[/^z-/, 'z'],
|
|
136
|
+
// A bare `flex` / `grid` is a DISPLAY value, not a member of the flex / grid
|
|
137
|
+
// sub-property groups below, so it must never dedupe against them: an element
|
|
138
|
+
// can be both a flex container and a flex child (`class="flex flex-1"`), and
|
|
139
|
+
// collapsing the two silently drops `display:flex`. It still belongs to a
|
|
140
|
+
// group of its own, alongside every other display keyword, so a repeated one
|
|
141
|
+
// collapses and `cn('hidden', open && 'flex')` resolves to one display.
|
|
142
|
+
[/^(inline-block|inline-flex|inline-grid|inline-table|inline|block|flex|grid|flow-root|contents|hidden|list-item|table-caption|table-cell|table-column-group|table-column|table-footer-group|table-header-group|table-row-group|table-row|table)$/, 'display'],
|
|
143
|
+
// Each sub-utility below gets the group of the real CSS property it sets, so
|
|
144
|
+
// none of them collapses against the display value or against each other.
|
|
145
|
+
[/^flex-(row|row-reverse|col|col-reverse)$/, 'flex-direction'],
|
|
146
|
+
[/^flex-(wrap|wrap-reverse|nowrap)$/, 'flex-wrap'],
|
|
147
|
+
[/^flex-(\d+|auto|initial|none|\[[^\]]*\])$/, 'flex'],
|
|
148
|
+
[/^grid-cols-/, 'grid-cols'],
|
|
149
|
+
[/^grid-rows-/, 'grid-rows'],
|
|
150
|
+
[/^grid-flow-/, 'grid-flow'],
|
|
151
|
+
]);
|
|
152
|
+
}
|
|
146
153
|
|
|
147
154
|
/**
|
|
148
155
|
* Border WIDTH and border COLOUR share the `border-` prefix but are different
|
|
@@ -155,9 +162,11 @@ const GROUPS: Array<[RegExp, string]> = [
|
|
|
155
162
|
* Classification, after an optional side / axis segment: a bare or numeric
|
|
156
163
|
* value is a width (`border`, `border-2`, `border-t-4`), an arbitrary value
|
|
157
164
|
* that opens with a digit, a dot, or `length:` is a width (`border-[3px]`,
|
|
158
|
-
* `border-[length:var(--w)]
|
|
165
|
+
* `border-[length:var(--w)]`, and the v4 paren spelling
|
|
166
|
+
* `border-(length:--w)`), and everything else is a colour
|
|
159
167
|
* (`border-primary`, `border-red-500/50`, `border-[#fff]`). An ambiguous
|
|
160
|
-
* `border-[var(--x)]` falls to colour,
|
|
168
|
+
* `border-[var(--x)]`, or its paren spelling `border-(--x)`, falls to colour,
|
|
169
|
+
* which is the far more common intent.
|
|
161
170
|
*
|
|
162
171
|
* Each side is its own group so a per-side utility only overrides its own side,
|
|
163
172
|
* and the shorthand / axis subsumption is declared in CONFLICTS below, exactly
|
|
@@ -167,7 +176,7 @@ const GROUPS: Array<[RegExp, string]> = [
|
|
|
167
176
|
* the writing direction, so an axis override there would be a guess.
|
|
168
177
|
*/
|
|
169
178
|
function borderGroups(): Array<[RegExp, string]> {
|
|
170
|
-
const width = '(\\d+(\\.\\d+)?|\\[(length:|\\d|\\.)[^\\]]*\\])';
|
|
179
|
+
const width = '(\\d+(\\.\\d+)?|\\[(length:|\\d|\\.)[^\\]]*\\]|\\(length:[^)]*\\))';
|
|
171
180
|
const out: Array<[RegExp, string]> = [];
|
|
172
181
|
// Sides before the bare form: `border-t-primary` must match the `t` colour
|
|
173
182
|
// group, not be swallowed by the side-less `^border-` colour pattern.
|
|
@@ -185,7 +194,8 @@ function borderGroups(): Array<[RegExp, string]> {
|
|
|
185
194
|
|
|
186
195
|
/**
|
|
187
196
|
* An arbitrary value may carry a Tailwind TYPE HINT: `bg-[image:var(--g)]`,
|
|
188
|
-
* `text-[length:14px]`, `shadow-[color:red]
|
|
197
|
+
* `text-[length:14px]`, `shadow-[color:red]`, and in the v4 paren shorthand
|
|
198
|
+
* `bg-(image:--g)`, `shadow-(color:--x)`. The hint exists precisely because
|
|
189
199
|
* the utility prefix is ambiguous, so the PREFIX cannot decide the group and
|
|
190
200
|
* the hint must. Letting a hinted value fall into the prefix's default group
|
|
191
201
|
* evicts a class that sets an entirely different property (`shadow-[color:red]`
|
|
@@ -204,7 +214,13 @@ function borderGroups(): Array<[RegExp, string]> {
|
|
|
204
214
|
* while `bg-` and `text-` were correct.
|
|
205
215
|
*
|
|
206
216
|
* These reach the matcher at all only because `variantPrefix` splits on the
|
|
207
|
-
* last colon OUTSIDE brackets; see the comment there.
|
|
217
|
+
* last colon OUTSIDE brackets AND parentheses; see the comment there.
|
|
218
|
+
*
|
|
219
|
+
* Both spellings of one hint produce the identical `<prefix>:<hint>` key, so
|
|
220
|
+
* the map needs no paren-specific entries. The closing delimiter is
|
|
221
|
+
* deliberately not validated: the hint names the CSS property, and how the
|
|
222
|
+
* value terminates cannot change which property that is (the bracket branch
|
|
223
|
+
* has never validated its own close either).
|
|
208
224
|
*/
|
|
209
225
|
const HINTED_GROUPS: Record<string, string> = {
|
|
210
226
|
'bg:color': '',
|
|
@@ -227,7 +243,7 @@ const HINTED_GROUPS: Record<string, string> = {
|
|
|
227
243
|
* should decide it, `undefined` when the token carries no hint at all.
|
|
228
244
|
*/
|
|
229
245
|
function hintedGroup(bare: string): string | null | undefined {
|
|
230
|
-
const m = /^([a-z][a-z-]*)
|
|
246
|
+
const m = /^([a-z][a-z-]*)-[\[(]([a-z][a-z-]*):/.exec(bare);
|
|
231
247
|
if (!m) return undefined;
|
|
232
248
|
const prefix = m[1];
|
|
233
249
|
const hint = m[2];
|
|
@@ -283,7 +299,7 @@ function dedupeUtilities(input: string): string {
|
|
|
283
299
|
const hinted = hintedGroup(bare);
|
|
284
300
|
let gk: string | null = hinted ?? null;
|
|
285
301
|
if (hinted === undefined || hinted === null) {
|
|
286
|
-
for (const [re, g] of GROUPS) {
|
|
302
|
+
for (const [re, g] of GROUPS()) {
|
|
287
303
|
if (re.test(bare)) { gk = g; break; }
|
|
288
304
|
}
|
|
289
305
|
}
|
|
@@ -303,19 +319,32 @@ function dedupeUtilities(input: string): string {
|
|
|
303
319
|
|
|
304
320
|
function variantPrefix(token: string): string {
|
|
305
321
|
// Capture leading variants like `hover:`, `dark:`, `md:`: overrides only
|
|
306
|
-
// conflict within the same variant set. The split is the last colon
|
|
307
|
-
//
|
|
308
|
-
//
|
|
322
|
+
// conflict within the same variant set. The split is the last colon at top
|
|
323
|
+
// level, meaning outside BOTH square brackets and parentheses, because an
|
|
324
|
+
// arbitrary value can contain a colon of its own in either delimiter
|
|
325
|
+
// (`border-[length:2px]`, `bg-[url(https://x/y.png)]`, `text-[color:var(--c)]`,
|
|
326
|
+
// and the v4 paren spelling `shadow-(color:--x)`, `bg-(image:--g)`).
|
|
309
327
|
// Splitting on the last colon anywhere hands the group matcher a fragment
|
|
310
|
-
// like `2px]`, which matches nothing, so the utility silently
|
|
311
|
-
// deduping against its own property.
|
|
312
|
-
|
|
328
|
+
// like `2px]` or `--x)`, which matches nothing, so the utility silently
|
|
329
|
+
// stops deduping against its own property.
|
|
330
|
+
//
|
|
331
|
+
// TWO counters, both required to be zero, rather than one shared counter.
|
|
332
|
+
// Tailwind's own top-level splitter (`segment()`, in the upstream
|
|
333
|
+
// tailwindlabs/tailwindcss repo at packages/tailwindcss/src/utils/segment.ts,
|
|
334
|
+
// NOT a path in this repo) is a MATCHED-PAIR stack, so a
|
|
335
|
+
// stray closer never cancels a live opener of the other kind. A single
|
|
336
|
+
// shared counter would let `)` cancel `[` and read `x-[y)-z:w` as having a
|
|
337
|
+
// top-level colon, which is the fragment bug above wearing a different hat.
|
|
338
|
+
let bracketDepth = 0;
|
|
339
|
+
let parenDepth = 0;
|
|
313
340
|
let i = -1;
|
|
314
341
|
for (let n = 0; n < token.length; n += 1) {
|
|
315
342
|
const c = token[n];
|
|
316
|
-
if (c === '[')
|
|
317
|
-
else if (c === ']')
|
|
318
|
-
else if (c === '
|
|
343
|
+
if (c === '[') bracketDepth += 1;
|
|
344
|
+
else if (c === ']') bracketDepth -= 1;
|
|
345
|
+
else if (c === '(') parenDepth += 1;
|
|
346
|
+
else if (c === ')') parenDepth -= 1;
|
|
347
|
+
else if (c === ':' && bracketDepth === 0 && parenDepth === 0) i = n;
|
|
319
348
|
}
|
|
320
349
|
return i === -1 ? '' : token.slice(0, i + 1);
|
|
321
350
|
}
|
|
@@ -149,4 +149,17 @@
|
|
|
149
149
|
outline: 2px solid color-mix(in oklab, var(--color-ring) 50%, transparent);
|
|
150
150
|
outline-offset: 2px;
|
|
151
151
|
}
|
|
152
|
+
/* Native <select> options paint transparent over the browser popup when no
|
|
153
|
+
rule applies, so in dark mode Chrome's dark popup plus the inherited text
|
|
154
|
+
colour makes every unselected option disappear. Canvas / CanvasText are
|
|
155
|
+
the system colours the browser would have painted anyway, so this stops
|
|
156
|
+
relying on inheritance to pull them through. Two ELEMENT selectors
|
|
157
|
+
(specificity 0,0,2) and no wrapper requirement on purpose: a bare
|
|
158
|
+
<select class=${nativeSelectClass()}> with no wrapper is legitimate, and
|
|
159
|
+
any single class overrides this. */
|
|
160
|
+
select option,
|
|
161
|
+
select optgroup {
|
|
162
|
+
background-color: Canvas;
|
|
163
|
+
color: CanvasText;
|
|
164
|
+
}
|
|
152
165
|
}
|