Skip to content

Commit 23c9a6f

Browse files
Antonio-LagunaAntonio-Laguna
authored
Updating Focus Within (#516)
* Starting focus-within plugin * Finishing focus within * Updating tests * Fixed tests after swapping preserve * Adding CHANGELOG * Updating tests * Generating docs * Better options for older browsers
1 parent 2350a29 commit 23c9a6f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

57 files changed

+2277
-408
lines changed

‎plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -252,6 +252,10 @@
252252
order: 26;
253253
}
254254

255+
.test-focus-visible-pseudo-class:focus-visible {
256+
order: 26;
257+
}
258+
255259
.test-double-position-gradients {
256260
background-image: conic-gradient(yellowgreen 40%, gold 0deg,gold 75%, #f06 0deg);
257261
background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg);

‎plugin-packs/postcss-preset-env/test/basic.autoprefixer.false.expect.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -252,6 +252,10 @@
252252
order: 26;
253253
}
254254

255+
.test-focus-visible-pseudo-class:focus-visible {
256+
order: 26;
257+
}
258+
255259
.test-double-position-gradients {
256260
background-image: conic-gradient(yellowgreen 40%, gold 0deg,gold 75%, #f06 0deg);
257261
background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg);

‎plugin-packs/postcss-preset-env/test/basic.ch38.expect.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -172,6 +172,10 @@
172172
order: 26;
173173
}
174174

175+
.test-focus-visible-pseudo-class:focus-visible {
176+
order: 26;
177+
}
178+
175179
.test-double-position-gradients {
176180
background-image: conic-gradient(yellowgreen 40%, gold 0deg,gold 75%, #f06 0deg);
177181
background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg);

‎plugin-packs/postcss-preset-env/test/basic.ch88-ff78-saf10.expect.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -171,6 +171,10 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te
171171
order: 26;
172172
}
173173

174+
.test-focus-visible-pseudo-class:focus-visible {
175+
order: 26;
176+
}
177+
174178
.test-double-position-gradients {
175179
background-image: conic-gradient(yellowgreen 40%, gold 0deg,gold 75%, #f06 0deg);
176180
background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg);

‎plugin-packs/postcss-preset-env/test/basic.ch88-ff78.expect.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -164,6 +164,10 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te
164164
order: 26;
165165
}
166166

167+
.test-focus-visible-pseudo-class:focus-visible {
168+
order: 26;
169+
}
170+
167171
.test-double-position-gradients {
168172
background-image: conic-gradient(yellowgreen 40%, gold 0deg,gold 75%, #f06 0deg);
169173
background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg);

‎plugin-packs/postcss-preset-env/test/basic.ch88-ff78.no-is-pseudo.expect.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -164,6 +164,10 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te
164164
order: 26;
165165
}
166166

167+
.test-focus-visible-pseudo-class:focus-visible {
168+
order: 26;
169+
}
170+
167171
.test-double-position-gradients {
168172
background-image: conic-gradient(yellowgreen 40%, gold 0deg,gold 75%, #f06 0deg);
169173
background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg);

‎plugin-packs/postcss-preset-env/test/basic.expect.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -275,6 +275,10 @@
275275
order: 26;
276276
}
277277

278+
.test-focus-visible-pseudo-class:focus-visible {
279+
order: 26;
280+
}
281+
278282
.test-double-position-gradients {
279283
background-image: conic-gradient(yellowgreen 40%, gold 0deg,gold 75%, #f06 0deg);
280284
background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg);

‎plugin-packs/postcss-preset-env/test/basic.ff49.expect.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -168,6 +168,10 @@
168168
order: 26;
169169
}
170170

171+
.test-focus-visible-pseudo-class:focus-visible {
172+
order: 26;
173+
}
174+
171175
.test-double-position-gradients {
172176
background-image: conic-gradient(yellowgreen 40%, gold 0deg,gold 75%, #f06 0deg);
173177
background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg);

‎plugin-packs/postcss-preset-env/test/basic.ff66.expect.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -156,6 +156,10 @@
156156
order: 26;
157157
}
158158

159+
.test-focus-visible-pseudo-class:focus-visible {
160+
order: 26;
161+
}
162+
159163
.test-double-position-gradients {
160164
background-image: conic-gradient(yellowgreen 40%, gold 0deg,gold 75%, #f06 0deg);
161165
background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg);

‎plugin-packs/postcss-preset-env/test/basic.ie10.expect.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -283,6 +283,11 @@
283283
order: 26;
284284
}
285285

