postcss-focus-visible - npm Package Compare versions

Comparing version 7.0.0 to 7.1.0

CHANGELOG.md

 # Changes to PostCSS Focus Visible
 
+### 7.1.0 (July 30, 2022)
+
+- Added: `disablePolyfillReadyClass` plugin option to prevent `.js-focus-visible` from being added.
+
 ### 7.0.0 (July 8, 2022)
@@ -4,0 +8,0 @@

dist/index.d.ts

@@ -5,4 +5,5 @@ import type { PluginCreator } from 'postcss';
     replaceWith?: string;
+    disablePolyfillReadyClass?: boolean;
 };
 declare const creator: PluginCreator<pluginOptions>;
 export default creator;

package.json

 {
 	"name": "postcss-focus-visible",
 	"description": "Use the :focus-visible pseudo-selector in CSS",
-	"version": "7.0.0",
+	"version": "7.1.0",
 	"contributors": [
@@ -47,3 +47,3 @@ {
 	"devDependencies": {
-		"puppeteer": "^15.1.1"
+		"puppeteer": "^15.5.0"
 	},
@@ -50,0 +50,0 @@ "scripts": {

README.md

@@ -106,2 +106,29 @@ # PostCSS Focus Visible [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][postcss]
 
+### disablePolyfillReadyClass
+
+The `disablePolyfillReadyClass` option determines if selectors are prefixed with an indicator class.
+This class is only set on your document if the polyfill loads and is needed.
+
+By default this option is `false`.
+Set this to `true` to prevent the class from being added.
+
+```js
+postcssFocusVisible({ disablePolyfillReadyClass: true })
+```
+
+```pcss
+:focus:not(:focus-visible) {
+	outline: none;
+}
+
+/* becomes */
+
+:focus:not(.focus-visible), :focus:not(.focus-visible) {
+	outline: none;
+}
+:focus:not(:focus-visible) {
+	outline: none;
+}
+```
+
 [cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test
@@ -108,0 +135,0 @@ [css-url]: https://cssdb.org/#focus-visible-pseudo-class

No alert changes

Improved metrics

Total package byte prevSize

18592

increased by4.86%

Lines of code

20

increased by5.26%

Number of lines in readme file

145

increased by22.88%

No dependency changes