Skip to content

Commit 0878904

Browse files
Antonio-Lagunaromainmenke
Antonio-Laguna
and
romainmenke
authored
Updating Focus Visible (#513)
* Updating Focus Visible * Returning CHANGELOG * Updating tests * focus-visible : code review (#514) * Updating CHANGELOG * focus-visible : code review (#514) Co-authored-by: Romain Menke <[email protected]>
1 parent 32b84c7 commit 0878904

Some content is hidden

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

44 files changed

+951
-506
lines changed

‎package-lock.json

+5-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

+1-5
Original file line numberDiff line numberDiff line change
@@ -248,11 +248,7 @@
248248
word-wrap: break-word;
249249
}
250250

251-
.test-focus-visible-pseudo-class.focus-visible {
252-
order: 26;
253-
}
254-
255-
.test-focus-visible-pseudo-class:focus-visible {
251+
.test-focus-visible-pseudo-class.focus-visible.js-focus-visible, .js-focus-visible .test-focus-visible-pseudo-class.focus-visible {
256252
order: 26;
257253
}
258254

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

+1-5
Original file line numberDiff line numberDiff line change
@@ -248,11 +248,7 @@
248248
word-wrap: break-word;
249249
}
250250

251-
.test-focus-visible-pseudo-class.focus-visible {
252-
order: 26;
253-
}
254-
255-
.test-focus-visible-pseudo-class:focus-visible {
251+
.test-focus-visible-pseudo-class.focus-visible.js-focus-visible, .js-focus-visible .test-focus-visible-pseudo-class.focus-visible {
256252
order: 26;
257253
}
258254

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

+1-5
Original file line numberDiff line numberDiff line change
@@ -168,11 +168,7 @@
168168
overflow-wrap: break-word;
169169
}
170170

171-
.test-focus-visible-pseudo-class.focus-visible {
172-
order: 26;
173-
}
174-
175-
.test-focus-visible-pseudo-class:focus-visible {
171+
.test-focus-visible-pseudo-class.focus-visible.js-focus-visible, .js-focus-visible .test-focus-visible-pseudo-class.focus-visible {
176172
order: 26;
177173
}
178174

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

+1-5
Original file line numberDiff line numberDiff line change
@@ -167,11 +167,7 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te
167167
overflow-wrap: break-word;
168168
}
169169

170-
.test-focus-visible-pseudo-class.focus-visible {
171-
order: 26;
172-
}
173-
174-
.test-focus-visible-pseudo-class:focus-visible {
170+
.test-focus-visible-pseudo-class.focus-visible.js-focus-visible, .js-focus-visible .test-focus-visible-pseudo-class.focus-visible {
175171
order: 26;
176172
}
177173

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

+1-5
Original file line numberDiff line numberDiff line change
@@ -160,11 +160,7 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te
160160
overflow-wrap: break-word;
161161
}
162162

163-
.test-focus-visible-pseudo-class.focus-visible {
164-
order: 26;
165-
}
166-
167-
.test-focus-visible-pseudo-class:focus-visible {
163+
.test-focus-visible-pseudo-class.focus-visible.js-focus-visible, .js-focus-visible .test-focus-visible-pseudo-class.focus-visible {
168164
order: 26;
169165
}
170166

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

+1-5
Original file line numberDiff line numberDiff line change
@@ -160,11 +160,7 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te
160160
overflow-wrap: break-word;
161161
}
162162

163-
.test-focus-visible-pseudo-class.focus-visible {
164-
order: 26;
165-
}
166-
167-
.test-focus-visible-pseudo-class:focus-visible {
163+
.test-focus-visible-pseudo-class.focus-visible.js-focus-visible, .js-focus-visible .test-focus-visible-pseudo-class.focus-visible {
168164
order: 26;
169165
}
170166

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

+1-5
Original file line numberDiff line numberDiff line change
@@ -271,11 +271,7 @@
271271
word-wrap: break-word;
272272
}
273273

274-
.test-focus-visible-pseudo-class.focus-visible {
275-
order: 26;
276-
}
277-
278-
.test-focus-visible-pseudo-class:focus-visible {
274+
.test-focus-visible-pseudo-class.focus-visible.js-focus-visible, .js-focus-visible .test-focus-visible-pseudo-class.focus-visible {
279275
order: 26;
280276
}
281277

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

+1-5
Original file line numberDiff line numberDiff line change
@@ -164,11 +164,7 @@
164164
overflow-wrap: break-word;
165165
}
166166

167-
.test-focus-visible-pseudo-class.focus-visible {
168-
order: 26;
169-
}
170-
171-
.test-focus-visible-pseudo-class:focus-visible {
167+
.test-focus-visible-pseudo-class.focus-visible.js-focus-visible, .js-focus-visible .test-focus-visible-pseudo-class.focus-visible {
172168
order: 26;
173169
}
174170

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

+1-5
Original file line numberDiff line numberDiff line change
@@ -152,11 +152,7 @@
152152
overflow-wrap: break-word;
153153
}
154154

155-
.test-focus-visible-pseudo-class.focus-visible {
156-
order: 26;
157-
}
158-
159-
.test-focus-visible-pseudo-class:focus-visible {
155+
.test-focus-visible-pseudo-class.focus-visible.js-focus-visible, .js-focus-visible .test-focus-visible-pseudo-class.focus-visible {
160156
order: 26;
161157
}
162158

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

+1-6
Original file line numberDiff line numberDiff line change
@@ -278,12 +278,7 @@
278278
word-wrap: break-word;
279279
}
280280

281-
.test-focus-visible-pseudo-class.focus-visible {
282-
-ms-flex-order: 26;
283-
order: 26;
284-
}
285-
286-
.test-focus-visible-pseudo-class:focus-visible {
281+
.test-focus-visible-pseudo-class.focus-visible.js-focus-visible, .js-focus-visible .test-focus-visible-pseudo-class.focus-visible {
287282
-ms-flex-order: 26;
288283
order: 26;
289284
}

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

+1-5
Original file line numberDiff line numberDiff line change
@@ -269,11 +269,7 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te
269269
word-wrap: break-word;
270270
}
271271

272-
.test-focus-visible-pseudo-class.focus-visible {
273-
order: 26;
274-
}
275-
276-
.test-focus-visible-pseudo-class:focus-visible {
272+
.test-focus-visible-pseudo-class.focus-visible.js-focus-visible, .js-focus-visible .test-focus-visible-pseudo-class.focus-visible {
277273
order: 26;
278274
}
279275

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

+1-5
Original file line numberDiff line numberDiff line change
@@ -255,11 +255,7 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te
255255
word-wrap: break-word;
256256
}
257257

258-
.test-focus-visible-pseudo-class.focus-visible {
259-
order: 26;
260-
}
261-
262-
.test-focus-visible-pseudo-class:focus-visible {
258+
.test-focus-visible-pseudo-class.focus-visible.js-focus-visible, .js-focus-visible .test-focus-visible-pseudo-class.focus-visible {
263259
order: 26;
264260
}
265261

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -495,7 +495,7 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te
495495
word-wrap: break-word;
496496
}
497497

498-
.test-focus-visible-pseudo-class.focus-visible {
498+
.test-focus-visible-pseudo-class.focus-visible.js-focus-visible, .js-focus-visible .test-focus-visible-pseudo-class.focus-visible {
499499
-webkit-box-ordinal-group: 27;
500500
-webkit-order: 26;
501501
-moz-box-ordinal-group: 27;

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

+1-5
Original file line numberDiff line numberDiff line change
@@ -137,11 +137,7 @@
137137
overflow-wrap: break-word;
138138
}
139139

140-
.test-focus-visible-pseudo-class.focus-visible {
141-
order: 26;
142-
}
143-
144-
.test-focus-visible-pseudo-class:focus-visible {
140+
.test-focus-visible-pseudo-class.focus-visible.js-focus-visible, .js-focus-visible .test-focus-visible-pseudo-class.focus-visible {
145141
order: 26;
146142
}
147143

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

+1-5
Original file line numberDiff line numberDiff line change
@@ -169,11 +169,7 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te
169169
overflow-wrap: break-word;
170170
}
171171

172-
.test-focus-visible-pseudo-class.focus-visible {
173-
order: 26;
174-
}
175-
176-
.test-focus-visible-pseudo-class:focus-visible {
172+
.test-focus-visible-pseudo-class.focus-visible.js-focus-visible, .js-focus-visible .test-focus-visible-pseudo-class.focus-visible {
177173
order: 26;
178174
}
179175

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

+1-5
Original file line numberDiff line numberDiff line change
@@ -157,11 +157,7 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te
157157
overflow-wrap: break-word;
158158
}
159159

160-
.test-focus-visible-pseudo-class.focus-visible {
161-
order: 26;
162-
}
163-
164-
.test-focus-visible-pseudo-class:focus-visible {
160+
.test-focus-visible-pseudo-class.focus-visible.js-focus-visible, .js-focus-visible .test-focus-visible-pseudo-class.focus-visible {
165161
order: 26;
166162
}
167163

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

+1-5
Original file line numberDiff line numberDiff line change
@@ -276,11 +276,7 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te
276276
word-wrap: break-word;
277277
}
278278

279-
.test-focus-visible-pseudo-class.focus-visible {
280-
order: 26;
281-
}
282-
283-
.test-focus-visible-pseudo-class:focus-visible {
279+
.test-focus-visible-pseudo-class.focus-visible.js-focus-visible, .js-focus-visible .test-focus-visible-pseudo-class.focus-visible {
284280
order: 26;
285281
}
286282

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
order: 1;
33
}
44

5-
.focus-visible {
5+
.focus-visible.js-focus-visible, .js-focus-visible .focus-visible {
66
order: 2;
77
}
88

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
order: 1;
33
}
44

5-
.focus-visible {
5+
.focus-visible.js-focus-visible, .js-focus-visible .focus-visible {
66
order: 2;
77
}
88

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

+1-9
Original file line numberDiff line numberDiff line change
@@ -445,15 +445,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n
445445
word-wrap: break-word;
446446
}
447447

448-
.test-focus-visible-pseudo-class.focus-visible:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
449-
-webkit-box-ordinal-group: 27;
450-
-webkit-order: 26;
451-
-moz-box-ordinal-group: 27;
452-
-ms-flex-order: 26;
453-
order: 26;
454-
}
455-
456-
.test-focus-visible-pseudo-class:focus-visible:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
448+
.test-focus-visible-pseudo-class.focus-visible.js-focus-visible:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#), .js-focus-visible:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .test-focus-visible-pseudo-class.focus-visible {
457449
-webkit-box-ordinal-group: 27;
458450
-webkit-order: 26;
459451
-moz-box-ordinal-group: 27;

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -506,7 +506,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n
506506
word-wrap: break-word;
507507
}
508508

