postcss-focus-within - npm Package Compare versions

Comparing version 6.1.1 to 7.0.0

CHANGELOG.md

 # Changes to PostCSS Focus Within
 
+### 7.0.0 (January 24, 2023)
+
+- Updated: Support for Node v14+ (major).
+- Fix: Do not throw when a selector is invalid, show a warning instead.
+
 ### 6.1.1 (August 23, 2022)
@@ -4,0 +9,0 @@

dist/browser-global.js

@@ -1,2 +0,2 @@
-!function(){var e=[" ",">","~",":","+","@","#","(",")"];function t(t){var n={force:!1,replaceWith:"[focus-within]"};if(void 0!==t&&"force"in t&&(n.force=t.force),void 0!==t&&"replaceWith"in t&&(n.replaceWith=t.replaceWith),!function(t){for(var n=!0,c=0,o=e.length;c<o&&n;c++)t.indexOf(e[c])>-1&&(n=!1);return n}(n.replaceWith))throw new Error(n.replaceWith+" is not a valid replacement since it can't be applied to single elements.");try{if(document.querySelector(":focus-within"),!n.force)return}catch(e){}var c,o,i,r,u,a=(c=n.replaceWith,u=[],"."===c[0]?(o=c.slice(1),i=function(e){return e.classList.remove(o)},r=function(e){return e.classList.add(o)}):(o=c.slice(1,-1),i=function(e){return e.removeAttribute(o,"")},r=function(e){return e.setAttribute(o,"")}),function(){u.forEach((function(e){return i(e)})),u.length=0;var e=document.activeElement;if(!/^(#document|HTML|BODY)$/.test(Object(e).nodeName))for(;e&&1===e.nodeType;)r(e),u.push(e),e=e.parentNode}),d=function(){document.documentElement.className.indexOf("js-focus-within")>-1||(document.documentElement.className=document.documentElement.className+" js-focus-within",document.addEventListener("focus",a,!0),document.addEventListener("blur",a,!0))};"complete"===document.readyState?d():document.addEventListener("DOMContentLoaded",d)}("object"==typeof window&&window||"object"==typeof self&&self||{}).focusWithinInit=t}();
+!function(){var e=[" ",">","~",":","+","@","#","(",")"];function isValidReplacement(t){for(var n=!0,i=0,c=e.length;i<c&&n;i++)t.indexOf(e[i])>-1&&(n=!1);return n}function focusWithin(e){var t={force:!1,replaceWith:"[focus-within]"};if(void 0!==e&&"force"in e&&(t.force=e.force),void 0!==e&&"replaceWith"in e&&(t.replaceWith=e.replaceWith),!isValidReplacement(t.replaceWith))throw new Error(t.replaceWith+" is not a valid replacement since it can't be applied to single elements.");try{if(document.querySelector(":focus-within"),!t.force)return}catch(d){}var n,i,c,o,r,a=(n=t.replaceWith,r=[],"."===n[0]?(i=n.slice(1),c=function remove(e){return e.classList.remove(i)},o=function add(e){return e.classList.add(i)}):(i=n.slice(1,-1),c=function remove(e){return e.removeAttribute(i,"")},o=function add(e){return e.setAttribute(i,"")}),function handleFocusChange(){r.forEach((function(e){return c(e)})),r.length=0;var e=document.activeElement;if(!/^(#document|HTML|BODY)$/.test(Object(e).nodeName))for(;e&&1===e.nodeType;)o(e),r.push(e),e=e.parentNode}),u=function initializeEventListeners(){document.documentElement.className.indexOf("js-focus-within")>-1||(document.documentElement.className=document.documentElement.className+" js-focus-within",document.addEventListener("focus",a,!0),document.addEventListener("blur",a,!0))};"complete"===document.readyState?u():document.addEventListener("DOMContentLoaded",u)}("object"==typeof window&&window||"object"==typeof self&&self||{}).focusWithinInit=focusWithin}();
 //# sourceMappingURL=browser-global.js.map

dist/index.d.ts

 import type { PluginCreator } from 'postcss';
-declare type pluginOptions = {
+/** postcss-focus-within plugin options */
+export type pluginOptions = {
+    /** Preserve the original notation. default: true */
     preserve?: boolean;
+    /** The replacement class to be used in the polyfill. default: "[focus-within]" */
     replaceWith?: string;
+    /** Disable the selector prefix that is used to prevent a flash of incorrectly styled content. default: false */
     disablePolyfillReadyClass?: boolean;
@@ -6,0 +10,0 @@ };

package.json

 {
 	"name": "postcss-focus-within",
 	"description": "Use the :focus-within pseudo-selector in CSS",
-	"version": "6.1.1",
+	"version": "7.0.0",
 	"contributors": [
@@ -26,3 +26,3 @@ {
 	"engines": {
-		"node": "^12 || ^14 || >=16"
+		"node": "^14 || ^16 || >=18"
 	},
@@ -57,7 +57,8 @@ "main": "dist/index.cjs",
 	"peerDependencies": {
-		"postcss": "^8.2"
+		"postcss": "^8.4"
 	},
 	"scripts": {
-		"build": "rollup -c ../../rollup/default.js",
-		"clean": "node -e \"fs.rmSync('./dist', { recursive: true, force: true });\"",
+		"prebuild": "npm run clean",
+		"build": "rollup -c ../../rollup/default.mjs",
+		"clean": "node -e \"fs.rmSync('./dist', { recursive: true, force: true }); fs.mkdirSync('./dist');\"",
 		"docs": "node ../../.github/bin/generate-docs/install.mjs && node ../../.github/bin/generate-docs/readme.mjs",
@@ -64,0 +65,0 @@ "lint": "npm run lint:eslint && npm run lint:package-json",

README.md

@@ -1,2 +0,2 @@
-# PostCSS Focus Within [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][postcss]
+# PostCSS Focus Within [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][PostCSS]
 
@@ -51,4 +51,9 @@ [<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]
 
-| [Node](INSTALL.md#node) | [PostCSS CLI](INSTALL.md#postcss-cli) | [Webpack](INSTALL.md#webpack) | [Create React App](INSTALL.md#create-react-app) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) |
-| --- | --- | --- | --- | --- | --- |
+- [Node](INSTALL.md#node)
+- [PostCSS CLI](INSTALL.md#postcss-cli)
+- [PostCSS Load Config](INSTALL.md#postcss-load-config)
+- [Webpack](INSTALL.md#webpack)
+- [Next.js](INSTALL.md#nextjs)
+- [Gulp](INSTALL.md#gulp)
+- [Grunt](INSTALL.md#grunt)
 
@@ -147,3 +152,3 @@ ## Options
 <!-- When using a CDN url you will have to manually update the version number -->
-<script src="https://unpkg.com/postcss-focus-within@6.1.1/dist/browser-global.js"></script>
+<script src="https://unpkg.com/postcss-focus-within@7.0.0/dist/browser-global.js"></script>
 <script>focusWithinInit()</script>
@@ -178,2 +183,15 @@ ```
 
+### Using with Next.js
+
+Given that Next.js imports packages both on the browser and on the server, you need to make sure that the package is only imported on the browser.
+
+As outlined in the [Next.js documentation](https://nextjs.org/docs/advanced-features/dynamic-import#with-external-libraries), you need to load the package with a dynamic import:
+
+```jsx
+useEffect(async () => {
+	const focusWithinInit = (await import('postcss-focus-within/browser')).default;
+	focusWithinInit();
+}, []);
+```
+
 [cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test
@@ -184,7 +202,4 @@ [css-url]: https://cssdb.org/#focus-within-pseudo-class
 
-[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 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

No alert changes

Improved metrics

Total package byte prevSize

41592

increased by3.49%

Lines of code

47

increased by14.63%

Number of lines in readme file

202

increased by8.02%

No dependency changes