Skip to content

Commit efaa898

Browse files
meiralealmeiraleal
committed
refactor: limit attribute rules to input element
1 parent 6cec4a4 commit efaa898

File tree

2 files changed

+76
-79
lines changed

2 files changed

+76
-79
lines changed

‎src/rules.ts‎

Lines changed: 30 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -7,22 +7,21 @@ export function buildRules(): FormsRule[] {
77
const borderWidth = { DEFAULT: '1px' }
88

99
const inputsClasses = [
10-
"[type='text']",
11-
'input:where(:not([type]))',
12-
"[type='email']",
13-
"[type='url']",
14-
"[type='password']",
15-
"[type='number']",
16-
"[type='date']",
17-
"[type='datetime-local']",
18-
"[type='month']",
19-
"[type='search']",
20-
"[type='tel']",
21-
"[type='time']",
22-
"[type='week']",
23-
'[multiple]',
24-
'textarea',
25-
'select',
10+
"input:where([type='text'])",
11+
"input:where(:not([type]))",
12+
"input:where([type='email'])",
13+
"input:where([type='url'])",
14+
"input:where([type='password'])",
15+
"input:where([type='number'])",
16+
"input:where([type='date'])",
17+
"input:where([type='datetime-local'])",
18+
"input:where([type='month'])",
19+
"input:where([type='search'])",
20+
"input:where([type='tel'])",
21+
"input:where([type='time'])",
22+
"input:where([type='week'])",
23+
"select",
24+
"textarea"
2625
]
2726

2827
return [
@@ -152,7 +151,7 @@ export function buildRules(): FormsRule[] {
152151
}),
153152
},
154153
{
155-
base: ['[multiple]'],
154+
base: ['select:where([multiple])'],
156155
class: null,
157156
styles: {
158157
'background-image': 'initial',
@@ -164,7 +163,7 @@ export function buildRules(): FormsRule[] {
164163
},
165164
},
166165
{
167-
base: [`[type='checkbox']`, `[type='radio']`],
166+
base: [`input:where([type='checkbox'])`, `input:where([type='radio'])`],
168167
class: ['.form-checkbox', '.form-radio'],
169168
styles: (theme: any) => ({
170169
'appearance': 'none',
@@ -185,21 +184,21 @@ export function buildRules(): FormsRule[] {
185184
}),
186185
},
187186
{
188-
base: [`[type='checkbox']`],
187+
base: [`input:where([type='checkbox'])`],
189188
class: ['.form-checkbox'],
190189
styles: (theme: any) => ({
191190
'border-radius': theme.borderRadius.none,
192191
}),
193192
},
194193
{
195-
base: [`[type='radio']`],
194+
base: [`input:where([type='radio'])`],
196195
class: ['.form-radio'],
197196
styles: {
198197
'border-radius': '100%',
199198
},
200199
},
201200
{
202-
base: [`[type='checkbox']:focus`, `[type='radio']:focus`],
201+
base: [`input:where([type='checkbox']):focus`, `input:where([type='radio']):focus`],
203202
class: ['.form-checkbox:focus', '.form-radio:focus'],
204203
styles: (theme: any) => ({
205204
'outline': '2px solid transparent',
@@ -214,7 +213,7 @@ export function buildRules(): FormsRule[] {
214213
}),
215214
},
216215
{
217-
base: [`[type='checkbox']:checked`, `[type='radio']:checked`],
216+
base: [`input:where([type='checkbox']):checked`, `input:where([type='radio']):checked`],
218217
class: ['.form-checkbox:checked', '.form-radio:checked'],
219218
styles: {
220219
'border-color': `transparent`,
@@ -225,7 +224,7 @@ export function buildRules(): FormsRule[] {
225224
},
226225
},
227226
{
228-
base: [`[type='checkbox']:checked`],
227+
base: [`input:where([type='checkbox']):checked`],
229228
class: ['.form-checkbox:checked'],
230229
styles: {
231230
'background-image': `url("${svgCheckboxChecked}")`,
@@ -236,7 +235,7 @@ export function buildRules(): FormsRule[] {
236235
},
237236
},
238237
{
239-
base: [`[type='radio']:checked`],
238+
base: [`input:where([type='radio']):checked`],
240239
class: ['.form-radio:checked'],
241240
styles: {
242241
'background-image': `url("${svgRadioChecked}")`,
@@ -248,10 +247,10 @@ export function buildRules(): FormsRule[] {
248247
},
249248
{
250249
base: [
251-
`[type='checkbox']:checked:hover`,
252-
`[type='checkbox']:checked:focus`,
253-
`[type='radio']:checked:hover`,
254-
`[type='radio']:checked:focus`,
250+
`input:where([type='checkbox']):checked:hover`,
251+
`input:where([type='checkbox']):checked:focus`,
252+
`input:where([type='radio']):checked:hover`,
253+
`input:where([type='radio']):checked:focus`,
255254
],
256255
class: [
257256
'.form-checkbox:checked:hover',
@@ -265,7 +264,7 @@ export function buildRules(): FormsRule[] {
265264
},
266265
},
267266
{
268-
base: [`[type='checkbox']:indeterminate`],
267+
base: [`input:where([type='checkbox']):indeterminate`],
269268
class: ['.form-checkbox:indeterminate'],
270269
styles: {
271270
'background-image': `url("${svgCheckboxIndeterminate}")`,
@@ -290,7 +289,7 @@ export function buildRules(): FormsRule[] {
290289
},
291290
},
292291
{
293-
base: [`[type='file']`],
292+
base: [`input:where([type='file'])`],
294293
class: null,
295294
styles: {
296295
'background': 'unset',
@@ -303,7 +302,7 @@ export function buildRules(): FormsRule[] {
303302
},
304303
},
305304
{
306-
base: [`[type='file']:focus`],
305+
base: [`input:where([type='file']):focus`],
307306
class: null,
308307
styles: {
309308
outline: `1px solid ButtonText , 1px auto -webkit-focus-ring-color`,

‎tests/__snapshots__/plugin.spec.ts.cjs‎

Lines changed: 46 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -105,22 +105,21 @@ exports[`Plugin > Generate correct preflights with base strategy 1`] = `"/* laye
105105
--un-backdrop-saturate: ;
106106
--un-backdrop-sepia: ;
107107
}
108-
[type=\\"text\\"],
108+
input:where([type=\\"text\\"]),
109109
input:where(:not([type])),
110-
[type=\\"email\\"],
111-
[type=\\"url\\"],
112-
[type=\\"password\\"],
113-
[type=\\"number\\"],
114-
[type=\\"date\\"],
115-
[type=\\"datetime-local\\"],
116-
[type=\\"month\\"],
117-
[type=\\"search\\"],
118-
[type=\\"tel\\"],
119-
[type=\\"time\\"],
120-
[type=\\"week\\"],
121-
[multiple],
122-
textarea,
123-
select {
110+
input:where([type=\\"email\\"]),
111+
input:where([type=\\"url\\"]),
112+
input:where([type=\\"password\\"]),
113+
input:where([type=\\"number\\"]),
114+
input:where([type=\\"date\\"]),
115+
input:where([type=\\"datetime-local\\"]),
116+
input:where([type=\\"month\\"]),
117+
input:where([type=\\"search\\"]),
118+
input:where([type=\\"tel\\"]),
119+
input:where([type=\\"time\\"]),
120+
input:where([type=\\"week\\"]),
121+
select,
122+
textarea {
124123
appearance: none;
125124
background-color: #fff;
126125
border-color: #6b7280;
@@ -134,22 +133,21 @@ select {
134133
line-height: 1.5rem;
135134
--un-shadow: 0 0 #0000;
136135
}
137-
[type=\\"text\\"]:focus,
136+
input:where([type=\\"text\\"]):focus,
138137
input:where(:not([type])):focus,
139-
[type=\\"email\\"]:focus,
140-
[type=\\"url\\"]:focus,
141-
[type=\\"password\\"]:focus,
142-
[type=\\"number\\"]:focus,
143-
[type=\\"date\\"]:focus,
144-
[type=\\"datetime-local\\"]:focus,
145-
[type=\\"month\\"]:focus,
146-
[type=\\"search\\"]:focus,
147-
[type=\\"tel\\"]:focus,
148-
[type=\\"time\\"]:focus,
149-
[type=\\"week\\"]:focus,
150-
[multiple]:focus,
151-
textarea:focus,
152-
select:focus {
138+
input:where([type=\\"email\\"]):focus,
139+
input:where([type=\\"url\\"]):focus,
140+
input:where([type=\\"password\\"]):focus,
141+
input:where([type=\\"number\\"]):focus,
142+
input:where([type=\\"date\\"]):focus,
143+
input:where([type=\\"datetime-local\\"]):focus,
144+
input:where([type=\\"month\\"]):focus,
145+
input:where([type=\\"search\\"]):focus,
146+
input:where([type=\\"tel\\"]):focus,
147+
input:where([type=\\"time\\"]):focus,
148+
input:where([type=\\"week\\"]):focus,
149+
select:focus,
150+
textarea:focus {
153151
outline: 2px solid transparent;
154152
outline-offset: 2px;
155153
--un-ring-inset: var(--un-empty, /*!*/ /*!*/);
@@ -201,16 +199,16 @@ select {
201199
padding-right: 2.5rem;
202200
print-color-adjust: exact;
203201
}
204-
[multiple] {
202+
input:where([multiple]) {
205203
background-image: initial;
206204
background-position: initial;
207205
background-repeat: unset;
208206
background-size: initial;
209207
padding-right: 0.75rem;
210208
print-color-adjust: unset;
211209
}
212-
[type=\\"checkbox\\"],
213-
[type=\\"radio\\"] {
210+
input:where([type=\\"checkbox\\"]),
211+
input:where([type=\\"radio\\"]) {
214212
appearance: none;
215213
padding: 0;
216214
print-color-adjust: exact;
@@ -227,14 +225,14 @@ select {
227225
border-width: 1px;
228226
--un-shadow: 0 0 #0000;
229227
}
230-
[type=\\"checkbox\\"] {
228+
input:where([type=\\"checkbox\\"]) {
231229
border-radius: 0;
232230
}
233-
[type=\\"radio\\"] {
231+
input:where([type=\\"radio\\"]) {
234232
border-radius: 100%;
235233
}
236-
[type=\\"checkbox\\"]:focus,
237-
[type=\\"radio\\"]:focus {
234+
input:where([type=\\"checkbox\\"]):focus,
235+
input:where([type=\\"radio\\"]):focus {
238236
outline: 2px solid transparent;
239237
outline-offset: 2px;
240238
--un-ring-inset: var(--un-empty, /*!*/ /*!*/);
@@ -248,28 +246,28 @@ select {
248246
box-shadow: var(--un-ring-offset-shadow), var(--un-ring-shadow),
249247
var(--un-shadow);
250248
}
251-
[type=\\"checkbox\\"]:checked,
252-
[type=\\"radio\\"]:checked {
249+
input:where([type=\\"checkbox\\"]):checked,
250+
input:where([type=\\"radio\\"]):checked {
253251
border-color: transparent;
254252
background-color: currentColor;
255253
background-size: 100% 100%;
256254
background-position: center;
257255
background-repeat: no-repeat;
258256
}
259-
[type=\\"checkbox\\"]:checked {
257+
input:where([type=\\"checkbox\\"]):checked {
260258
background-image: url(\\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e\\");
261259
}
262-
[type=\\"radio\\"]:checked {
260+
input:where([type=\\"radio\\"]):checked {
263261
background-image: url(\\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e\\");
264262
}
265-
[type=\\"checkbox\\"]:checked:hover,
266-
[type=\\"checkbox\\"]:checked:focus,
267-
[type=\\"radio\\"]:checked:hover,
268-
[type=\\"radio\\"]:checked:focus {
263+
input:where([type=\\"checkbox\\"]):checked:hover,
264+
input:where([type=\\"checkbox\\"]):checked:focus,
265+
input:where([type=\\"radio\\"]):checked:hover,
266+
input:where([type=\\"radio\\"]):checked:focus {
269267
border-color: transparent;
270268
background-color: currentColor;
271269
}
272-
[type=\\"checkbox\\"]:indeterminate {
270+
input:where([type=\\"checkbox\\"]):indeterminate {
273271
background-image: url(\\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e\\");
274272
border-color: transparent;
275273
background-color: currentColor;
@@ -282,7 +280,7 @@ select {
282280
border-color: transparent;
283281
background-color: currentColor;
284282
}
285-
[type=\\"file\\"] {
283+
input:where([type=\\"file\\"]) {
286284
background: unset;
287285
border-color: inherit;
288286
border-width: 0;
@@ -291,7 +289,7 @@ select {
291289
font-size: unset;
292290
line-height: inherit;
293291
}
294-
[type=\\"file\\"]:focus {
292+
input:where([type=\\"file\\"]):focus {
295293
outline: 1px solid ButtonText, 1px auto -webkit-focus-ring-color;
296294
}
297295
"`

0 commit comments

Comments
 (0)