286+
.test-focus-visible-pseudo-class:focus-visible {
287+
-ms-flex-order: 26;
288+
order: 26;
289+
}
290+
286291
.test-double-position-gradients {
287292
background-image: conic-gradient(yellowgreen 40%, gold 0deg,gold 75%, #f06 0deg);
288293
background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg);

‎plugin-packs/postcss-preset-env/test/basic.nesting.false.expect.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -273,6 +273,10 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te
273273
order: 26;
274274
}
275275

276+
.test-focus-visible-pseudo-class:focus-visible {
277+
order: 26;
278+
}
279+
276280
.test-double-position-gradients {
277281
background-image: conic-gradient(yellowgreen 40%, gold 0deg,gold 75%, #f06 0deg);
278282
background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg);

‎plugin-packs/postcss-preset-env/test/basic.op_mini.expect.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -259,6 +259,10 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te
259259
order: 26;
260260
}
261261

262+
.test-focus-visible-pseudo-class:focus-visible {
263+
order: 26;
264+
}
265+
262266
.test-double-position-gradients {
263267
background-image: conic-gradient(yellowgreen 40%, gold 0deg,gold 75%, #f06 0deg);
264268
background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg);

‎plugin-packs/postcss-preset-env/test/basic.safari15.expect.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -141,6 +141,10 @@
141141
order: 26;
142142
}
143143

144+
.test-focus-visible-pseudo-class:focus-visible {
145+
order: 26;
146+
}
147+
144148
.test-double-position-gradients {
145149
background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg);
146150
}

‎plugin-packs/postcss-preset-env/test/basic.stage0-ff49.expect.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -173,6 +173,10 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te
173173
order: 26;
174174
}
175175

176+
.test-focus-visible-pseudo-class:focus-visible {
177+
order: 26;
178+
}
179+
176180
.test-double-position-gradients {
177181
background-image: conic-gradient(yellowgreen 40%, gold 0deg,gold 75%, #f06 0deg);
178182
background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg);

‎plugin-packs/postcss-preset-env/test/basic.stage0-ff66.expect.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -161,6 +161,10 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te
161161
order: 26;
162162
}
163163

164+
.test-focus-visible-pseudo-class:focus-visible {
165+
order: 26;
166+
}
167+
164168
.test-double-position-gradients {
165169
background-image: conic-gradient(yellowgreen 40%, gold 0deg,gold 75%, #f06 0deg);
166170
background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg);

‎plugin-packs/postcss-preset-env/test/basic.stage0.expect.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -280,6 +280,10 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te
280280
order: 26;
281281
}
282282

283+
.test-focus-visible-pseudo-class:focus-visible {
284+
order: 26;
285+
}
286+
283287
.test-double-position-gradients {
284288
background-image: conic-gradient(yellowgreen 40%, gold 0deg,gold 75%, #f06 0deg);
285289
background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg);

‎plugin-packs/postcss-preset-env/test/client-side-polyfills.stage-1.expect.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
order: 2;
77
}
88

9-
[focus-within] {
9+
[focus-within].js-focus-within, .js-focus-within [focus-within] {
1010
order: 3;
1111
}
1212

‎plugin-packs/postcss-preset-env/test/client-side-polyfills.stage-2.expect.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
order: 2;
77
}
88

9-
[focus-within] {
9+
[focus-within].js-focus-within, .js-focus-within [focus-within] {
1010
order: 3;
1111
}
1212

‎plugin-packs/postcss-preset-env/test/disable-client-side-polyfills.disabled.expect.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ a:has(> img) {
2626
}
2727
}
2828

29-
.my-form-field[focus-within] label {
29+
.my-form-field[focus-within].js-focus-within label, .js-focus-within .my-form-field[focus-within] label {
3030
order: 4;
3131
}
3232

‎plugin-packs/postcss-preset-env/test/layers-basic.expect.css

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -453,6 +453,14 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n
453453
order: 26;
454454
}
455455

456+
.test-focus-visible-pseudo-class:focus-visible:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
457+
-webkit-box-ordinal-group: 27;
458+
-webkit-order: 26;
459+
-moz-box-ordinal-group: 27;
460+
-ms-flex-order: 26;
461+
order: 26;
462+
}
463+
456464
.test-double-position-gradients:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
457465
background-image: conic-gradient(yellowgreen 40%, gold 0deg,gold 75%, #f06 0deg);
458466
background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg);

