From d1d9f00b1bd660842addf5e6b1d1b64c852a9eea Mon Sep 17 00:00:00 2001 From: littleblack111 Date: Sun, 5 Nov 2023 17:16:09 +0800 Subject: added hover prefixer --- node_modules/postcss-prefix-hover/LICENSE | 20 +++++ node_modules/postcss-prefix-hover/README.md | 108 +++++++++++++++++++++++++ node_modules/postcss-prefix-hover/index.js | 25 ++++++ node_modules/postcss-prefix-hover/package.json | 23 ++++++ 4 files changed, 176 insertions(+) create mode 100644 node_modules/postcss-prefix-hover/LICENSE create mode 100644 node_modules/postcss-prefix-hover/README.md create mode 100644 node_modules/postcss-prefix-hover/index.js create mode 100644 node_modules/postcss-prefix-hover/package.json (limited to 'node_modules/postcss-prefix-hover') diff --git a/node_modules/postcss-prefix-hover/LICENSE b/node_modules/postcss-prefix-hover/LICENSE new file mode 100644 index 00000000..e5bde175 --- /dev/null +++ b/node_modules/postcss-prefix-hover/LICENSE @@ -0,0 +1,20 @@ +The MIT License (MIT) + +Copyright 2021 Lars Munkholm + +Permission is hereby granted, free of charge, to any person obtaining a copy of +this software and associated documentation files (the "Software"), to deal in +the Software without restriction, including without limitation the rights to +use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of +the Software, and to permit persons to whom the Software is furnished to do so, +subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS +FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR +COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER +IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN +CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 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; +} +``` diff --git a/node_modules/postcss-prefix-hover/index.js b/node_modules/postcss-prefix-hover/index.js new file mode 100644 index 00000000..4d28a34b --- /dev/null +++ b/node_modules/postcss-prefix-hover/index.js @@ -0,0 +1,25 @@ +module.exports = (opts) => { + const useCssModulesGlobal = opts && typeof opts.useCssModulesGlobal !== "undefined" ? opts.useCssModulesGlobal : false; + const prefix = opts && typeof opts.prefix !== "undefined" ? opts.prefix : ".using-mouse"; + + function setPrefix (selector) { + const thePrefix = (useCssModulesGlobal ? ":global(" : "") + prefix + (useCssModulesGlobal ? ")" : ""); + return selector + .split(",") + .map((item) => item.indexOf(":hover") > -1 ? item.replace(/^(\s*)/, "$1" + thePrefix + " ") : item) + .join(","); + } + + return { + postcssPlugin: 'postcss-prefix-hover', + Root (root) { + root.walkRules((rule) => { + if (rule.selector.indexOf(":hover") > -1) { + rule.selector = setPrefix(rule.selector); + } + }); + } + } +} + +module.exports.postcss = true; diff --git a/node_modules/postcss-prefix-hover/package.json b/node_modules/postcss-prefix-hover/package.json new file mode 100644 index 00000000..62f82cf4 --- /dev/null +++ b/node_modules/postcss-prefix-hover/package.json @@ -0,0 +1,23 @@ +{ + "name": "postcss-prefix-hover", + "version": "1.0.3", + "description": "PostCSS plugin for prefixing a selection containing :hover", + "keywords": [ + "postcss", + "css", + "postcss-plugin", + "hover" + ], + "author": "Lars Munkholm ", + "license": "MIT", + "repository": "https://github.com/larsmunkholm/postcss-prefix-hover.git", + "engines": { + "node": ">=10.0.0" + }, + "peerDependencies": { + "postcss": "^8.2.8" + }, + "scripts": { + "publish": "npx clean-publish" + } +} -- cgit v1.2.3