postcss-focus-within 5.0.3 → 6.1.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changes to PostCSS Focus Within
 
+### 6.1.0 (July 30, 2022)
+
+- Added: `disablePolyfillReadyClass` plugin option to prevent `.js-focus-within` from being added.
+
+### 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)
+
+- Improved `es module` and `commonjs` compatibility
+
 ### 5.0.3 (January 2, 2022)
 
 - Removed Sourcemaps from package tarball.

package/README.md

@@ -1,36 +1,28 @@
 # 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/badge/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="support chat" src="https://img.shields.io/badge/support-chat-blue.svg" height="20">][git-url]
+[<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;
 }
 
 /* becomes */
 
-.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;
 }
 ```
 
 [PostCSS Focus Within] duplicates rules using the `:focus-within` pseudo-class
 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`
 rule can be disabled using the `preserve` option.
 
@@ -42,22 +34,14 @@ Add [PostCSS Focus Within] to your project:
 npm install postcss postcss-focus-within --save-dev
 ```
 
-Use [PostCSS Focus Within] to process your CSS:
-
-```js
-const postcssFocusWithin = require('postcss-focus-within');
-
-postcssFocusWithin.process(YOUR_CSS /*, processOptions, pluginOptions */);
-```
-
-Or use it as a [PostCSS] plugin:
+Use it as a [PostCSS] plugin:
 
 ```js
 const postcss = require('postcss');
 const postcssFocusWithin = require('postcss-focus-within');
 
 postcss([
-  postcssFocusWithin(/* pluginOptions */)
+	postcssFocusWithin(/* pluginOptions */)
 ]).process(YOUR_CSS /*, processOptions */);
 ```
 
@@ -71,22 +55,22 @@ instructions for:
 
 ### preserve
 
-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;
 }
 
 /* becomes */
 
-.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;
 }
 ```
 
@@ -94,36 +78,109 @@ focusWithin({ preserve: false });
 
 The `replaceWith` option defines the selector to replace `:focus-within`. By
 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;
 }
 
 /* becomes */
 
-.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;
+}
+```
+
+Note that changing this option implies that it needs to be passed to the
+browser polyfill as well.
+
+### 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
+postcssFocusWithin({ disablePolyfillReadyClass: true })
+```
+
+```pcss
+.my-form-field:focus-within label {
+	background-color: yellow;
+}
+
+/* becomes */
 
+.my-form-field[focus-within] label, .my-form-field[focus-within] label {
+	background-color: yellow;
+}
 .my-form-field:focus-within label {
-  background-color: yellow;
+	background-color: yellow;
 }
 ```
 