‎plugins/css-blank-pseudo/src/browser.js

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -84,15 +84,18 @@ function observeValueOfHTMLElement(HTMLElement, handler) {
8484

8585
export default function cssBlankPseudoInit(opts) {
8686
// configuration
87-
const options = Object.assign(
88-
// Default options
89-
{
90-
force: false,
91-
replaceWith: '[blank]',
92-
},
93-
// Provided options
94-
opts,
95-
);
87+
const options = {
88+
force: false,
89+
replaceWith: '[blank]',
90+
};
91+
92+
if (typeof opts !== 'undefined' && 'force' in opts) {
93+
options.force = opts.force;
94+
}
95+
96+
if (typeof opts !== 'undefined' && 'replaceWith' in opts) {
97+
options.replaceWith = opts.replaceWith;
98+
}
9699

97100
if (!isValidReplacement(options.replaceWith)) {
98101
throw new Error(`${options.replaceWith} is not a valid replacement since it can't be applied to single elements.`);

‎plugins/postcss-focus-visible/README.md

Lines changed: 8 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,9 @@ the browser's polyfill as well.
2323
:focus:not(.focus-visible).js-focus-visible, .js-focus-visible :focus:not(.focus-visible) {
2424
outline: none;
2525
}
26+
:focus:not(:focus-visible) {
27+
outline: none;
28+
}
2629
```
2730

2831
[PostCSS Focus Visible] duplicates rules using the `:focus-visible` pseudo-class
@@ -59,10 +62,10 @@ instructions for:
5962
### preserve
6063

6164
The `preserve` option determines whether the original notation
62-
is preserved. By default, it is not preserved.
65+
is preserved. By default, it is preserved.
6366

6467
```js
65-
postcssFocusVisible({ preserve: true })
68+
postcssFocusVisible({ preserve: false })
6669
```
6770

6871
```pcss
@@ -72,13 +75,8 @@ postcssFocusVisible({ preserve: true })
7275
7376
/* becomes */
7477
75-
.foo {
76-
color: blue;
77-
color: red;
78-
}
79-
80-
.baz {
81-
color: green;
78+
:focus:not(.focus-visible).js-focus-visible, .js-focus-visible :focus:not(.focus-visible) {
79+
outline: none;
8280
}
8381
```
8482

@@ -98,14 +96,7 @@ postcssFocusVisible({ replaceWith: '[data-focus-visible-added]' })
9896
9997
/* becomes */
10098
101-
.foo {
102-
color: blue;
103-
color: red;
104-
}
105-
106-
.baz {
107-
color: green;
108-
}
99+
<example.preserve-true.expect.css>
109100
```
110101

111102
Note that if you want to keep using [focus-visible polyfill], the only

‎plugins/postcss-focus-visible/docs/README.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -48,18 +48,18 @@ with a `.focus-visible` class selector, the same selector used by the
4848
### preserve
4949

5050
The `preserve` option determines whether the original notation
51-
is preserved. By default, it is not preserved.
51+
is preserved. By default, it is preserved.
5252

5353
```js
54-
<exportName>({ preserve: true })
54+
<exportName>({ preserve: false })
5555
```
5656

5757
```pcss
5858
<example.css>
5959
6060
/* becomes */
6161
62-
<example.preserve-true.expect.css>
62+
<example.preserve-false.expect.css>
6363
```
6464

6565
### replaceWith

‎plugins/postcss-focus-visible/src/index.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const creator: PluginCreator<pluginOptions> = (opts?: pluginOptions) => {
1010
const options = Object.assign(
1111
// Default options
1212
{
13-
preserve: false,
13+
preserve: true,
1414
replaceWith: '.focus-visible',
1515
},
1616
// Provided options
@@ -22,12 +22,12 @@ const creator: PluginCreator<pluginOptions> = (opts?: pluginOptions) => {
2222
return {
2323
postcssPlugin: 'postcss-focus-visible',
2424
Rule(rule, { result }) {
25-
if (!rule.selector.includes(PSEUDO)) {
25+
if (!rule.selector.toLowerCase().includes(PSEUDO)) {
2626
return;
2727
}
2828

2929
const selectors = rule.selectors.flatMap((selector) => {
30-
if (!selector.includes(PSEUDO)) {
30+
if (!selector.toLowerCase().includes(PSEUDO)) {
3131
return [selector];
3232
}
3333

@@ -46,7 +46,7 @@ const creator: PluginCreator<pluginOptions> = (opts?: pluginOptions) => {
4646

4747
let containsPseudo = false;
4848
selectorAST.walkPseudos((pseudo) => {
49-
if (pseudo.value !== PSEUDO) {
49+
if (pseudo.value.toLowerCase() !== PSEUDO) {
5050
return;
5151
}
5252

‎plugins/postcss-focus-visible/test/basic.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,3 +77,7 @@ html :not(:focus-visible) {
7777
.foo > :focus-visible {
7878
order: 10.5;
7979
}
80+
81+
:FocuS-VisiblE {
82+
order: 11;
83+
}

0 commit comments

Comments
 (0)