postcss-focus-within - npm Package Compare versions

Comparing version 5.0.4 to 6.0.0

CHANGELOG.md

 # Changes to PostCSS Focus Within
 
+### 6.0.0 (July 8, 2022)
+
+- Breaking: Changed generated classes so it prepends `.js-focus-within` to the
+generated class so CSS is applied when the polyfill is known to be running.
+- Added: Now bundling browser polyfill.
+
 ### 5.0.4 (February 5, 2022)
@@ -4,0 +10,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-within",
-  "version": "5.0.4",
-  "description": "Use the :focus-within 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-within#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",
-    "within",
-    "polyfill",
-    "pseudos",
-    "selectors",
-    "accessibility",
-    "a11y",
-    "descendants",
-    "ancestors"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/csstools/postcss-plugins.git",
-    "directory": "plugins/postcss-focus-within"
-  },
-  "volta": {
-    "extends": "../../package.json"
-  }
+	"name": "postcss-focus-within",
+	"description": "Use the :focus-within pseudo-selector in CSS",
+	"version": "6.0.0",
+	"contributors": [
+		{
+			"name": "Antonio Laguna",
+			"email": "[e-mail]",
+			"url": "https://antonio.laguna.es"
+		},
+		{
+			"name": "Romain Menke",
+			"email": "[e-mail]"
+		},
+		{
+			"name": "Jonathan Neal",
+			"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"
+		},
+		"./browser": {
+			"import": "./dist/browser.mjs",
+			"require": "./dist/browser.cjs",
+			"default": "./dist/browser.mjs"
+		},
+		"./browser-global": {
+			"default": "./dist/browser-global.js"
+		}
+	},
+	"files": [
+		"CHANGELOG.md",
+		"LICENSE.md",
+		"README.md",
+		"dist"
+	],
+	"dependencies": {
+		"postcss-selector-parser": "^6.0.10"
+	},
+	"peerDependencies": {
+		"postcss": "^8.2"
+	},
+	"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-within#readme",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/csstools/postcss-plugins.git",
+		"directory": "plugins/postcss-focus-within"
+	},
+	"bugs": "https://github.com/csstools/postcss-plugins/issues",
+	"keywords": [
+		"a11y",
+		"accessibility",
+		"ancestors",
+		"css",
+		"descendants",
+		"focus",
+		"polyfill",
+		"postcss",
+		"postcss-plugin",
+		"pseudos",
+		"selectors",
+		"within"
+	],
+	"csstools": {
+		"cssdbId": "focus-within-pseudo-class",
+		"exportName": "postcssFocusWithin",
+		"humanReadableName": "PostCSS Focus Within",
+		"specUrl": "https://www.w3.org/TR/selectors-4/#the-focus-within-pseudo"
+	},
+	"volta": {
+		"extends": "../../package.json"
+	}
 }

README.md

 # PostCSS Focus Within [<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-within.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/tree/main/postcss-focus-within/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-within.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]
 
-[PostCSS Focus Within] lets you use the `:focus-within` pseudo-class in CSS,
+[PostCSS Focus Within] lets you use the `:focus-within` pseudo-class in CSS, 
 following the [Selectors Level 4 specification].
 
