postcss-focus-visible - npm Package Compare versions

Comparing version 6.0.4 to 7.0.0

CHANGELOG.md

 # Changes to PostCSS Focus Visible
 
+### 7.0.0 (July 8, 2022)
+
+- Breaking: Changed generated classes so it prepends `.js-focus-visible` to the 
+generated class so CSS is applied when the polyfill is known to be running.
+
 ### 6.0.4 (February 5, 2022)
@@ -4,0 +9,0 @@

dist/index.d.ts

 import type { PluginCreator } from 'postcss';
-declare const creator: PluginCreator<{
+declare type pluginOptions = {
     preserve?: boolean;
     replaceWith?: string;
-}>;
+};
+declare const creator: PluginCreator<pluginOptions>;
 export default creator;

package.json

 {
-  "name": "postcss-focus-visible",
-  "version": "6.0.4",
-  "description": "Use the :focus-visible pseudo-selector in CSS",
-  "author": "Jonathan Neal <[e-mail]>",
-  "license": "CC0-1.0",
-  "homepage": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-focus-visible#readme",
-  "bugs": "https://github.com/csstools/postcss-plugins/issues",
-  "main": "dist/index.cjs",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
-  "exports": {
-    ".": {
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.cjs",
-      "default": "./dist/index.mjs"
-    }
-  },
-  "files": [
-    "CHANGELOG.md",
-    "LICENSE.md",
-    "README.md",
-    "dist"
-  ],
-  "scripts": {
-    "build": "rollup -c ../../rollup/default.js",
-    "clean": "node -e \"fs.rmSync('./dist', { recursive: true, force: true });\"",
-    "lint": "eslint ./src --ext .js --ext .ts --ext .mjs --no-error-on-unmatched-pattern",
-    "prepublishOnly": "npm run clean && npm run build && npm run test",
-    "stryker": "stryker run --logLevel error",
-    "test": "postcss-tape --ci && npm run test:exports",
-    "test:exports": "node ./test/_import.mjs && node ./test/_require.cjs"
-  },
-  "engines": {
-    "node": "^12 || ^14 || >=16"
-  },
-  "dependencies": {
-    "postcss-selector-parser": "^6.0.9"
-  },
-  "devDependencies": {
-    "postcss": "^8.3.6",
-    "postcss-tape": "^6.0.1"
-  },
-  "peerDependencies": {
-    "postcss": "^8.4"
-  },
-  "keywords": [
-    "postcss",
-    "css",
-    "postcss-plugin",
-    "focus",
-    "ring",
-    "css",
-    "pseudos",
-    "selectors",
-    "accessibility",
-    "a11y",
-    "keyboards",
-    "pointer",
-    "cursor",
-    "mice",
-    "mouse",
-    "pen",
-    "touch",
-    "trackpad",
-    "button",
-    "input",
-    "select",
-    "textarea",
-    "contenteditable",
-    "javascript",
-    "js"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/csstools/postcss-plugins.git",
-    "directory": "plugins/postcss-focus-visible"
-  },
-  "volta": {
-    "extends": "../../package.json"
-  }
+	"name": "postcss-focus-visible",
+	"description": "Use the :focus-visible pseudo-selector in CSS",
+	"version": "7.0.0",
+	"contributors": [
+		{
+			"name": "Antonio Laguna",
+			"email": "[e-mail]",
+			"url": "https://antonio.laguna.es"
+		},
+		{
+			"name": "Romain Menke",
+			"email": "[e-mail]"
+		}
+	],
+	"license": "CC0-1.0",
+	"funding": {
+		"type": "opencollective",
+		"url": "https://opencollective.com/csstools"
+	},
+	"engines": {
+		"node": "^12 || ^14 || >=16"
+	},
+	"main": "dist/index.cjs",
+	"module": "dist/index.mjs",
+	"types": "dist/index.d.ts",
+	"exports": {
+		".": {
+			"import": "./dist/index.mjs",
+			"require": "./dist/index.cjs",
+			"default": "./dist/index.mjs"
+		}
+	},
+	"files": [
+		"CHANGELOG.md",
+		"LICENSE.md",
+		"README.md",
+		"dist"
+	],
+	"dependencies": {
+		"postcss-selector-parser": "^6.0.10"
+	},
+	"peerDependencies": {
+		"postcss": "^8.2"
+	},
+	"devDependencies": {
+		"puppeteer": "^15.1.1"
+	},
+	"scripts": {
+		"build": "rollup -c ../../rollup/default.js",
+		"clean": "node -e \"fs.rmSync('./dist', { recursive: true, force: true });\"",
+		"docs": "node ../../.github/bin/generate-docs/install.mjs && node ../../.github/bin/generate-docs/readme.mjs",
+		"lint": "npm run lint:eslint && npm run lint:package-json",
+		"lint:eslint": "eslint ./src --ext .js --ext .ts --ext .mjs --no-error-on-unmatched-pattern",
+		"lint:package-json": "node ../../.github/bin/format-package-json.mjs",
+		"prepublishOnly": "npm run clean && npm run build && npm run test",
+		"test": "node .tape.mjs && npm run test:exports",
+		"test:browser": "node ./test/_browser.mjs",
+		"test:exports": "node ./test/_import.mjs && node ./test/_require.cjs",
+		"test:rewrite-expects": "REWRITE_EXPECTS=true node .tape.mjs"
+	},
+	"homepage": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-focus-visible#readme",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/csstools/postcss-plugins.git",
+		"directory": "plugins/postcss-focus-visible"
+	},
+	"bugs": "https://github.com/csstools/postcss-plugins/issues",
+	"keywords": [
+		"a11y",
+		"accessibility",
+		"button",
+		"contenteditable",
+		"css",
+		"css",
+		"cursor",
+		"focus",
+		"input",
+		"javascript",
+		"js",
+		"keyboards",
+		"mice",
+		"mouse",
+		"pen",
+		"pointer",
+		"postcss",
+		"postcss-plugin",
+		"pseudos",
+		"ring",
+		"select",
+		"selectors",
+		"textarea",
+		"touch",
+		"trackpad"
+	],
+	"csstools": {
+		"cssdbId": "focus-visible-pseudo-class",
+		"exportName": "postcssFocusVisible",
+		"humanReadableName": "PostCSS Focus Visible",
+		"specUrl": "https://www.w3.org/TR/selectors-4/#the-focus-visible-pseudo"
+	},
+	"volta": {
+		"extends": "../../package.json"
+	}
 }

