blob: 20173b7eda008b03938cdeeacfe676a9b6540773 (
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
|
# PostCSS Prefix Hover
[PostCSS] plugin for prefixing a selection containing :hover.
[PostCSS]: https://github.com/postcss/postcss
```css
/* Input example */
.foo a:hover {
color: black;
}
```
```css
/* Output example */
.using-mouse .foo a:hover {
color: black;
}
```
## Usage
**Step 1:** Install plugin:
```sh
npm install --save-dev postcss postcss-prefix-hover
```
**Step 2:** Check you project for existed PostCSS config: `postcss.config.js`
in the project root, `"postcss"` section in `package.json`
or `postcss` in bundle config.
If you do not use PostCSS, add it according to [official docs]
and set this plugin in settings.
**Step 3:** Add the plugin to plugins list:
```diff
module.exports = {
plugins: [
+ require('postcss-prefix-hover'),
require('autoprefixer')
]
}
```
[official docs]: https://github.com/postcss/postcss#usage
## Settings
| Option | Default | Description |
|-------------------------|----------------|-------------|
| **prefix** | ".using-mouse" | The selector to prefix |
| **useCssModulesGlobal** | false | Whether or not the prefix should be wrapped in ":global()" to support CSS Modules |
## Possible issues
Be aware that adding a prefix also adds higher specificity to the CSS selector. This might cause some issues.
**Input causing a possible issue:**
```css
a:hover {
color: black;
}
a.active {
color: red;
}
```
**Output** where `a:hover` is more specific than `a.active` causing browsers to prioritize hover over active.
```css
.using-mouse a:hover {
color: black;
}
a.active {
color: red;
}
```
**How to fix it:**
```css
a:hover {
color: black;
}
a.active,
a.active:hover {
color: red;
}
```
This will output the following:
```css
.using-mouse a:hover {
color: black;
}
a.active,
.using-mouse a.active:hover {
color: red;
}
```
|