509-
.test-focus-visible-pseudo-class.focus-visible:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
509+
.test-focus-visible-pseudo-class.focus-visible.js-focus-visible:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#), .js-focus-visible:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .test-focus-visible-pseudo-class.focus-visible {
510510
-webkit-box-ordinal-group: 27;
511511
-webkit-order: 26;
512512
-moz-box-ordinal-group: 27;

‎plugins/css-blank-pseudo/src/index.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import type { PluginCreator } from 'postcss';
22
import parser from 'postcss-selector-parser';
33
import isValidReplacement from './is-valid-replacement.mjs';
44

5-
type pluginOptions = { color?: string, preserve?: boolean };
5+
type pluginOptions = { preserve?: boolean, replaceWith?: string };
66

77
const creator: PluginCreator<pluginOptions> = (opts?: pluginOptions) => {
88
const options = Object.assign(

‎plugins/postcss-focus-visible/.gitignore

+1-7
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,6 @@
11
node_modules
2-
dist
32
package-lock.json
43
yarn.lock
5-
*.log*
64
*.result.css
75
*.result.css.map
8-
!.editorconfig
9-
!.gitignore
10-
!.rollup.js
11-
!.tape.js
12-
!.travis.yml
6+
dist/*

‎plugins/postcss-focus-visible/.tape.mjs

+19-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ postcssTape(plugin)({
88
'basic:replacewith': {
99
message: 'supports { replaceWith: "[focus-visible]" } usage',
1010
options: {
11-
replaceWith: '[focus-visible]'
11+
replaceWith: '[data-focus-visible-added]'
1212
}
1313
},
1414
'basic:preserve': {
@@ -24,4 +24,22 @@ postcssTape(plugin)({
2424
preserve: false
2525
}
2626
},
27+
'browser': {
28+
message: 'css for browser tests',
29+
},
30+
'examples/example': {
31+
message: 'minimal example',
32+
},
33+
'examples/example:preserve-false': {
34+
message: 'minimal example',
35+
options: {
36+
preserve: false
37+
}
38+
},
39+
'examples/example:replacewith': {
40+
message: 'minimal example',
41+
options: {
42+
replaceWith: '[focus-visible]'
43+
}
44+
},
2745
});

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

+5
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
# Changes to PostCSS Focus Visible
22

3+
### Unreleased (major)
4+
5+
- Breaking: Changed generated classes so it prepends `.js-focus-visible` to the
6+
generated class so CSS is applied when the polyfill is known to be running.
7+
38
### 6.0.4 (February 5, 2022)
49

510
- Improved `es module` and `commonjs` compatibility

0 commit comments

Comments
 (0)