README.md

 # 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-within-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]
+[<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].
+[PostCSS Focus Visible] lets you use the `:focus-visible` pseudo-class in CSS, 
+following the [Selectors Level 4 specification].
 
-It is the companion to the [focus-visible polyfill].
+It is the companion to the [focus-visible polyfill]. Note that this plugin
+alone **is not** sufficient to polyfill for `:focus-visible` and that you need
+the browser's polyfill as well.
 
@@ -16,4 +15,6 @@ [!['Can I use' table](https://caniuse.bitsofco.de/image/css-focus-visible.png)](https://caniuse.com/#feat=css-focus-visible)
 ```css
+
+```pcss
 :focus:not(:focus-visible) {
-  outline: none;
+	outline: none;
 }
@@ -23,8 +24,7 @@
 
-:focus:not(.focus-visible) {
-  outline: none;
+:focus:not(.focus-visible).js-focus-visible, .js-focus-visible :focus:not(.focus-visible) {
+	outline: none;
 }
-
 :focus:not(:focus-visible) {
-  outline: none;
+	outline: none;
 }
@@ -35,5 +35,3 @@ ```
 with a `.focus-visible` class selector, the same selector used by the
-[focus-visible polyfill]. This replacement selector can be changed using the
-`replaceWith` option. Also, the preservation of the original `:focus-visible`
-rule can be disabled using the `preserve` option.
+[focus-visible polyfill].
 
@@ -45,16 +43,8 @@ ## Usage
 ```bash
-npm install postcss-focus-visible --save-dev
+npm install postcss postcss-focus-visible --save-dev
 ```
 
-Use [PostCSS Focus Visible] to process your CSS:
+Use it as a [PostCSS] plugin:
 
 ```js
-const postcssFocusVisible = require('postcss-focus-visible');
-
-postcssFocusVisible.process(YOUR_CSS /*, processOptions, pluginOptions */);
-```
-
-Or use it as a [PostCSS] plugin:
-
-```js
 const postcss = require('postcss');
@@ -64,3 +54,3 @@ const postcssFocusVisible = require('postcss-focus-visible');
 postcss([
-  postcssFocusVisible(/* pluginOptions */)
+	postcssFocusVisible(/* pluginOptions */)
 ]).process(YOUR_CSS /*, processOptions */);
@@ -79,12 +69,12 @@ ```
 
-The `preserve` option defines whether the original selector should remain. By
-default, the original selector is preserved.
+The `preserve` option determines whether the original notation
+is preserved. By default, it is preserved.
 
 ```js
-focusVisible({ preserve: false });
+postcssFocusVisible({ preserve: false })
 ```
 
-```css
+```pcss
 :focus:not(:focus-visible) {
-  outline: none;
+	outline: none;
 }
@@ -94,4 +84,4 @@
 
-:focus:not(.focus-visible) {
-  outline: none;
+:focus:not(.focus-visible).js-focus-visible, .js-focus-visible :focus:not(.focus-visible) {
+	outline: none;
 }
@@ -106,8 +96,8 @@ ```
 ```js
-focusVisible({ replaceWith: '[focus-visible]' });
+postcssFocusVisible({ replaceWith: '[data-focus-visible-added]' })
 ```
 
-```css
+```pcss
 :focus:not(:focus-visible) {
-  outline: none;
+	outline: none;
 }
@@ -117,11 +107,9 @@
 
-:focus:not([focus-visible]) {
-  outline: none;
-}
-
-:focus:not(:focus-visible) {
-  outline: none;
-}
+<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.
+
 [cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test
@@ -132,8 +120,8 @@ [css-url]: https://cssdb.org/#focus-visible-pseudo-class
 
-[focus-visible polyfill]: https://github.com/WICG/focus-visible
 [Gulp PostCSS]: https://github.com/postcss/gulp-postcss
 [Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss
 [PostCSS]: https://github.com/postcss/postcss
+[PostCSS Loader]: https://github.com/postcss/postcss-loader
 [PostCSS Focus Visible]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-focus-visible
-[PostCSS Loader]: https://github.com/postcss/postcss-loader
 [Selectors Level 4 specification]: https://www.w3.org/TR/selectors-4/#the-focus-visible-pseudo
+[focus-visible polyfill]: https://github.com/WICG/focus-visible

No alert changes

Improved metrics

Total package byte prevSize

17731

increased by14.15%

Dev dependency count

1

decreased by-50%

Lines of code

19

increased by58.33%

Worsened metrics

Number of lines in readme file

118

decreased by-9.23%

Dependency changes

• Updatedpostcss-selector-parser@^6.0.10