-It is the companion to the [focus-within polyfill].
-
-[!['Can I use' table](https://caniuse.bitsofco.de/image/css-focus-within.png)](https://caniuse.com/#feat=css-focus-within)
-
-```css
+```pcss
 .my-form-field:focus-within label {
-  background-color: yellow;
+	background-color: yellow;
 }
@@ -22,8 +15,7 @@
 
-.my-form-field[focus-within] label {
-  background-color: yellow;
+.my-form-field[focus-within].js-focus-within label, .js-focus-within .my-form-field[focus-within] label {
+	background-color: yellow;
 }
-
 .my-form-field:focus-within label {
-  background-color: yellow;
+	background-color: yellow;
 }
@@ -34,3 +26,3 @@ ```
 with a `[focus-within]` attribute selector, the same selector used by the
-[focus-within polyfill]. This replacement selector can be changed using the
+focus-within polyfill. This replacement selector can be changed using the
 `replaceWith` option. Also, the preservation of the original `:focus-within`
@@ -47,13 +39,5 @@ rule can be disabled using the `preserve` option.
 
-Use [PostCSS Focus Within] to process your CSS:
+Use it as a [PostCSS] plugin:
 
 ```js
-const postcssFocusWithin = require('postcss-focus-within');
-
-postcssFocusWithin.process(YOUR_CSS /*, processOptions, pluginOptions */);
-```
-
-Or use it as a [PostCSS] plugin:
-
-```js
 const postcss = require('postcss');
@@ -63,3 +47,3 @@ const postcssFocusWithin = require('postcss-focus-within');
 postcss([
-  postcssFocusWithin(/* pluginOptions */)
+	postcssFocusWithin(/* pluginOptions */)
 ]).process(YOUR_CSS /*, processOptions */);
@@ -78,12 +62,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
-focusWithin({ preserve: false });
+postcssFocusWithin({ preserve: false })
 ```
 
-```css
+```pcss
 .my-form-field:focus-within label {
-  background-color: yellow;
+	background-color: yellow;
 }
@@ -93,4 +77,4 @@
 
-.my-form-field[focus-within] label {
-  background-color: yellow;
+.my-form-field[focus-within].js-focus-within label, .js-focus-within .my-form-field[focus-within] label {
+	background-color: yellow;
 }
@@ -103,10 +87,13 @@ ```
 default, the replacement selector is `[focus-within]`.
+Please note that using a class, leverages `classList` under the hood which
+might  not be supported on some old browsers such as IE9, so you may need
+to polyfill `classList` in those cases.
 
 ```js
-focusWithin({ replaceWith: '.focus-within' });
+postcssFocusWithin({ replaceWith: '.focus-within' });
 ```
 
-```css
+```pcss
 .my-form-field:focus-within label {
-  background-color: yellow;
+	background-color: yellow;
 }
@@ -116,22 +103,65 @@
 
-.my-form-field.focus-within label {
-  background-color: yellow;
+.my-form-field.focus-within.js-focus-within label, .js-focus-within .my-form-field.focus-within label {
+	background-color: yellow;
 }
-
 .my-form-field:focus-within label {
-  background-color: yellow;
+	background-color: yellow;
 }
 ```
 
+Note that changing this option implies that it needs to be passed to the
+browser polyfill as well.
+
+## Browser
+
+```js
+import focusWithinInit from 'postcss-focus-within/browser';
+
+focusWithinInit();
+```
+
+or
+
+```html
+<!-- When using a CDN url you will have to manually update the version number -->
+<script src="https://unpkg.com/postcss-focus-within@5.0.4/dist/browser-global.js"></script>
+<script>focusWithinInit()</script>
+```
+
+[PostCSS Focus Within] works in all major browsers, including Safari 6+ and
+Internet Explorer 9+ without any additional polyfills.
+
+### Browser Usage
+
+#### force
+
+The `force` option determines whether the library runs even if the browser
+supports the selector or not. By default, it won't run if the browser does
+support the selector.
+
+```js
+focusWithinInit({ force: true });
+```
+
+#### replaceWith
+
+Similar to the option for the PostCSS Plugin, `replaceWith` determines the
+attribute or class to apply to an element when it's considered to be `:focus-within`.
+
+```js
+focusWithinInit({ replaceWith: '.focus-within });
+```
+
+This option should be used if it was changed at PostCSS configuration level.
+
+[cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test
 [css-url]: https://cssdb.org/#focus-within-pseudo-class
-[cli-url]: https://github.com/csstools/postcss-plugins/tree/main/postcss-focus-within/actions/workflows/test.yml?query=workflow/test
 [discord]: https://discord.gg/bUadyRwkJS
 [npm-url]: https://www.npmjs.com/package/postcss-focus-within
 
-[focus-within polyfill]: https://github.com/jsxtools/focus-within
 [Gulp PostCSS]: https://github.com/postcss/gulp-postcss
 [Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss
 [PostCSS]: https://github.com/postcss/postcss
-[PostCSS Focus Within]: https://github.com/csstools/postcss-plugins/tree/main/postcss-focus-within
 [PostCSS Loader]: https://github.com/postcss/postcss-loader
+[PostCSS Focus Within]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-focus-within
 [Selectors Level 4 specification]: https://www.w3.org/TR/selectors-4/#the-focus-within-pseudo

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

38828

increased by151.25%

Dev dependency count

0

decreased by-100%

Number of package files

13

increased by85.71%

Lines of code

40

increased by233.33%

Number of lines in readme file

160

increased by23.08%

Dependency changes

• Updatedpostcss-selector-parser@^6.0.10