+## 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@6.1.0/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
-[git-url]: https://gitter.im/postcss/postcss
+[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

package/dist/browser-global.js

@@ -0,0 +1,2 @@
+!function(){var e=[" ",">","~",":","+","@","#","(",")"];self.focusWithinInit=function(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,i=e.length;c<i&&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,i,o,r,u,a=(c=n.replaceWith,u=[],"."===c[0]?(i=c.slice(1),o=function(e){return e.classList.remove(i)},r=function(e){return e.classList.add(i)}):(i=c.slice(1,-1),o=function(e){return e.removeAttribute(i,"")},r=function(e){return e.setAttribute(i,"")}),function(){u.forEach((function(e){return o(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)}}();
+//# sourceMappingURL=browser-global.js.map

package/dist/browser-global.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"browser-global.js","sources":["../src/is-valid-replacement.mjs","../src/browser-global.js","../src/browser.js"],"sourcesContent":["const INVALID_SELECTOR_CHAR = [\n\t' ', // Can't use child selector\n\t'>', // Can't use direct child selector\n\t'~', // Can't use sibling selector\n\t':', // Can't use pseudo selector\n\t'+', // Can't use adjacent selector\n\t'@', // Can't use at\n\t'#', // Can't use id selector\n\t'(', // Can't use parenthesis\n\t')', // Can't use parenthesis\n];\n\nexport default function isValidReplacement(selector) {\n\tlet isValid = true;\n\n\t// Purposely archaic so it's interoperable in old browsers\n\tfor (let i = 0, length = INVALID_SELECTOR_CHAR.length; i < length && isValid; i++) {\n\t\tif (selector.indexOf(INVALID_SELECTOR_CHAR[i]) > -1) {\n\t\t\tisValid = false;\n\t\t}\n\t}\n\n\treturn isValid;\n}\n","/* global self */\nimport { default as focusWithinInit } from './browser';\nself.focusWithinInit = focusWithinInit;\n","/* global document */\nimport isValidReplacement from './is-valid-replacement.mjs';\nfunction generateHandler(replaceWith) {\n\tlet selector;\n\tlet remove;\n\tlet add;\n\tconst lastElements = [];\n\n\tif (replaceWith[0] === '.') {\n\t\tselector = replaceWith.slice(1);\n\t\tremove = (el) => el.classList.remove(selector);\n\t\tadd = (el) => el.classList.add(selector);\n\t} else {\n\t\t// A bit naive\n\t\tselector = replaceWith.slice(1, -1);\n\t\tremove = (el) => el.removeAttribute(selector, '');\n\t\tadd = (el) => el.setAttribute(selector, '');\n\t}\n\n\treturn function handleFocusChange() {\n\t\tlastElements.forEach(lastElement => remove(lastElement));\n\t\tlastElements.length = 0;\n\n\t\tlet activeElement = document.activeElement;\n\n\t\t// only add focus if it has not been added and is not the document element\n\t\tif (!/^(#document|HTML|BODY)$/.test(Object(activeElement).nodeName)) {\n\t\t\twhile (activeElement && activeElement.nodeType === 1) {\n\t\t\t\tadd(activeElement);\n\t\t\t\tlastElements.push(activeElement);\n\n\t\t\t\tactiveElement = activeElement.parentNode;\n\t\t\t}\n\t\t}\n\t};\n}\n\nexport default function focusWithin(opts) {\n\t// configuration\n\tconst options = {\n\t\tforce: false,\n\t\treplaceWith: '[focus-within]',\n\t};\n\n\tif (typeof opts !== 'undefined' && 'force' in opts) {\n\t\toptions.force = opts.force;\n\t}\n\n\tif (typeof opts !== 'undefined' && 'replaceWith' in opts) {\n\t\toptions.replaceWith = opts.replaceWith;\n\t}\n\n\tif (!isValidReplacement(options.replaceWith)) {\n\t\tthrow new Error(`${options.replaceWith} is not a valid replacement since it can't be applied to single elements.`);\n\t}\n\n\ttry {\n\t\tdocument.querySelector(':focus-within');\n\n\t\tif (!options.force) {\n\t\t\treturn;\n\t\t}\n\t} catch (ignoredError) { /* do nothing and continue */ }\n\n\tconst handleFocusChange = generateHandler(options.replaceWith);\n\n\tconst initialize = function initializeEventListeners() {\n\t\tif (document.documentElement.className.indexOf('js-focus-within') > -1) {\n\t\t\treturn;\n\t\t}\n\n\t\tdocument.documentElement.className = document.documentElement.className + ' js-focus-within';\n\t\tdocument.addEventListener('focus', handleFocusChange, true);\n\t\tdocument.addEventListener('blur', handleFocusChange, true);\n\t};\n\n\tif (document.readyState === 'complete') {\n\t\tinitialize();\n\t} else {\n\t\tdocument.addEventListener('DOMContentLoaded', initialize);\n\t}\n}\n"],"names":["INVALID_SELECTOR_CHAR","self","focusWithinInit","opts","options","force","replaceWith","selector","isValid","i","length","indexOf","isValidReplacement","Error","document","querySelector","ignoredError","remove","add","lastElements","handleFocusChange","slice","el","classList","removeAttribute","setAttribute","forEach","lastElement","activeElement","test","Object","nodeName","nodeType","push","parentNode","initialize","documentElement","className","addEventListener","readyState"],"mappings":"YAAA,IAAMA,EAAwB,CAC7B,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,KCPDC,KAAKC,gBCmCU,SAAqBC,GAEnC,IAAMC,EAAU,CACfC,OAAO,EACPC,YAAa,kBAWd,QARoB,IAATH,GAAwB,UAAWA,IAC7CC,EAAQC,MAAQF,EAAKE,YAGF,IAATF,GAAwB,gBAAiBA,IACnDC,EAAQE,YAAcH,EAAKG,cFrCd,SAA4BC,GAI1C,IAHA,IAAIC,GAAU,EAGLC,EAAI,EAAGC,EAASV,EAAsBU,OAAQD,EAAIC,GAAUF,EAASC,IACzEF,EAASI,QAAQX,EAAsBS,KAAO,IACjDD,GAAU,GAIZ,OAAOA,CACP,CE6BKI,CAAmBR,EAAQE,aAC/B,MAAM,IAAIO,MAAST,EAAQE,YAA3B,6EAGD,IAGC,GAFAQ,SAASC,cAAc,kBAElBX,EAAQC,MACZ,MAEsD,CAAtD,MAAOW,GAA+C,CAExD,IA9DwBV,EACpBC,EACAU,EACAC,EACEC,EA0DAC,GA9DkBd,EA8DkBF,EAAQE,YA1D5Ca,EAAe,GAEE,MAAnBb,EAAY,IACfC,EAAWD,EAAYe,MAAM,GAC7BJ,EAAS,SAACK,GAAD,OAAQA,EAAGC,UAAUN,OAAOV,IACrCW,EAAM,SAACI,GAAD,OAAQA,EAAGC,UAAUL,IAAIX,MAG/BA,EAAWD,EAAYe,MAAM,GAAI,GACjCJ,EAAS,SAACK,GAAD,OAAQA,EAAGE,gBAAgBjB,EAAU,KAC9CW,EAAM,SAACI,GAAD,OAAQA,EAAGG,aAAalB,EAAU,MAGlC,WACNY,EAAaO,SAAQ,SAAAC,GAAW,OAAIV,EAAOU,MAC3CR,EAAaT,OAAS,EAEtB,IAAIkB,EAAgBd,SAASc,cAG7B,IAAK,0BAA0BC,KAAKC,OAAOF,GAAeG,UACzD,KAAOH,GAA4C,IAA3BA,EAAcI,UACrCd,EAAIU,GACJT,EAAac,KAAKL,GAElBA,EAAgBA,EAAcM,aAmC3BC,EAAa,WACdrB,SAASsB,gBAAgBC,UAAU1B,QAAQ,oBAAsB,IAIrEG,SAASsB,gBAAgBC,UAAYvB,SAASsB,gBAAgBC,UAAY,mBAC1EvB,SAASwB,iBAAiB,QAASlB,GAAmB,GACtDN,SAASwB,iBAAiB,OAAQlB,GAAmB,KAG1B,aAAxBN,SAASyB,WACZJ,IAEArB,SAASwB,iBAAiB,mBAAoBH,EAE/C"}

package/dist/browser.cjs

@@ -0,0 +1,2 @@
+var e=[" ",">","~",":","+","@","#","(",")"];module.exports=function(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,r=e.length;c<r&&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,r,o,i,u,a=(c=n.replaceWith,u=[],"."===c[0]?(r=c.slice(1),o=function(e){return e.classList.remove(r)},i=function(e){return e.classList.add(r)}):(r=c.slice(1,-1),o=function(e){return e.removeAttribute(r,"")},i=function(e){return e.setAttribute(r,"")}),function(){u.forEach((function(e){return o(e)})),u.length=0;var e=document.activeElement;if(!/^(#document|HTML|BODY)$/.test(Object(e).nodeName))for(;e&&1===e.nodeType;)i(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)};
+//# sourceMappingURL=browser.cjs.map

package/dist/browser.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"browser.cjs","sources":["../src/is-valid-replacement.mjs","../src/browser.js"],"sourcesContent":["const INVALID_SELECTOR_CHAR = [\n\t' ', // Can't use child selector\n\t'>', // Can't use direct child selector\n\t'~', // Can't use sibling selector\n\t':', // Can't use pseudo selector\n\t'+', // Can't use adjacent selector\n\t'@', // Can't use at\n\t'#', // Can't use id selector\n\t'(', // Can't use parenthesis\n\t')', // Can't use parenthesis\n];\n\nexport default function isValidReplacement(selector) {\n\tlet isValid = true;\n\n\t// Purposely archaic so it's interoperable in old browsers\n\tfor (let i = 0, length = INVALID_SELECTOR_CHAR.length; i < length && isValid; i++) {\n\t\tif (selector.indexOf(INVALID_SELECTOR_CHAR[i]) > -1) {\n\t\t\tisValid = false;\n\t\t}\n\t}\n\n\treturn isValid;\n}\n","/* global document */\nimport isValidReplacement from './is-valid-replacement.mjs';\nfunction generateHandler(replaceWith) {\n\tlet selector;\n\tlet remove;\n\tlet add;\n\tconst lastElements = [];\n\n\tif (replaceWith[0] === '.') {\n\t\tselector = replaceWith.slice(1);\n\t\tremove = (el) => el.classList.remove(selector);\n\t\tadd = (el) => el.classList.add(selector);\n\t} else {\n\t\t// A bit naive\n\t\tselector = replaceWith.slice(1, -1);\n\t\tremove = (el) => el.removeAttribute(selector, '');\n\t\tadd = (el) => el.setAttribute(selector, '');\n\t}\n\n\treturn function handleFocusChange() {\n\t\tlastElements.forEach(lastElement => remove(lastElement));\n\t\tlastElements.length = 0;\n\n\t\tlet activeElement = document.activeElement;\n\n\t\t// only add focus if it has not been added and is not the document element\n\t\tif (!/^(#document|HTML|BODY)$/.test(Object(activeElement).nodeName)) {\n\t\t\twhile (activeElement && activeElement.nodeType === 1) {\n\t\t\t\tadd(activeElement);\n\t\t\t\tlastElements.push(activeElement);\n\n\t\t\t\tactiveElement = activeElement.parentNode;\n\t\t\t}\n\t\t}\n\t};\n}\n\nexport default function focusWithin(opts) {\n\t// configuration\n\tconst options = {\n\t\tforce: false,\n\t\treplaceWith: '[focus-within]',\n\t};\n\n\tif (typeof opts !== 'undefined' && 'force' in opts) {\n\t\toptions.force = opts.force;\n\t}\n\n\tif (typeof opts !== 'undefined' && 'replaceWith' in opts) {\n\t\toptions.replaceWith = opts.replaceWith;\n\t}\n\n\tif (!isValidReplacement(options.replaceWith)) {\n\t\tthrow new Error(`${options.replaceWith} is not a valid replacement since it can't be applied to single elements.`);\n\t}\n\n\ttry {\n\t\tdocument.querySelector(':focus-within');\n\n\t\tif (!options.force) {\n\t\t\treturn;\n\t\t}\n\t} catch (ignoredError) { /* do nothing and continue */ }\n\n\tconst handleFocusChange = generateHandler(options.replaceWith);\n\n\tconst initialize = function initializeEventListeners() {\n\t\tif (document.documentElement.className.indexOf('js-focus-within') > -1) {\n\t\t\treturn;\n\t\t}\n\n\t\tdocument.documentElement.className = document.documentElement.className + ' js-focus-within';\n\t\tdocument.addEventListener('focus', handleFocusChange, true);\n\t\tdocument.addEventListener('blur', handleFocusChange, true);\n\t};\n\n\tif (document.readyState === 'complete') {\n\t\tinitialize();\n\t} else {\n\t\tdocument.addEventListener('DOMContentLoaded', initialize);\n\t}\n}\n"],"names":["INVALID_SELECTOR_CHAR","opts","options","force","replaceWith","selector","isValid","i","length","indexOf","isValidReplacement","Error","document","querySelector","ignoredError","remove","add","lastElements","handleFocusChange","slice","el","classList","removeAttribute","setAttribute","forEach","lastElement","activeElement","test","Object","nodeName","nodeType","push","parentNode","initialize","documentElement","className","addEventListener","readyState"],"mappings":"AAAA,IAAMA,EAAwB,CAC7B,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,oBC4Bc,SAAqBC,GAEnC,IAAMC,EAAU,CACfC,OAAO,EACPC,YAAa,kBAWd,QARoB,IAATH,GAAwB,UAAWA,IAC7CC,EAAQC,MAAQF,EAAKE,YAGF,IAATF,GAAwB,gBAAiBA,IACnDC,EAAQE,YAAcH,EAAKG,cDrCd,SAA4BC,GAI1C,IAHA,IAAIC,GAAU,EAGLC,EAAI,EAAGC,EAASR,EAAsBQ,OAAQD,EAAIC,GAAUF,EAASC,IACzEF,EAASI,QAAQT,EAAsBO,KAAO,IACjDD,GAAU,GAIZ,OAAOA,CACP,CC6BKI,CAAmBR,EAAQE,aAC/B,MAAM,IAAIO,MAAST,EAAQE,YAA3B,6EAGD,IAGC,GAFAQ,SAASC,cAAc,kBAElBX,EAAQC,MACZ,MAEsD,CAAtD,MAAOW,GAA+C,CAExD,IA9DwBV,EACpBC,EACAU,EACAC,EACEC,EA0DAC,GA9DkBd,EA8DkBF,EAAQE,YA1D5Ca,EAAe,GAEE,MAAnBb,EAAY,IACfC,EAAWD,EAAYe,MAAM,GAC7BJ,EAAS,SAACK,GAAD,OAAQA,EAAGC,UAAUN,OAAOV,IACrCW,EAAM,SAACI,GAAD,OAAQA,EAAGC,UAAUL,IAAIX,MAG/BA,EAAWD,EAAYe,MAAM,GAAI,GACjCJ,EAAS,SAACK,GAAD,OAAQA,EAAGE,gBAAgBjB,EAAU,KAC9CW,EAAM,SAACI,GAAD,OAAQA,EAAGG,aAAalB,EAAU,MAGlC,WACNY,EAAaO,SAAQ,SAAAC,GAAW,OAAIV,EAAOU,MAC3CR,EAAaT,OAAS,EAEtB,IAAIkB,EAAgBd,SAASc,cAG7B,IAAK,0BAA0BC,KAAKC,OAAOF,GAAeG,UACzD,KAAOH,GAA4C,IAA3BA,EAAcI,UACrCd,EAAIU,GACJT,EAAac,KAAKL,GAElBA,EAAgBA,EAAcM,aAmC3BC,EAAa,WACdrB,SAASsB,gBAAgBC,UAAU1B,QAAQ,oBAAsB,IAIrEG,SAASsB,gBAAgBC,UAAYvB,SAASsB,gBAAgBC,UAAY,mBAC1EvB,SAASwB,iBAAiB,QAASlB,GAAmB,GACtDN,SAASwB,iBAAiB,OAAQlB,GAAmB,KAG1B,aAAxBN,SAASyB,WACZJ,IAEArB,SAASwB,iBAAiB,mBAAoBH,EAE/C"}

package/dist/browser.mjs

@@ -0,0 +1,2 @@
+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,r=e.length;c<r&&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,r,o,i,u,a=(c=n.replaceWith,u=[],"."===c[0]?(r=c.slice(1),o=function(e){return e.classList.remove(r)},i=function(e){return e.classList.add(r)}):(r=c.slice(1,-1),o=function(e){return e.removeAttribute(r,"")},i=function(e){return e.setAttribute(r,"")}),function(){u.forEach((function(e){return o(e)})),u.length=0;var e=document.activeElement;if(!/^(#document|HTML|BODY)$/.test(Object(e).nodeName))for(;e&&1===e.nodeType;)i(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)}export{t as default};
+//# sourceMappingURL=browser.mjs.map

package/dist/browser.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"browser.mjs","sources":["../src/is-valid-replacement.mjs","../src/browser.js"],"sourcesContent":["const INVALID_SELECTOR_CHAR = [\n\t' ', // Can't use child selector\n\t'>', // Can't use direct child selector\n\t'~', // Can't use sibling selector\n\t':', // Can't use pseudo selector\n\t'+', // Can't use adjacent selector\n\t'@', // Can't use at\n\t'#', // Can't use id selector\n\t'(', // Can't use parenthesis\n\t')', // Can't use parenthesis\n];\n\nexport default function isValidReplacement(selector) {\n\tlet isValid = true;\n\n\t// Purposely archaic so it's interoperable in old browsers\n\tfor (let i = 0, length = INVALID_SELECTOR_CHAR.length; i < length && isValid; i++) {\n\t\tif (selector.indexOf(INVALID_SELECTOR_CHAR[i]) > -1) {\n\t\t\tisValid = false;\n\t\t}\n\t}\n\n\treturn isValid;\n}\n","/* global document */\nimport isValidReplacement from './is-valid-replacement.mjs';\nfunction generateHandler(replaceWith) {\n\tlet selector;\n\tlet remove;\n\tlet add;\n\tconst lastElements = [];\n\n\tif (replaceWith[0] === '.') {\n\t\tselector = replaceWith.slice(1);\n\t\tremove = (el) => el.classList.remove(selector);\n\t\tadd = (el) => el.classList.add(selector);\n\t} else {\n\t\t// A bit naive\n\t\tselector = replaceWith.slice(1, -1);\n\t\tremove = (el) => el.removeAttribute(selector, '');\n\t\tadd = (el) => el.setAttribute(selector, '');\n\t}\n\n\treturn function handleFocusChange() {\n\t\tlastElements.forEach(lastElement => remove(lastElement));\n\t\tlastElements.length = 0;\n\n\t\tlet activeElement = document.activeElement;\n\n\t\t// only add focus if it has not been added and is not the document element\n\t\tif (!/^(#document|HTML|BODY)$/.test(Object(activeElement).nodeName)) {\n\t\t\twhile (activeElement && activeElement.nodeType === 1) {\n\t\t\t\tadd(activeElement);\n\t\t\t\tlastElements.push(activeElement);\n\n\t\t\t\tactiveElement = activeElement.parentNode;\n\t\t\t}\n\t\t}\n\t};\n}\n\nexport default function focusWithin(opts) {\n\t// configuration\n\tconst options = {\n\t\tforce: false,\n\t\treplaceWith: '[focus-within]',\n\t};\n\n\tif (typeof opts !== 'undefined' && 'force' in opts) {\n\t\toptions.force = opts.force;\n\t}\n\n\tif (typeof opts !== 'undefined' && 'replaceWith' in opts) {\n\t\toptions.replaceWith = opts.replaceWith;\n\t}\n\n\tif (!isValidReplacement(options.replaceWith)) {\n\t\tthrow new Error(`${options.replaceWith} is not a valid replacement since it can't be applied to single elements.`);\n\t}\n\n\ttry {\n\t\tdocument.querySelector(':focus-within');\n\n\t\tif (!options.force) {\n\t\t\treturn;\n\t\t}\n\t} catch (ignoredError) { /* do nothing and continue */ }\n\n\tconst handleFocusChange = generateHandler(options.replaceWith);\n\n\tconst initialize = function initializeEventListeners() {\n\t\tif (document.documentElement.className.indexOf('js-focus-within') > -1) {\n\t\t\treturn;\n\t\t}\n\n\t\tdocument.documentElement.className = document.documentElement.className + ' js-focus-within';\n\t\tdocument.addEventListener('focus', handleFocusChange, true);\n\t\tdocument.addEventListener('blur', handleFocusChange, true);\n\t};\n\n\tif (document.readyState === 'complete') {\n\t\tinitialize();\n\t} else {\n\t\tdocument.addEventListener('DOMContentLoaded', initialize);\n\t}\n}\n"],"names":["INVALID_SELECTOR_CHAR","focusWithin","opts","options","force","replaceWith","selector","isValid","i","length","indexOf","isValidReplacement","Error","document","querySelector","ignoredError","remove","add","lastElements","handleFocusChange","slice","el","classList","removeAttribute","setAttribute","forEach","lastElement","activeElement","test","Object","nodeName","nodeType","push","parentNode","initialize","documentElement","className","addEventListener","readyState"],"mappings":"AAAA,IAAMA,EAAwB,CAC7B,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,KC4Bc,SAASC,EAAYC,GAEnC,IAAMC,EAAU,CACfC,OAAO,EACPC,YAAa,kBAWd,QARoB,IAATH,GAAwB,UAAWA,IAC7CC,EAAQC,MAAQF,EAAKE,YAGF,IAATF,GAAwB,gBAAiBA,IACnDC,EAAQE,YAAcH,EAAKG,cDrCd,SAA4BC,GAI1C,IAHA,IAAIC,GAAU,EAGLC,EAAI,EAAGC,EAAST,EAAsBS,OAAQD,EAAIC,GAAUF,EAASC,IACzEF,EAASI,QAAQV,EAAsBQ,KAAO,IACjDD,GAAU,GAIZ,OAAOA,CACP,CC6BKI,CAAmBR,EAAQE,aAC/B,MAAM,IAAIO,MAAST,EAAQE,YAA3B,6EAGD,IAGC,GAFAQ,SAASC,cAAc,kBAElBX,EAAQC,MACZ,MAEsD,CAAtD,MAAOW,GAA+C,CAExD,IA9DwBV,EACpBC,EACAU,EACAC,EACEC,EA0DAC,GA9DkBd,EA8DkBF,EAAQE,YA1D5Ca,EAAe,GAEE,MAAnBb,EAAY,IACfC,EAAWD,EAAYe,MAAM,GAC7BJ,EAAS,SAACK,GAAD,OAAQA,EAAGC,UAAUN,OAAOV,IACrCW,EAAM,SAACI,GAAD,OAAQA,EAAGC,UAAUL,IAAIX,MAG/BA,EAAWD,EAAYe,MAAM,GAAI,GACjCJ,EAAS,SAACK,GAAD,OAAQA,EAAGE,gBAAgBjB,EAAU,KAC9CW,EAAM,SAACI,GAAD,OAAQA,EAAGG,aAAalB,EAAU,MAGlC,WACNY,EAAaO,SAAQ,SAAAC,GAAW,OAAIV,EAAOU,MAC3CR,EAAaT,OAAS,EAEtB,IAAIkB,EAAgBd,SAASc,cAG7B,IAAK,0BAA0BC,KAAKC,OAAOF,GAAeG,UACzD,KAAOH,GAA4C,IAA3BA,EAAcI,UACrCd,EAAIU,GACJT,EAAac,KAAKL,GAElBA,EAAgBA,EAAcM,aAmC3BC,EAAa,WACdrB,SAASsB,gBAAgBC,UAAU1B,QAAQ,oBAAsB,IAIrEG,SAASsB,gBAAgBC,UAAYvB,SAASsB,gBAAgBC,UAAY,mBAC1EvB,SAASwB,iBAAiB,QAASlB,GAAmB,GACtDN,SAASwB,iBAAiB,OAAQlB,GAAmB,KAG1B,aAAxBN,SAASyB,WACZJ,IAEArB,SAASwB,iBAAiB,mBAAoBH,EAE/C"}

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var t=e(require("postcss-selector-parser"));const s=e=>{const s=String(Object(e).replaceWith||"[focus-within]"),r=Boolean(!("preserve"in Object(e))||e.preserve),o=t.default().astSync(s);return{postcssPlugin:"postcss-focus-within",Rule:(e,{result:s})=>{if(!e.selector.includes(":focus-within"))return;let c;try{const s=t.default((e=>{e.walkPseudos((e=>{":focus-within"===e.value&&(e.nodes&&e.nodes.length||e.replaceWith(o.clone({})))}))})).processSync(e.selector);c=String(s)}catch(t){return void e.warn(s,`Failed to parse selector : ${e.selector}`)}if(void 0===c)return;if(c===e.selector)return;const n=e.clone({selector:c});r?e.before(n):e.replaceWith(n)}}};s.postcss=!0,module.exports=s;
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=e(require("postcss-selector-parser"));const t=[" ",">","~",":","+","@","#","(",")"];const n=":focus-within",l=e=>{const l=Object.assign({preserve:!0,replaceWith:"[focus-within]",disablePolyfillReadyClass:!1},e),o=s.default().astSync(l.replaceWith);return function(e){let s=!0;for(let n=0,l=t.length;n<l&&s;n++)e.indexOf(t[n])>-1&&(s=!1);return s}(l.replaceWith)?{postcssPlugin:"postcss-focus-within",Rule(e,{result:t}){if(!e.selector.toLowerCase().includes(n))return;const r=e.selectors.flatMap((r=>{if(!r.toLowerCase().includes(n))return[r];let a;try{a=s.default().astSync(r)}catch(s){return e.warn(t,`Failed to parse selector : ${r}`),r}if(void 0===a)return[r];let i=!1;if(a.walkPseudos((e=>{e.value.toLowerCase()===n&&(e.nodes&&e.nodes.length||(i=!0,e.replaceWith(o.clone({}))))})),!i)return[r];const c=a.clone();if(!l.disablePolyfillReadyClass){var u,d,f,p,h;if(null!=(u=a.nodes)&&null!=(d=u[0])&&null!=(f=d.nodes)&&f.length)for(let e=0;e<a.nodes[0].nodes.length;e++){const t=a.nodes[0].nodes[e];if("combinator"===t.type||s.default.isPseudoElement(t)){a.nodes[0].insertBefore(t,s.default.className({value:"js-focus-within"}));break}if(e===a.nodes[0].nodes.length-1){a.nodes[0].append(s.default.className({value:"js-focus-within"}));break}}null!=(p=a.nodes)&&null!=(h=p[0])&&h.nodes&&(c.nodes[0].prepend(s.default.combinator({value:" "})),c.nodes[0].prepend(s.default.className({value:"js-focus-within"})))}return[a.toString(),c.toString()]}));r.join(",")!==e.selectors.join(",")&&(e.cloneBefore({selectors:r}),l.preserve||e.remove())}}:{postcssPlugin:"postcss-focus-within",Once:(e,{result:s})=>{e.warn(s,`${l.replaceWith} is not a valid replacement since it can't be applied to single elements.`)}}};l.postcss=!0,module.exports=l;

package/dist/index.d.ts

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

package/dist/index.mjs

@@ -1 +1 @@
-import e from"postcss-selector-parser";const s=s=>{const t=String(Object(s).replaceWith||"[focus-within]"),r=Boolean(!("preserve"in Object(s))||s.preserve),o=e().astSync(t);return{postcssPlugin:"postcss-focus-within",Rule:(s,{result:t})=>{if(!s.selector.includes(":focus-within"))return;let c;try{const t=e((e=>{e.walkPseudos((e=>{":focus-within"===e.value&&(e.nodes&&e.nodes.length||e.replaceWith(o.clone({})))}))})).processSync(s.selector);c=String(t)}catch(e){return void s.warn(t,`Failed to parse selector : ${s.selector}`)}if(void 0===c)return;if(c===s.selector)return;const n=s.clone({selector:c});r?s.before(n):s.replaceWith(n)}}};s.postcss=!0;export{s as default};
+import e from"postcss-selector-parser";const s=[" ",">","~",":","+","@","#","(",")"];const n=":focus-within",t=t=>{const o=Object.assign({preserve:!0,replaceWith:"[focus-within]",disablePolyfillReadyClass:!1},t),l=e().astSync(o.replaceWith);return function(e){let n=!0;for(let t=0,o=s.length;t<o&&n;t++)e.indexOf(s[t])>-1&&(n=!1);return n}(o.replaceWith)?{postcssPlugin:"postcss-focus-within",Rule(s,{result:t}){if(!s.selector.toLowerCase().includes(n))return;const r=s.selectors.flatMap((r=>{if(!r.toLowerCase().includes(n))return[r];let i;try{i=e().astSync(r)}catch(e){return s.warn(t,`Failed to parse selector : ${r}`),r}if(void 0===i)return[r];let a=!1;if(i.walkPseudos((e=>{e.value.toLowerCase()===n&&(e.nodes&&e.nodes.length||(a=!0,e.replaceWith(l.clone({}))))})),!a)return[r];const c=i.clone();if(!o.disablePolyfillReadyClass){var u,d,p,f,h;if(null!=(u=i.nodes)&&null!=(d=u[0])&&null!=(p=d.nodes)&&p.length)for(let s=0;s<i.nodes[0].nodes.length;s++){const n=i.nodes[0].nodes[s];if("combinator"===n.type||e.isPseudoElement(n)){i.nodes[0].insertBefore(n,e.className({value:"js-focus-within"}));break}if(s===i.nodes[0].nodes.length-1){i.nodes[0].append(e.className({value:"js-focus-within"}));break}}null!=(f=i.nodes)&&null!=(h=f[0])&&h.nodes&&(c.nodes[0].prepend(e.combinator({value:" "})),c.nodes[0].prepend(e.className({value:"js-focus-within"})))}return[i.toString(),c.toString()]}));r.join(",")!==s.selectors.join(",")&&(s.cloneBefore({selectors:r}),o.preserve||s.remove())}}:{postcssPlugin:"postcss-focus-within",Once:(e,{result:s})=>{e.warn(s,`${o.replaceWith} is not a valid replacement since it can't be applied to single elements.`)}}};t.postcss=!0;export{t as default};

package/package.json

@@ -1,62 +1,101 @@
 {
-  "name": "postcss-focus-within",
-  "version": "5.0.3",
-  "description": "Use the :focus-within pseudo-selector in CSS",
-  "author": "Jonathan Neal <jonathantneal@hotmail.com>",
-  "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",
-  "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.8"
-  },
-  "devDependencies": {
-    "postcss": "^8.3.6",
-    "postcss-tape": "^6.0.1"
-  },
-  "peerDependencies": {
-    "postcss": "^8.3"
-  },
-  "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.1.0",
+	"contributors": [
+		{
+			"name": "Antonio Laguna",
+			"email": "antonio@laguna.es",
+			"url": "https://antonio.laguna.es"
+		},
+		{
+			"name": "Romain Menke",
+			"email": "romainmenke@gmail.com"
+		},
+		{
+			"name": "Jonathan Neal",
+			"email": "jonathantneal@hotmail.com"
+		}
+	],
+	"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"
+	}
 }