From 2cdf0cb352ab6a2d0f8cb25120e4ebc92c5316e3 Mon Sep 17 00:00:00 2001 From: littleblack111 Date: Sun, 5 Nov 2023 17:23:37 +0800 Subject: removed autoprefix hover as it will have a high chance of making hover stopped working --- node_modules/postcss-prefix-hover/README.md | 108 ---------------------------- 1 file changed, 108 deletions(-) delete mode 100644 node_modules/postcss-prefix-hover/README.md (limited to 'node_modules/postcss-prefix-hover/README.md') diff --git a/node_modules/postcss-prefix-hover/README.md b/node_modules/postcss-prefix-hover/README.md deleted file mode 100644 index 20173b7e..00000000 --- a/node_modules/postcss-prefix-hover/README.md +++ /dev/null @@ -1,108 +0,0 @@ -# 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; -} -``` -- cgit v1.2.3