summaryrefslogtreecommitdiff
path: root/node_modules/postcss-prefix-hover/README.md
diff options
context:
space:
mode:
Diffstat (limited to 'node_modules/postcss-prefix-hover/README.md')
-rw-r--r--node_modules/postcss-prefix-hover/README.md108
1 files changed, 108 insertions, 0 deletions
diff --git a/node_modules/postcss-prefix-hover/README.md b/node_modules/postcss-prefix-hover/README.md
new file mode 100644
index 00000000..20173b7e
--- /dev/null
+++ b/node_modules/postcss-prefix-hover/README.md
@@ -0,0 +1,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;
+}
+```