blob: f6a980d611fe730b326d4f629fb156950c8e21e6 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
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
146
|
# PostCSS Focus Visible [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][PostCSS]
[<img alt="npm version" src="https://img.shields.io/npm/v/postcss-focus-visible.svg" height="20">][npm-url] [<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/focus-visible-pseudo-class.svg" height="20">][css-url] [<img alt="Build Status" src="https://github.com/csstools/postcss-plugins/workflows/test/badge.svg" height="20">][cli-url] [<img alt="Discord" src="https://shields.io/badge/Discord-5865F2?logo=discord&logoColor=white">][discord]
[PostCSS Focus Visible] lets you use the `:focus-visible` pseudo-class in CSS,
following the [Selectors Level 4 specification].
To use this feature you need to do two things :
- add the [PostCSS plugin](#usage) that transforms the selector into a class or attribute
- add the [focus-visible polyfill] that sets the attribute or class on elements in a browser
[](https://caniuse.com/#feat=css-focus-visible)
```css
```pcss
:focus:not(:focus-visible) {
outline: none;
}
/* becomes */
:focus:not(.focus-visible).js-focus-visible, .js-focus-visible :focus:not(.focus-visible) {
outline: none;
}
:focus:not(:focus-visible) {
outline: none;
}
```
[PostCSS Focus Visible] duplicates rules using the `:focus-visible` pseudo-class
with a `.focus-visible` class selector, the same selector used by the
[focus-visible polyfill].
## Usage
Add [PostCSS Focus Visible] to your project:
```bash
npm install postcss postcss-focus-visible --save-dev
```
Use it as a [PostCSS] plugin:
```js
const postcss = require('postcss');
const postcssFocusVisible = require('postcss-focus-visible');
postcss([
postcssFocusVisible(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);
```
[PostCSS Focus Visible] runs in all Node environments, with special
instructions for:
- [Node](INSTALL.md#node)
- [PostCSS CLI](INSTALL.md#postcss-cli)
- [PostCSS Load Config](INSTALL.md#postcss-load-config)
- [Webpack](INSTALL.md#webpack)
- [Next.js](INSTALL.md#nextjs)
- [Gulp](INSTALL.md#gulp)
- [Grunt](INSTALL.md#grunt)
## Options
### preserve
The `preserve` option determines whether the original notation
is preserved. By default, it is preserved.
```js
postcssFocusVisible({ preserve: false })
```
```pcss
:focus:not(:focus-visible) {
outline: none;
}
/* becomes */
:focus:not(.focus-visible).js-focus-visible, .js-focus-visible :focus:not(.focus-visible) {
outline: none;
}
```
### replaceWith
The `replaceWith` option defines the selector to replace `:focus-visible`. By
default, the replacement selector is `.focus-visible`.
```js
postcssFocusVisible({ replaceWith: '[data-focus-visible-added]' })
```
```pcss
:focus:not(:focus-visible) {
outline: none;
}
/* becomes */
<example.preserve-true.expect.css>
```
Note that if you want to keep using [focus-visible polyfill], the only
acceptable value would be `[data-focus-visible-added]`,
given that the polyfill does not support arbitrary values.
### disablePolyfillReadyClass
The `disablePolyfillReadyClass` option determines if selectors are prefixed with an indicator class.
This class is only set on your document if the polyfill loads and is needed.
By default this option is `false`.
Set this to `true` to prevent the class from being added.
```js
postcssFocusVisible({ disablePolyfillReadyClass: true })
```
```pcss
:focus:not(:focus-visible) {
outline: none;
}
/* becomes */
:focus:not(.focus-visible) {
outline: none;
}
:focus:not(:focus-visible) {
outline: none;
}
```
[cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test
[css-url]: https://cssdb.org/#focus-visible-pseudo-class
[discord]: https://discord.gg/bUadyRwkJS
[npm-url]: https://www.npmjs.com/package/postcss-focus-visible
[PostCSS]: https://github.com/postcss/postcss
[PostCSS Focus Visible]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-focus-visible
[Selectors Level 4 specification]: https://www.w3.org/TR/selectors-4/#the-focus-visible-pseudo
[focus-visible polyfill]: https://github.com/WICG/focus-visible
|
