css-has-pseudo 3.0.2 → 4.0.0

package/CHANGELOG.md

@@ -1,5 +1,44 @@
 # Changes to CSS Has Pseudo
 
+### 4.0.0 (July 8, 2022)
+
+[Read the full changelog](https://github.com/csstools/postcss-plugins/wiki/PostCSS-Preset-Env-8)
+
+- Breaking: removed old CDN urls
+- Added: 'hover' options for browser polyfill
+- Added: 'observedAttributes' options for browser polyfill
+- Added: 'forcePolyfill' options for browser polyfill
+- Added: Rules within `@supports selector(:has(something))` won't be transformed.
+- Fix: Use base36 encoding to support all possible selectors.
+- Fix: case insensitive matching.
+
+#### How to migrate :
+
+##### Re-build your CSS with the new version of the library.
+
+##### If you use a CDN url, please update it.
+
+```diff
+- <script src="https://unpkg.com/css-has-pseudo/browser"></script>
++ <script src="https://unpkg.com/css-has-pseudo/dist/browser-global.js"></script>
+```
+
+```diff
+- <script src="https://unpkg.com/css-has-pseudo/browser.min"></script>
++ <script src="https://unpkg.com/css-has-pseudo/dist/browser-global.js"></script>
+```
+
+### 3.0.4 (February 5, 2022)
+
+- Rebuild of browser polyfills
+
+### 3.0.3 (January 12, 2022)
+
+- Fix compatibility with PostCSS `v8.2.x` [#147](https://github.com/csstools/postcss-plugins/issues/147)
+
+This version is not officially supported but some tool providers pinned PostCSS to `v8.2.x`,
+making it impossible for end users to have a working setup.
+
 ### 3.0.2 (January 2, 2022)
 
 - Removed Sourcemaps from package tarball.

package/README.md

@@ -1,106 +1,308 @@
-# CSS Has Pseudo [<img src="http://jonathantneal.github.io/js-logo.svg" alt="" width="90" height="90" align="right">][CSS Has Pseudo]
+# PostCSS Has Pseudo [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][postcss]
 
-[![NPM Version][npm-img]][npm-url]
-[![Support Chat][git-img]][git-url]
+[<img alt="npm version" src="https://img.shields.io/npm/v/css-has-pseudo.svg" height="20">][npm-url] [<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/has-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]
 
-[CSS Has Pseudo] lets you style elements relative to other elements in CSS,
-following the [Selectors Level 4] specification.
+[PostCSS Has Pseudo] lets you style elements relative to other elements in CSS, following the [Selectors Level 4] specification.
 
-[!['Can I use' table](https://caniuse.bitsofco.de/image/css-has.png)](https://caniuse.com/#feat=css-has)
-
-```css
-a:has(> img) {
-  /* style links that contain an image */
+```pcss
+.title:has(+ p) {
+	margin-bottom: 1.5rem;
 }
 
-h1:has(+ p) {
-  /* style level 1 headings that are followed by a paragraph */
-}
+/* becomes */
 
-section:not(:has(h1, h2, h3, h4, h5, h6)) {
-  /* style sections that don’t contain any heading elements */
+[csstools-has-1a-38-2x-38-30-2t-1m-2w-2p-37-14-17-w-34-15]:not(does-not-exist) {
+	margin-bottom: 1.5rem;
 }
-
-body:has(:focus) {
-  /* style the body if it contains a focused element */
+.title:has(+ p) {
+	margin-bottom: 1.5rem;
 }
 ```
 
 ## Usage
 
-From the command line, transform CSS files that use `:has` selectors:
+Add [PostCSS Has Pseudo] to your project:
 
 ```bash
-npx css-has-pseudo SOURCE.css --output TRANSFORMED.css
+npm install postcss css-has-pseudo --save-dev
 ```
 
-Next, use your transformed CSS with this script:
+Use it as a [PostCSS] plugin:
 
-```html
-<link rel="stylesheet" href="TRANSFORMED.css">
-<script src="https://unpkg.com/css-has-pseudo/dist/browser-global.js"></script>
-<script>cssHasPseudo(document)</script>
+```js
+const postcss = require('postcss');
+const postcssHasPseudo = require('css-has-pseudo');
+
+postcss([
+	postcssHasPseudo(/* pluginOptions */)
+]).process(YOUR_CSS /*, processOptions */);
 ```
 
-⚠️ Please use a versioned url, like this : `https://unpkg.com/css-has-pseudo@3.0.0/dist/browser-global.js`
-Without the version, you might unexpectedly get a new major version of the library with breaking changes.
+[PostCSS Has Pseudo] runs in all Node environments, with special
+instructions for:
 
-⚠️ If you were using an older version via a CDN, please update the entire url.
-The old URL will no longer work in a future release.
+| [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) |
+| --- | --- | --- | --- | --- | --- |
 
-That’s it. The script is 765 bytes and works in most browser versions, including
-Internet Explorer 11. With a [Mutation Observer polyfill], the script will work
-down to Internet Explorer 9.
+## Options
 
-See [README BROWSER](README-BROWSER.md) for more information.
+### preserve
 
-## How it works
+The `preserve` option determines whether the original notation
+is preserved. By default the original rules are preserved.
 
-The [PostCSS plugin](README-POSTCSS.md) clones rules containing `:has`,
-replacing them with an alternative `[:has]` selector.
+```js
+postcssHasPseudo({ preserve: false })
+```
 
-```css
-body:has(:focus) {
-  background-color: yellow;
+```pcss
+.title:has(+ p) {
+	margin-bottom: 1.5rem;
 }
 
-section:not(:has(h1, h2, h3, h4, h5, h6)) {
-  background-color: gray;
+/* becomes */
+
+[csstools-has-1a-38-2x-38-30-2t-1m-2w-2p-37-14-17-w-34-15]:not(does-not-exist) {
+	margin-bottom: 1.5rem;
 }
+```
 
-/* becomes */
+### specificityMatchingName
+
+The `specificityMatchingName` option allows you to change to selector that is used to adjust specificity.
+The default value is `does-not-exist`.
+If this is an actual class, id or tag name in your code, you will need to set a different option here.
+
+See how `:not` is used to modify [specificity](#specificity).
+
+```js
+postcssHasPseudo({ specificityMatchingName: 'something-random' })
+```
 
-body[\:has\(\:focus\)] {
-  background-color: yellow;
+[specificity 1, 2, 0](https://polypane.app/css-specificity-calculator/#selector=.x%3Ahas(%3E%20%23a%3Ahover))
+
+Before :
+
+```css
+.x:has(> #a:hover) {
+	order: 11;
 }
+```
 
-body:has(:focus) {
-  background-color: yellow;
+After :
+
+[specificity 1, 2, 0](https://polypane.app/css-specificity-calculator/#selector=%5Bcsstools-has-1a-3c-1m-2w-2p-37-14-1q-w-z-2p-1m-2w-33-3a-2t-36-15%5D%3Anot(%23does-not-exist)%3Anot(.does-not-exist))
+
+```css
+[csstools-has-1a-3c-1m-2w-2p-37-14-1q-w-z-2p-1m-2w-33-3a-2t-36-15]:not(#does-not-exist):not(.does-not-exist) {
+	order: 11;
 }
+```
+
+## ⚠️ Known shortcomings
+
+### Specificity
+
+`:has` transforms will result in at least one attribute selector with specificity `0, 1, 0`.<br>
+If your selector only has tags we won't be able to match the original specificity.
+
+Before :
+
+[specificity 0, 0, 2](https://polypane.app/css-specificity-calculator/#selector=figure%3Ahas(%3E%20img))
+
+```css
+figure:has(> img)
+```
+
+After :
+
+[specificity 0, 1, 2](https://polypane.app/css-specificity-calculator/#selector=%5Bcsstools-has-2u-2x-2v-39-36-2t-1m-2w-2p-37-14-1q-w-2x-31-2v-15%5D%3Anot(does-not-exist)%3Anot(does-not-exist))
+
+```css
+[csstools-has-2u-2x-2v-39-36-2t-1m-2w-2p-37-14-1q-w-2x-31-2v-15]:not(does-not-exist):not(does-not-exist)
+```
+
+### Plugin order
+
+As selectors are encoded, this plugin (or `postcss-preset-env`) must be run after any other plugin that transforms selectors.
+
+If other plugins are used, you need to place these in your config before `postcss-preset-env` or `css-has-pseudo`.
+
+Please let us know if you have issues with plugins that transform selectors.
+Then we can investigate and maybe fix these.
+
+## Browser
+
+```js
+// initialize prefersColorScheme (applies the current OS color scheme, if available)
+import cssHasPseudo from 'css-has-pseudo/browser';
+cssHasPseudo(document);
+```
+
+or
+
+```html
+<!-- When using a CDN url you will have to manually update the version number -->
+<script src="https://unpkg.com/css-has-pseudo@3.0.4/dist/browser-global.js"></script>
+<script>cssHasPseudo(document)</script>
+```
+
+⚠️ Please use a versioned url, like this : `https://unpkg.com/css-has-pseudo@3.0.4/dist/browser-global.js`
+Without the version, you might unexpectedly get a new major version of the library with breaking changes.
 
-section[\:not-has\(h1\,\%20h2\,\%20h3\,\%20h4\,\%20h5\,\%20h6\)] {
-  background-color: gray;
+[PostCSS Has Pseudo] works in all major browsers, including
+Internet Explorer 11. With a [Mutation Observer polyfill](https://github.com/webmodules/mutation-observer), the script will work
+down to Internet Explorer 9.
+
+### Browser Usage
+
+#### hover
+
+The `hover` option determines if `:hover` pseudo-class should be tracked.
+This is disabled by default because it is an expensive operation.
+
+```js
+cssHasPseudo(document, { hover: true });
+```
+
+#### observedAttributes
+
+The `observedAttributes` option determines which html attributes are observed.
+If you do any client side modification of non-standard attributes and use these in combination with `:has()` you should add these here.
+
+```js
+cssHasPseudo(document, { observedAttributes: ['something-not-standard'] });
+```
+
+#### forcePolyfill
+
+The `forcePolyfill` option determines if the polyfill is used even when the browser has native support.
+This is needed when you set `preserve: false` in the PostCSS plugin config.
+
+```js
+cssHasPseudo(document, { forcePolyfill: true });
+```
+
+#### debug
+
+The `debug` option determines if errors are emitted to the console in browser.
+By default the polyfill will not emit errors or warnings.
+
+```js
+cssHasPseudo(document, { debug: true });
+```
+
+
+### Browser Dependencies
+
+Web API's:
+
+- [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver)
+- [requestAnimationFrame](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame)
+- [querySelectorAll](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) with support for post CSS 2.1 selectors and `:scope` selectors.
+
+ECMA Script:
+
+- `Array.prototype.filter`
+- `Array.prototype.forEach`
+- `Array.prototype.indexOf`
+- `Array.prototype.join`
+- `Array.prototype.map`
+- `Array.prototype.splice`
+- `RegExp.prototype.exec`
+- `String.prototype.match`
+- `String.prototype.replace`
+- `String.prototype.split`
+
+## CORS
+
+⚠️ Applies to you if you load CSS from a different domain than the page.
+
+In this case the CSS is treated as untrusted and will not be made available to the JavaScript polyfill.
+The polyfill will not work without applying the correct configuration for CORS.
+
+Example :
+
+| page | css | CORS applies |
+| --- | --- | --- |
+| https://example.com/ | https://example.com/style.css | no |
+| https://example.com/ | https://other.com/style.css | yes |
+
+
+**You might see one of these error messages :**
+
+Chrome :
+
+> DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules
+
+Safari :
+
+> SecurityError: Not allowed to access cross-origin stylesheet
+
+Firefox :
+
+> DOMException: CSSStyleSheet.cssRules getter: Not allowed to access cross-origin stylesheet
+
+To resolve CORS errors you need to take two steps :
+
+- add an HTTP header `Access-Control-Allow-Origin: <your-value>` when serving your CSS file.
+- add `crossorigin="anonymous"` to the `<link rel="stylesheet">` tag for your CSS file.
+
+In a node server setting the HTTP header might look like this :
+
+```js
+// http://localhost:8080 is the domain of your page!
+res.setHeader('Access-Control-Allow-Origin', 'https://example.com');
+```
+
+You can also configure a wildcard but please be aware that this might be a security risk.
+It is better to only set the header for the domain you want to allow and only on the responses you want to allow.
+
+HTML might look like this :
+
+```html
+<link rel="stylesheet" href="https://example.com/styles.css" crossorigin="anonymous">
+```
+
+
+## How it works
+
+The [PostCSS Has Pseudo] clones rules containing `:has()`,
+replacing them with an alternative `[csstools-has-]` selector.
+
+```pcss
+.title:has(+ p) {
+	margin-bottom: 1.5rem;
 }
 
-section:not(:has(h1, h2, h3, h4, h5, h6)) {
-  background-color: gray;
+/* becomes */
+
+[csstools-has-1a-38-2x-38-30-2t-1m-2w-2p-37-14-17-w-34-15]:not(does-not-exist) {
+	margin-bottom: 1.5rem;
+}
+.title:has(+ p) {
+	margin-bottom: 1.5rem;
 }
 ```
 
-Next, the [JavaScript library](README-BROWSER.md) adds a `[:has]` attribute to
+Next, the [browser script](#browser) adds a `[:has]` attribute to
 elements otherwise matching `:has` natively.
 
 ```html
-<body :has(:focus)>
-  <input value="This element is focused">
-</body>
+<div class="title" [csstools-has-1a-38-2x-38-30-2t-1m-2w-2p-37-14-17-w-34-15]>
+	<h1>A title block</h1>
+	<p>With an extra paragraph</p>
+</div>
 ```
 
-[git-img]: https://img.shields.io/badge/support-chat-blue.svg
-[git-url]: https://gitter.im/postcss/postcss
-[npm-img]: https://img.shields.io/npm/v/css-has-pseudo.svg
+[cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test
+[css-url]: https://cssdb.org/#has-pseudo-class
+[discord]: https://discord.gg/bUadyRwkJS
 [npm-url]: https://www.npmjs.com/package/css-has-pseudo
 
-[CSS Has Pseudo]: https://github.com/csstools/postcss-plugins/tree/main/plugins/css-has-pseudo
-[Mutation Observer polyfill]: https://github.com/webmodules/mutation-observer
-[Selectors Level 4]: https://drafts.csswg.org/selectors-4/#has-pseudo
+[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 Has Pseudo]: https://github.com/csstools/postcss-plugins/tree/main/plugins/css-has-pseudo
+[Selectors Level 4]: https://www.w3.org/TR/selectors-4/#has-pseudo

package/dist/browser-global.js

@@ -1,117 +1,2 @@
-(function () {
-
-	/* global MutationObserver,requestAnimationFrame */
-	function cssHasPseudo(document) {
-	  var observedItems = []; // document.createAttribute() doesn't support `:` in the name. innerHTML does
-
-	  var attributeElement = document.createElement('x'); // walk all stylesheets to collect observed css rules
-
-	  [].forEach.call(document.styleSheets, walkStyleSheet);
-	  transformObservedItems(); // observe DOM modifications that affect selectors
-
-	  var mutationObserver = new MutationObserver(function (mutationsList) {
-	    mutationsList.forEach(function (mutation) {
-	      [].forEach.call(mutation.addedNodes || [], function (node) {
-	        // walk stylesheets to collect observed css rules
-	        if (node.nodeType === 1 && node.sheet) {
-	          walkStyleSheet(node.sheet);
-	        }
-	      }); // transform observed css rules
-
-	      cleanupObservedCssRules();
-	      transformObservedItems();
-	    });
-	  });
-	  mutationObserver.observe(document, {
-	    childList: true,
-	    subtree: true
-	  }); // observe DOM events that affect pseudo-selectors
-
-	  document.addEventListener('focus', transformObservedItems, true);
-	  document.addEventListener('blur', transformObservedItems, true);
-	  document.addEventListener('input', transformObservedItems); // transform observed css rules
-
-	  function transformObservedItems() {
-	    requestAnimationFrame(function () {
-	      observedItems.forEach(function (item) {
-	        var nodes = [];
-	        [].forEach.call(document.querySelectorAll(item.scopeSelector), function (element) {
-	          var nthChild = [].indexOf.call(element.parentNode.children, element) + 1;
-	          var relativeSelectors = item.relativeSelectors.map(function (relativeSelector) {
-	            return item.scopeSelector + ':nth-child(' + nthChild + ') ' + relativeSelector;
-	          }).join(); // find any relative :has element from the :scope element
-
-	          var relativeElement = element.parentNode.querySelector(relativeSelectors);
-	          var shouldElementMatch = item.isNot ? !relativeElement : relativeElement;
-
-	          if (shouldElementMatch) {
-	            // memorize the node
-	            nodes.push(element); // set an attribute with an irregular attribute name
-	            // document.createAttribute() doesn't support special characters
-
-	            attributeElement.innerHTML = '<x ' + item.attributeName + '>';
-	            element.setAttributeNode(attributeElement.children[0].attributes[0].cloneNode()); // trigger a style refresh in IE and Edge
-
-	            document.documentElement.style.zoom = 1;
-	            document.documentElement.style.zoom = null;
-	          }
-	        }); // remove the encoded attribute from all nodes that no longer match them
-
-	        item.nodes.forEach(function (node) {
-	          if (nodes.indexOf(node) === -1) {
-	            node.removeAttribute(item.attributeName); // trigger a style refresh in IE and Edge
-
-	            document.documentElement.style.zoom = 1;
-	            document.documentElement.style.zoom = null;
-	          }
-	        }); // update the
-
-	        item.nodes = nodes;
-	      });
-	    });
-	  } // remove any observed cssrules that no longer apply
-
-
-	  function cleanupObservedCssRules() {
-	    [].push.apply(observedItems, observedItems.splice(0).filter(function (item) {
-	      return item.rule.parentStyleSheet && item.rule.parentStyleSheet.ownerNode && document.documentElement.contains(item.rule.parentStyleSheet.ownerNode);
-	    }));
-	  } // walk a stylesheet to collect observed css rules
-
-
-	  function walkStyleSheet(styleSheet) {
-	    try {
-	      // walk a css rule to collect observed css rules
-	      [].forEach.call(styleSheet.cssRules || [], function (rule) {
-	        if (rule.selectorText) {
-	          // decode the selector text in all browsers to:
-	          // [1] = :scope, [2] = :not(:has), [3] = :has relative, [4] = :scope relative
-	          var selectors = decodeURIComponent(rule.selectorText.replace(/\\(.)/g, '$1')).match(/^(.*?)\[:(not-)?has\((.+?)\)\](.*?)$/);
-
-	          if (selectors) {
-	            var attributeName = ':' + (selectors[2] ? 'not-' : '') + 'has(' + // encode a :has() pseudo selector as an attribute name
-	            encodeURIComponent(selectors[3]).replace(/%3A/g, ':').replace(/%5B/g, '[').replace(/%5D/g, ']').replace(/%2C/g, ',') + ')';
-	            observedItems.push({
-	              rule: rule,
-	              scopeSelector: selectors[1],
-	              isNot: selectors[2],
-	              relativeSelectors: selectors[3].split(/\s*,\s*/),
-	              attributeName: attributeName,
-	              nodes: []
-	            });
-	          }
-	        } else {
-	          walkStyleSheet(rule);
-	        }
-	      });
-	    } catch (error) {
-	      /* do nothing and continue */
-	    }
-	  }
-	}
-
-	/* global self */
-	self.cssHasPseudo = cssHasPseudo;
-
-})();
+!function(){function e(e){if("csstools-has-"!==e.slice(0,13))return"";for(var t=(e=e.slice(13)).split("-"),r="",n=0;n<t.length;n++)r+=String.fromCharCode(parseInt(t[n],36));return r}function t(e){if(""===e)return"";for(var t,r="",n=0;n<e.length;n++)t=e.charCodeAt(n).toString(36),r+=0===n?t:"-"+t;return"csstools-has-"+r}!function(e){try{if(e.document.querySelector(":has(*, :does-not-exist, > *)"),e.document.querySelector(":has(:has(any))"),!e.document.querySelector(":has(:scope *)"))return}catch(e){}var t=d(e.Element.prototype.querySelector);e.Element.prototype.querySelector=function(e){return t.apply(this,arguments)};var r=d(e.Element.prototype.querySelectorAll);if(e.Element.prototype.querySelectorAll=function(e){return r.apply(this,arguments)},e.Element.prototype.matches){var n=d(e.Element.prototype.matches);e.Element.prototype.matches=function(e){return n.apply(this,arguments)}}if(e.Element.prototype.closest){var o=d(e.Element.prototype.closest);e.Element.prototype.closest=function(e){return o.apply(this,arguments)}}if("Document"in e&&"prototype"in e.Document){var i=d(e.Document.prototype.querySelector);e.Document.prototype.querySelector=function(e){return i.apply(this,arguments)};var s=d(e.Document.prototype.querySelectorAll);if(e.Document.prototype.querySelectorAll=function(e){return s.apply(this,arguments)},e.Document.prototype.matches){var c=d(e.Document.prototype.matches);e.Document.prototype.matches=function(e){return c.apply(this,arguments)}}if(e.Document.prototype.closest){var a=d(e.Document.prototype.closest);e.Document.prototype.closest=function(e){return a.apply(this,arguments)}}}function u(e){for(var t="",r=0,n=0,o=!1,i=!1,s=!1,c=!1,a=0;a<e.length;a++){var u=e[a];if(o)t+=u,o=!1;else switch(":has("!==t.toLowerCase()||c||(c=!0,r=a,t=""),u){case":":if(i){t+=u;continue}c||(t=""),t+=u;continue;case"(":c&&n++,t+=u;continue;case")":if(c){if(0===n)return{innerQuery:t,start:r,end:a-1};n--}t+=u;continue;case"\\":t+=u,o=!0;continue;case'"':case"'":if(i&&u===s){t+=u,i=!1;continue}t+=u,i=!0,s=u;continue;default:t+=u;continue}}return!1}function l(e,t){for(var r=[],n="",o=!1,i=!1,s=!1,c=0;c<e.length;c++){var a=e[c];if(o)n+=a,o=!1;else switch(":scope"!==n.toLowerCase()||/^[\w|\\]/.test(a||"")||(r.push(n.slice(0,n.length-6)),r.push("["+t+"]"),n=""),a){case":":if(i){n+=a;continue}r.push(n),n="",n+=a;continue;case"\\":n+=a,o=!0;continue;case'"':case"'":if(i&&a===s){n+=a,i=!1;continue}n+=a,i=!0,s=a;continue;default:n+=a;continue}}return 0===r.length?e:r.join("")+n}function f(e){for(var t,r,n=[],o="",i=!1,s=!1,c=!1,a=!1,u=0,l=0;l<e.length;l++){var f=e[l];if(i)o+=f,i=!1;else switch(f){case",":if(s){o+=f;continue}if(u>0){o+=f;continue}n.push(o),o="";continue;case"\\":o+=f,i=!0;continue;case'"':case"'":if(s&&f===c){o+=f,s=!1;continue}o+=f,s=!0,c=f;continue;case"(":case")":case"[":case"]":if(s){o+=f;continue}if(t=f,"("===(r=a)&&")"===t||"["===r&&"]"===t){o+=f,0===--u&&(a=!1);continue}if(f===a){o+=f,u++;continue}o+=f,u++,a=f;continue;default:o+=f;continue}}return n.push(o),n}function p(e,t,r){var n=u(e);if(!n)return e;if(t)return!1;var o=n.innerQuery,i="q-has"+(Math.floor(9e6*Math.random())+1e6),s="["+i+"]",c=e;if(n.innerQuery.toLowerCase().indexOf(":has(")>-1){for(var a=f(n.innerQuery),l=[],h=0;h<a.length;h++){var d=a[h];p(d,!0,(function(){}))?l.push(d):l.push(":not(*)")}var m=c.substring(0,n.start-5),y=c.substring(n.end+2);return m+l.join(", ")+y}m=c.substring(0,n.start-5),y=c.substring(n.end+2);if(c=m+s+y,r(o,i),c.toLowerCase().indexOf(":has(")>-1){var v=p(c,!1,r);if(v)return v}return c}function h(e,t){if("setAttribute"in e&&"querySelector"in e&&t(e),e.hasChildNodes())for(var r=e.childNodes,n=0;n<r.length;++n)h(r[n],t)}function d(t){return function(r){if(-1===r.toLowerCase().indexOf(":has(")||!u(r))return t.apply(this,arguments);var n;if("getRootNode"in this)n=this.getRootNode();else for(var o=this;o;)n=o,o=o.parentNode;var i=this;i===e.document&&(i=e.document.documentElement);var s="q-has-scope"+(Math.floor(9e6*Math.random())+1e6);i.setAttribute(s,"");try{r=l(r,s);var c=[s],a=p(r,!1,(function(e,t){c.push(t);for(var r=f(e),o=0;o<r.length;o++){var i=r[o].trim(),s=i;s=">"===i[0]||"+"===i[0]||"~"===i[0]?i.slice(1).trim():":scope "+i;try{h(n,(function(e){if(e.querySelector(s))switch(i[0]){case"~":case"+":for(var r=e.childNodes,n=0;n<r.length;n++){var o=r[n];if("setAttribute"in o){var c="q-has-id"+(Math.floor(9e6*Math.random())+1e6);o.setAttribute(c,""),e.querySelector(":scope ["+c+"] "+i)&&o.setAttribute(t,""),o.removeAttribute(c)}}break;case">":c="q-has-id"+(Math.floor(9e6*Math.random())+1e6);e.setAttribute(c,""),e.querySelector(":scope["+c+"] "+i)&&e.setAttribute(t,""),e.removeAttribute(c);break;default:e.setAttribute(t,"")}}))}catch(e){}}}));arguments[0]=a;var d=t.apply(this,arguments);if(i.removeAttribute(s),c.length>0){for(var m=[],y=0;y<c.length;y++)m.push("["+c[y]+"]");for(var v=e.document.querySelectorAll(m.join(",")),b=0;b<v.length;b++)for(var g=v[b],E=0;E<c.length;E++)g.removeAttribute(c[E])}return d}catch(t){if(i.removeAttribute(s),c.length>0){for(m=[],y=0;y<c.length;y++)m.push("["+c[y]+"]");for(v=e.document.querySelectorAll(m.join(",")),b=0;b<v.length;b++)for(g=v[b],E=0;E<c.length;E++)g.removeAttribute(c[E])}throw t}}}}(self),self.cssHasPseudo=function(r,n){n||(n={}),(n={hover:!!n.hover||!1,debug:!!n.debug||!1,observedAttributes:n.observedAttributes||[],forcePolyfill:!!n.forcePolyfill||!1}).mustPolyfill=n.forcePolyfill||!function(e){try{if(e.querySelector(":has(*, :does-not-exist, > *)"),e.querySelector(":has(:has(any))"),e.querySelector(":has(:scope *)"))return!1;if(!("CSS"in self)||!("supports"in self.CSS)||!self.CSS.supports(":has(any)"))return!1}catch(e){return!1}return!0}(r),Array.isArray(n.observedAttributes)||(n.observedAttributes=[]),n.observedAttributes=n.observedAttributes.filter((function(e){return"string"==typeof e})),n.observedAttributes=n.observedAttributes.concat(["accept","accept-charset","accesskey","action","align","allow","alt","async","autocapitalize","autocomplete","autofocus","autoplay","buffered","capture","challenge","charset","checked","cite","class","code","codebase","cols","colspan","content","contenteditable","contextmenu","controls","coords","crossorigin","csp","data","datetime","decoding","default","defer","dir","dirname","disabled","download","draggable","enctype","enterkeyhint","for","form","formaction","formenctype","formmethod","formnovalidate","formtarget","headers","hidden","high","href","hreflang","http-equiv","icon","id","importance","integrity","intrinsicsize","inputmode","ismap","itemprop","keytype","kind","label","lang","language","list","loop","low","manifest","max","maxlength","minlength","media","method","min","multiple","muted","name","novalidate","open","optimum","pattern","ping","placeholder","poster","preload","radiogroup","readonly","referrerpolicy","rel","required","reversed","rows","rowspan","sandbox","scope","scoped","selected","shape","size","sizes","slot","span","spellcheck","src","srcdoc","srclang","srcset","start","step","summary","tabindex","target","title","translate","type","usemap","value","width","wrap"]);var o=[],i=r.createElement("x");if([].forEach.call(r.styleSheets,u),n.mustPolyfill){if(a(),"MutationObserver"in self)new MutationObserver((function(e){e.forEach((function(e){[].forEach.call(e.addedNodes||[],(function(e){1===e.nodeType&&e.sheet&&u(e.sheet)})),[].push.apply(o,o.splice(0).filter((function(e){return e.rule.parentStyleSheet&&e.rule.parentStyleSheet.ownerNode&&r.documentElement.contains(e.rule.parentStyleSheet.ownerNode)}))),a()}))})).observe(r,{childList:!0,subtree:!0,attributes:!0,attributeFilter:n.observedAttributes});if(r.addEventListener("focus",a,!0),r.addEventListener("blur",a,!0),r.addEventListener("input",a),r.addEventListener("change",a,!0),n.hover&&("onpointerenter"in r?(r.addEventListener("pointerenter",a,!0),r.addEventListener("pointerleave",a,!0)):(r.addEventListener("mouseover",a,!0),r.addEventListener("mouseout",a,!0))),"defineProperty"in Object&&"getOwnPropertyDescriptor"in Object&&"hasOwnProperty"in Object)try{var s=function(e,t){if(e.hasOwnProperty(t)){var r=Object.getOwnPropertyDescriptor(e,t);r&&r.configurable&&"set"in r&&Object.defineProperty(e,t,{configurable:r.configurable,enumerable:r.enumerable,get:function(){return r.get.apply(this,arguments)},set:function(){r.set.apply(this,arguments);try{a()}catch(e){}}})}};"HTMLElement"in self&&HTMLElement.prototype&&s(HTMLElement.prototype,"disabled"),["checked","selected","readOnly","required"].forEach((function(e){["HTMLButtonElement","HTMLFieldSetElement","HTMLInputElement","HTMLMeterElement","HTMLOptGroupElement","HTMLOptionElement","HTMLOutputElement","HTMLProgressElement","HTMLSelectElement","HTMLTextAreaElement"].forEach((function(t){t in self&&self[t].prototype&&s(self[t].prototype,e)}))}))}catch(e){n.debug&&console.error(e)}var c=!1}function a(){c&&cancelAnimationFrame(c),c=requestAnimationFrame((function(){o.forEach((function(e){var t=[],o=[];try{o=r.querySelectorAll(e.selector)}catch(e){return void(n.debug&&console.error(e))}[].forEach.call(o,(function(n){t.push(n),i.innerHTML="<x "+e.attributeName+">",n.setAttributeNode(i.children[0].attributes[0].cloneNode()),r.documentElement.style.zoom=1,r.documentElement.style.zoom=null})),e.nodes.forEach((function(n){-1===t.indexOf(n)&&(n.removeAttribute(e.attributeName),r.documentElement.style.zoom=1,r.documentElement.style.zoom=null)})),e.nodes=t}))}))}function u(r){try{[].forEach.call(r.cssRules||[],(function(r){if(r.selectorText){r.selectorText=r.selectorText.replace(/\.js-has-pseudo\s/g,"");try{var i=function(t){for(var r,n,o=[],i=0,s=!1,c=!1,a=0;a<t.length;a++){var u=t[a];switch(u){case"[":if(s){r+=u;continue}0===i?r="":r+=u,i++;continue;case"]":if(s){r+=u;continue}if(0==--i){var l=e(r);c&&o.push(l)}else r+=u;continue;case"\\":r+=t[a],r+=t[a+1],a++;continue;case'"':case"'":if(s&&u===n){s=!1;continue}if(s){r+=u;continue}s=!0,n=u;continue;default:""===r&&1===i&&"csstools-has-"===t.slice(a,a+13)&&(c=!0),r+=u;continue}}for(var f=[],p=0;p<o.length;p++)-1===f.indexOf(o[p])&&f.push(o[p]);return f}(r.selectorText.toString());if(0===i.length)return;if(!n.mustPolyfill)return void r.deleteRule();for(var s=0;s<i.length;s++){var c=i[s];o.push({rule:r,selector:c,attributeName:t(c),nodes:[]})}}catch(e){n.debug&&console.error(e)}}else u(r)}))}catch(e){n.debug&&console.error(e)}}}}();
 //# sourceMappingURL=browser-global.js.map