css-prefers-color-scheme 6.0.2 → 7.0.1

package/CHANGELOG.md

@@ -1,5 +1,61 @@
 # Changes to Prefers Color Scheme
 
+### 7.0.1 (August 23, 2022)
+
+- Fix: assign global browser polyfill to `window`, `self` or a blank object.
+
+### 7.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
+- Breaking: remove `color-depth` queries fallback
+- Breaking: remove 'no-preference' support as this was dropped from the spec
+- Breaking: remove old global object
+- 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-prefers-color-scheme/browser"></script>
++ <script src="https://unpkg.com/css-prefers-color-scheme/dist/browser-global.js"></script>
+```
+
+```diff
+- <script src="https://unpkg.com/css-prefers-color-scheme/browser.min"></script>
++ <script src="https://unpkg.com/css-prefers-color-scheme/dist/browser-global.js"></script>
+```
+
+##### Use `prefersColorSchemeInit` to initialize the polyfill in the browser.
+
+```diff
+- initPrefersColorScheme()
++ prefersColorSchemeInit()
+```
+
+##### Remove `@media (prefer-color-scheme: no-preference)` from your CSS.
+
+`@media (prefers-color-scheme: no-preference)` was removed from the specification and should be equivalent to not having any media query.
+
+```diff
+- @media (prefers-color-scheme: no-preference) {
+- 	.some-selector {
+- 		/* your styles ... */
+- 	}
+- }
++ .some-selector {
++ 	/* your styles ... */
++ }
+```
+
+### 6.0.3 (January 31, 2022)
+
+- Fix `preserve: false` option.
+
 ### 6.0.2 (January 2, 2022)
 
 - Removed Sourcemaps from package tarball.

package/README.md

@@ -1,96 +1,329 @@
-# Prefers Color Scheme [<img src="https://jonathantneal.github.io/js-logo.svg" alt="" width="90" height="90" align="right">][Prefers Color Scheme]
+# Prefers Color Scheme [<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]
-[![Build Status][cli-img]][cli-url]
-[![Support Chat][git-img]][git-url]
+[<img alt="npm version" src="https://img.shields.io/npm/v/css-prefers-color-scheme.svg" height="20">][npm-url] [<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/prefers-color-scheme-query.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]
 
-[Prefers Color Scheme] lets you use light and dark color schemes in all
-browsers, following the [Media Queries] specification.
+[Prefers Color Scheme] lets you use light and dark color schemes in all browsers, following the [Media Queries] specification.
 
-[!['Can I use' table](https://caniuse.bitsofco.de/image/prefers-color-scheme.png)](https://caniuse.com/#feat=prefers-color-scheme)
+```pcss
+@media (prefers-color-scheme: dark) {
+	:root {
+		--site-bgcolor: #1b1b1b;
+		--site-color: #fff;
+	}
+}
+
+@media (prefers-color-scheme: light) {
+	:root {
+		--site-bgcolor: #fff;
+		--site-color: #222;
+	}
+}
+
+/* becomes */
+
+@media (color: 48842621) {
+	:root {
+		--site-bgcolor: #1b1b1b;
+		--site-color: #fff;
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--site-bgcolor: #1b1b1b;
+		--site-color: #fff;
+	}
+}
+
+@media (color: 70318723) {
+	:root {
+		--site-bgcolor: #fff;
+		--site-color: #222;
+	}
+}
+
+@media (prefers-color-scheme: light) {
+	:root {
+		--site-bgcolor: #fff;
+		--site-color: #222;
+	}
+}
+```
 
 ## Usage
 
-From the command line, transform CSS files that use `prefers-color-scheme`
-media queries:
+Add [Prefers Color Scheme] to your project:
 
 ```bash
-npx css-prefers-color-scheme SOURCE.css TRANSFORMED.css
+npm install postcss css-prefers-color-scheme --save-dev
+```
+
+Use it as a [PostCSS] plugin:
+
+```js
+const postcss = require('postcss');
+const prefersColorScheme = require('css-prefers-color-scheme');
+
+postcss([
+	prefersColorScheme(/* pluginOptions */)
+]).process(YOUR_CSS /*, processOptions */);
+```
+
+[Prefers Color Scheme] runs in all Node environments, with special
+instructions for:
+
+| [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) |
+| --- | --- | --- | --- | --- | --- |
+
+## Options
+
+### preserve
+
+The `preserve` option determines whether the original notation
+is preserved. By default, it is preserved.
+
+```js
+prefersColorScheme({ preserve: false })
 ```
 
-Next, use that transformed CSS with this script:
+```pcss
+@media (prefers-color-scheme: dark) {
+	:root {
+		--site-bgcolor: #1b1b1b;
+		--site-color: #fff;
+	}
+}
+
+@media (prefers-color-scheme: light) {
+	:root {
+		--site-bgcolor: #fff;
+		--site-color: #222;
+	}
+}
+
+/* becomes */
+
+@media (color: 48842621) {
+	:root {
+		--site-bgcolor: #1b1b1b;
+		--site-color: #fff;
+	}
+}
+
+@media (color: 70318723) {
+	:root {
+		--site-bgcolor: #fff;
+		--site-color: #222;
+	}
+}
+```
+
+## Browser
+
+```js
+// initialize prefersColorScheme (applies the current OS color scheme, if available)
+import prefersColorSchemeInit from 'css-prefers-color-scheme/browser';
+const prefersColorScheme = prefersColorSchemeInit();
+
+// apply "dark" queries (you can also apply "light")
+prefersColorScheme.scheme = 'dark';
+```
+
+or
 
 ```html
-<link rel="stylesheet" href="TRANSFORMED.css">
-<script src="https://unpkg.com/css-prefers-color-scheme/dist/browser-global.js"></script>
-<script>
-colorScheme = initPrefersColorScheme('dark') // apply "dark" queries (you can change it afterward, too)
-</script>
+<!-- When using a CDN url you will have to manually update the version number -->
+<script src="https://unpkg.com/css-prefers-color-scheme@7.0.1/dist/browser-global.js"></script>
+<script>prefersColorSchemeInit()</script>
 ```
 
-⚠️ Please use a versioned url, like this : `https://unpkg.com/css-prefers-color-scheme@6.0.0/dist/browser-global.js`
+⚠️ Please use a versioned url, like this : `https://unpkg.com/css-prefers-color-scheme@7.0.1/dist/browser-global.js`
 Without the version, you might unexpectedly get a new major version of the library with breaking changes.
 
-⚠️ 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.
+[Prefers Color Scheme] works in all major browsers, including Safari 6+ and
+Internet Explorer 9+ without any additional polyfills.
 
-## Usage
+To maintain compatibility with browsers supporting `prefers-color-scheme`, the
+library will remove `prefers-color-scheme` media queries in favor of
+cross-browser compatible `color` media queries. This ensures a seamless
+experience, even when JavaScript is unable to run.
 
-- First, transform `prefers-color-scheme` queries using this
-  [PostCSS plugin](README-POSTCSS.md).
-- Next, apply light and dark color schemes everywhere using this
-  [browser script](README-BROWSER.md).
+### Browser Usage
 
----
+Use [Prefers Color Scheme] to activate your `prefers-color-scheme` queries:
 
-## How does it work?
+```js
+import prefersColorSchemeInit from 'css-prefers-color-scheme/browser';
+const prefersColorScheme = prefersColorSchemeInit();
+```
+
+By default, the current OS color scheme is applied if your browser supports it.
+Otherwise, the light color scheme is applied. You may override this by passing
+in a color scheme.
+
+```js
+import prefersColorSchemeInit from 'css-prefers-color-scheme/browser';
+const prefersColorScheme = prefersColorSchemeInit('dark');
+```
+
+The `prefersColorScheme` object returns the following properties — `scheme`,
+`hasNativeSupport`, `onChange`, and `removeListener`.
+
+#### scheme
+
+The `scheme` property returns the currently preferred color scheme, and it can
+be changed.
+
+```js
+import prefersColorSchemeInit from 'css-prefers-color-scheme/browser';
+const prefersColorScheme = prefersColorSchemeInit();
 
-_This plugin used to work with `color-index` as detailed here : [color-index](https://github.com/csstools/css-prefers-color-scheme#how-does-it-work)._
-_This is deprecated but will continue to work for now._
-_`color` has better browser support and enables complex media queries._
+// log the preferred color scheme
+console.log(prefersColorScheme.scheme);
+
+// apply "dark" queries
+prefersColorScheme.scheme = 'dark';
+```
+
+#### hasNativeSupport
+
+The `hasNativeSupport` boolean represents whether `prefers-color-scheme` is
+supported by the browser.
+
+#### onChange
+
+The optional `onChange` function is run when the preferred color scheme is
+changed, either from the OS or manually.
+
+#### removeListener
+
+The `removeListener` function removes the native `prefers-color-scheme`
+listener, which may or may not be applied, depending on your browser support.
+This is provided to give you complete control over plugin cleanup.
+
+#### debug
+
+If styles are not applied you can enable debug mode to log exceptions.
+
+```js
+import prefersColorSchemeInit from 'css-prefers-color-scheme/browser';
+const prefersColorScheme = prefersColorSchemeInit('light', { debug: true });
+```
+
+```html
+<script src="https://unpkg.com/css-prefers-color-scheme@7.0.1/dist/browser-global.js"></script>
+<script>prefersColorSchemeInit('light', { debug: true })</script>
+```
+
+
+### Browser Dependencies
+
+Web API's:
+
+- [Window.matchMedia](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia)
+
+ECMA Script:
+
+- `Object.defineProperty`
+- `Array.prototype.forEach`
+- `Array.prototype.indexOf`
+- `RegExp.prototype.exec`
+- `String.prototype.match`
+- `String.prototype.replace`
+
+## 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 does it work?
 
-[Prefers Color Scheme] uses a [PostCSS plugin](README-POSTCSS.md) to transform
-`prefers-color-scheme` queries into `color` queries. This changes
-`prefers-color-scheme: dark` into `(color: 48842621)`,
-`prefers-color-scheme: light` into `(color: 70318723)`, and
-`prefers-color-scheme: no-preference` into `(color: 22511989)`.
+[Prefers Color Scheme] is a [PostCSS] plugin that transforms `prefers-color-scheme` queries into `color` queries.
+This changes `prefers-color-scheme: dark` into `(color: 48842621)` and `prefers-color-scheme: light` into `(color: 70318723)`.
 
 The frontend receives these `color` queries, which are understood in all
 major browsers going back to Internet Explorer 9.
 However, since browsers can only have a reasonably small number of bits per color,
 our color scheme values are ignored.
 
-[Prefers Color Scheme] uses a [browser script](README-BROWSER.md) to change
+[Prefers Color Scheme] uses a [browser script](#browser) to change
 `(color: 48842621)` queries into `(max-color: 48842621)` in order to
 activate “dark mode” specific CSS, and it changes `(color: 70318723)` queries
 into `(max-color: 48842621)` to activate “light mode” specific CSS.
 
 ```css
 @media (color: 70318723) { /* prefers-color-scheme: light */
-  body {
-    background-color: white;
-    color: black;
-  }
+	body {
+		background-color: white;
+		color: black;
+	}
 }
 ```
 
 Since these media queries are accessible to `document.styleSheet`, no CSS
 parsing is required.
 
-## Why does the fallback work this way?
+### Why does the fallback work this way?
 
 The value of `48` is chosen for dark mode because it is the keycode for `0`,
 the hexidecimal value of black. Likewise, `70` is chosen for light mode because
 it is the keycode for `f`, the hexidecimal value of white.
 These are suffixed with a random large number.
 
-[cli-img]: https://github.com/csstools/postcss-plugins/workflows/test/badge.svg
 [cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test
-[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-prefers-color-scheme.svg
+[css-url]: https://cssdb.org/#prefers-color-scheme-query
+[discord]: https://discord.gg/bUadyRwkJS
 [npm-url]: https://www.npmjs.com/package/css-prefers-color-scheme
 
+[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
 [Prefers Color Scheme]: https://github.com/csstools/postcss-plugins/tree/main/plugins/css-prefers-color-scheme
-[Media Queries]: https://drafts.csswg.org/mediaqueries-5/#descdef-media-prefers-color-scheme
+[Media Queries]: https://www.w3.org/TR/mediaqueries-5/#prefers-color-scheme

package/dist/browser-global.js

@@ -1,100 +1,2 @@
-(function () {
-
-	/* global document,window,matchMedia */
-	var colorIndexRegExp = /((?:not )?all and )?(\(color-index: *(22|48|70)\))/i;
-	var prefersColorSchemeRegExp = /prefers-color-scheme:/i;
-
-	var prefersColorSchemeInit = function prefersColorSchemeInit(initialColorScheme) {
-	  var mediaQueryString = '(prefers-color-scheme: dark)';
-	  var mediaQueryList = window.matchMedia && matchMedia(mediaQueryString);
-	  var hasNativeSupport = mediaQueryList && mediaQueryList.media === mediaQueryString;
-
-	  var mediaQueryListener = function mediaQueryListener() {
-	    set(mediaQueryList.matches ? 'dark' : 'light');
-	  };
-
-	  var removeListener = function removeListener() {
-	    if (mediaQueryList) {
-	      mediaQueryList.removeListener(mediaQueryListener);
-	    }
-	  };
-
-	  var set = function set(colorScheme) {
-	    if (colorScheme !== currentColorScheme) {
-	      currentColorScheme = colorScheme;
-
-	      if (typeof result.onChange === 'function') {
-	        result.onChange();
-	      }
-	    }
-
-	    [].forEach.call(document.styleSheets || [], function (styleSheet) {
-	      // cssRules is a live list. Converting to an Array first.
-	      var rules = [];
-	      [].forEach.call(styleSheet.cssRules || [], function (cssRule) {
-	        rules.push(cssRule);
-	      });
-	      rules.forEach(function (cssRule) {
-	        var colorSchemeMatch = prefersColorSchemeRegExp.test(Object(cssRule.media).mediaText);
-
-	        if (colorSchemeMatch) {
-	          var index = [].indexOf.call(cssRule.parentStyleSheet.cssRules, cssRule);
-	          cssRule.parentStyleSheet.deleteRule(index);
-	        } else {
-	          var colorIndexMatch = (Object(cssRule.media).mediaText || '').match(colorIndexRegExp);
-
-	          if (colorIndexMatch) {
-	            // Old style which has poor browser support and can't handle complex media queries.
-	            cssRule.media.mediaText = ((/^dark$/i.test(colorScheme) ? colorIndexMatch[3] === '48' : /^light$/i.test(colorScheme) ? colorIndexMatch[3] === '70' : colorIndexMatch[3] === '22') ? 'not all and ' : '') + cssRule.media.mediaText.replace(colorIndexRegExp, '$2');
-	          } else {
-	            // New style which supports complex media queries.
-	            var colorDepthMatch = (Object(cssRule.media).mediaText || '').match(/\( *(?:color|max-color): *(48842621|70318723|22511989) *\)/i);
-
-	            if (colorDepthMatch && colorDepthMatch.length > 1) {
-	              if (/^dark$/i.test(colorScheme) && (colorDepthMatch[1] === '48842621' || colorDepthMatch[1] === '22511989')) {
-	                // No preference or preferred is dark and rule is dark.
-	                cssRule.media.mediaText = cssRule.media.mediaText.replace(/\( *color: *(?:48842621|70318723) *\)/i, "(max-color: " + colorDepthMatch[1] + ")");
-	              } else if (/^light$/i.test(colorScheme) && (colorDepthMatch[1] === '70318723' || colorDepthMatch[1] === '22511989')) {
-	                // No preference or preferred is light and rule is light.
-	                cssRule.media.mediaText = cssRule.media.mediaText.replace(/\( *color: *(?:48842621|22511989) *\)/i, "(max-color: " + colorDepthMatch[1] + ")");
-	              } else {
-	                cssRule.media.mediaText = cssRule.media.mediaText.replace(/\( *max-color: *(?:48842621|70318723|22511989) *\)/i, "(color: " + colorDepthMatch[1] + ")");
-	              }
-	            }
-	          }
-	        }
-	      });
-	    });
-	  };
-
-	  var result = Object.defineProperty({
-	    hasNativeSupport: hasNativeSupport,
-	    removeListener: removeListener
-	  }, 'scheme', {
-	    get: function get() {
-	      return currentColorScheme;
-	    },
-	    set: set
-	  }); // initialize the color scheme using the provided value, the system value, or light
-
-	  var currentColorScheme = initialColorScheme || (mediaQueryList && mediaQueryList.matches ? 'dark' : 'light');
-	  set(currentColorScheme); // listen for system changes
-
-	  if (mediaQueryList) {
-	    if ('addEventListener' in mediaQueryList) {
-	      mediaQueryList.addEventListener('change', mediaQueryListener);
-	    } else {
-	      mediaQueryList.addListener(mediaQueryListener);
-	    }
-	  }
-
-	  return result;
-	};
-
-	/* global self */
-	self.prefersColorSchemeInit = prefersColorSchemeInit; // Legacy : there used to be a rollup config that exposed this function under a different name.
-
-	self.initPrefersColorScheme = prefersColorSchemeInit;
-
-})();
+!function(){var e=/prefers-color-scheme:/i,t=function(t,a){a||(a={}),a={debug:!!a.debug||!1};var i="(prefers-color-scheme: dark)",o="matchMedia"in window&&window.matchMedia(i),r=o&&o.media===i,c=function(){n(o&&o.matches?"dark":"light")},n=function(t){"dark"!==t&&"light"!==t&&(t=r&&o.matches?"dark":"light"),t!==l&&(l=t,"function"==typeof d.onChange&&d.onChange()),[].forEach.call(document.styleSheets||[],(function(i){try{var o=[];[].forEach.call(i.cssRules||[],(function(e){o.push(e)})),o.forEach((function(a){if(e.test(Object(a.media).mediaText)){var i=[].indexOf.call(a.parentStyleSheet.cssRules,a);a.parentStyleSheet.deleteRule(i)}else{var o=(Object(a.media).mediaText||"").match(/\( *(?:color|max-color): *(48842621|70318723) *\)/i);o&&o.length>1&&("dark"===t&&"48842621"===o[1]?a.media.mediaText=a.media.mediaText.replace(/\( *color: *(?:48842621) *\)/i,"(max-color: "+o[1]+")"):"light"===t&&"70318723"===o[1]?a.media.mediaText=a.media.mediaText.replace(/\( *color: *(?:70318723) *\)/i,"(max-color: "+o[1]+")"):a.media.mediaText=a.media.mediaText.replace(/\( *max-color: *(?:48842621|70318723) *\)/i,"(color: "+o[1]+")"))}}))}catch(e){a.debug&&console.error(e)}}))},d=Object.defineProperty({hasNativeSupport:r,removeListener:function(){o&&o.removeListener(c)}},"scheme",{get:function(){return l},set:n}),l=t||(o&&o.matches?"dark":"light");return n(l),o&&("addEventListener"in o?o.addEventListener("change",c):o.addListener(c)),d};("object"==typeof window&&window||"object"==typeof self&&self||{}).prefersColorSchemeInit=t}();
 //# sourceMappingURL=browser-global.js.map

package/dist/browser-global.js.map

@@ -1 +1 @@
-{"version":3,"file":"browser-global.js","sources":["../src/browser.js","../src/browser-global.js"],"sourcesContent":["/* global document,window,matchMedia */\nconst colorIndexRegExp = /((?:not )?all and )?(\\(color-index: *(22|48|70)\\))/i;\nconst prefersColorSchemeRegExp = /prefers-color-scheme:/i;\n\nconst prefersColorSchemeInit = initialColorScheme => {\n\tconst mediaQueryString = '(prefers-color-scheme: dark)';\n\tconst mediaQueryList = window.matchMedia && matchMedia(mediaQueryString);\n\tconst hasNativeSupport = mediaQueryList && mediaQueryList.media === mediaQueryString;\n\tconst mediaQueryListener = () => {\n\t\tset(mediaQueryList.matches ? 'dark' : 'light');\n\t};\n\tconst removeListener = () => {\n\t\tif (mediaQueryList) {\n\t\t\tmediaQueryList.removeListener(mediaQueryListener);\n\t\t}\n\t};\n\tconst set = colorScheme => {\n\t\tif (colorScheme !== currentColorScheme) {\n\t\t\tcurrentColorScheme = colorScheme;\n\n\t\t\tif (typeof result.onChange === 'function') {\n\t\t\t\tresult.onChange();\n\t\t\t}\n\t\t}\n\n\t\t[].forEach.call(document.styleSheets || [], styleSheet => {\n\n\t\t\t// cssRules is a live list. Converting to an Array first.\n\t\t\tconst rules = [];\n\t\t\t[].forEach.call(styleSheet.cssRules || [], cssRule => {\n\t\t\t\trules.push(cssRule);\n\t\t\t});\n\n\t\t\trules.forEach(cssRule => {\n\t\t\t\tconst colorSchemeMatch = prefersColorSchemeRegExp.test(Object(cssRule.media).mediaText);\n\n\t\t\t\tif (colorSchemeMatch) {\n\t\t\t\t\tconst index = [].indexOf.call(cssRule.parentStyleSheet.cssRules, cssRule);\n\t\t\t\t\tcssRule.parentStyleSheet.deleteRule(index);\n\t\t\t\t} else {\n\t\t\t\t\tconst colorIndexMatch = (Object(cssRule.media).mediaText || '').match(colorIndexRegExp);\n\n\t\t\t\t\tif (colorIndexMatch) {\n\t\t\t\t\t\t// Old style which has poor browser support and can't handle complex media queries.\n\t\t\t\t\t\tcssRule.media.mediaText = (\n\t\t\t\t\t\t\t(/^dark$/i.test(colorScheme)\n\t\t\t\t\t\t\t\t? colorIndexMatch[3] === '48'\n\t\t\t\t\t\t\t\t: /^light$/i.test(colorScheme)\n\t\t\t\t\t\t\t\t\t? colorIndexMatch[3] === '70'\n\t\t\t\t\t\t\t\t\t: colorIndexMatch[3] === '22')\n\t\t\t\t\t\t\t\t? 'not all and '\n\t\t\t\t\t\t\t\t: ''\n\t\t\t\t\t\t) + cssRule.media.mediaText.replace(colorIndexRegExp, '$2');\n\t\t\t\t\t} else {\n\t\t\t\t\t\t// New style which supports complex media queries.\n\t\t\t\t\t\tconst colorDepthMatch = (Object(cssRule.media).mediaText || '').match(/\\( *(?:color|max-color): *(48842621|70318723|22511989) *\\)/i);\n\t\t\t\t\t\tif (colorDepthMatch && colorDepthMatch.length > 1) {\n\t\t\t\t\t\t\tif (/^dark$/i.test(colorScheme) && (colorDepthMatch[1] === '48842621' || colorDepthMatch[1] === '22511989')) {\n\t\t\t\t\t\t\t\t// No preference or preferred is dark and rule is dark.\n\t\t\t\t\t\t\t\tcssRule.media.mediaText = cssRule.media.mediaText.replace(/\\( *color: *(?:48842621|70318723) *\\)/i, `(max-color: ${colorDepthMatch[1]})`);\n\t\t\t\t\t\t\t} else if (/^light$/i.test(colorScheme) && (colorDepthMatch[1] === '70318723' || colorDepthMatch[1] === '22511989')) {\n\t\t\t\t\t\t\t\t// No preference or preferred is light and rule is light.\n\t\t\t\t\t\t\t\tcssRule.media.mediaText = cssRule.media.mediaText.replace(/\\( *color: *(?:48842621|22511989) *\\)/i, `(max-color: ${colorDepthMatch[1]})`);\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tcssRule.media.mediaText = cssRule.media.mediaText.replace(/\\( *max-color: *(?:48842621|70318723|22511989) *\\)/i, `(color: ${colorDepthMatch[1]})`);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t});\n\t\t});\n\t};\n\tconst result = Object.defineProperty(\n\t\t{ hasNativeSupport, removeListener },\n\t\t'scheme',\n\t\t{ get: () => currentColorScheme, set },\n\t);\n\n\t// initialize the color scheme using the provided value, the system value, or light\n\tlet currentColorScheme = initialColorScheme || (mediaQueryList && mediaQueryList.matches ? 'dark' : 'light');\n\n\tset(currentColorScheme);\n\n\t// listen for system changes\n\tif (mediaQueryList) {\n\t\tif ('addEventListener' in mediaQueryList) {\n\t\t\tmediaQueryList.addEventListener('change', mediaQueryListener);\n\t\t} else {\n\t\t\tmediaQueryList.addListener(mediaQueryListener);\n\t\t}\n\t}\n\n\treturn result;\n};\n\nexport default prefersColorSchemeInit;\n","/* global self */\nimport { default as prefersColorSchemeInit } from './browser';\nself.prefersColorSchemeInit = prefersColorSchemeInit;\n\n// Legacy : there used to be a rollup config that exposed this function under a different name.\nself.initPrefersColorScheme = prefersColorSchemeInit;\n"],"names":["colorIndexRegExp","prefersColorSchemeRegExp","prefersColorSchemeInit","initialColorScheme","mediaQueryString","mediaQueryList","window","matchMedia","hasNativeSupport","media","mediaQueryListener","set","matches","removeListener","colorScheme","currentColorScheme","result","onChange","forEach","call","document","styleSheets","styleSheet","rules","cssRules","cssRule","push","colorSchemeMatch","test","Object","mediaText","index","indexOf","parentStyleSheet","deleteRule","colorIndexMatch","match","replace","colorDepthMatch","length","defineProperty","get","addEventListener","addListener","self","initPrefersColorScheme"],"mappings":";;CAAA;CACA,IAAMA,gBAAgB,GAAG,qDAAzB;CACA,IAAMC,wBAAwB,GAAG,wBAAjC;;CAEA,IAAMC,sBAAsB,GAAG,SAAzBA,sBAAyB,CAAAC,kBAAkB,EAAI;CACpD,MAAMC,gBAAgB,GAAG,8BAAzB;CACA,MAAMC,cAAc,GAAGC,MAAM,CAACC,UAAP,IAAqBA,UAAU,CAACH,gBAAD,CAAtD;CACA,MAAMI,gBAAgB,GAAGH,cAAc,IAAIA,cAAc,CAACI,KAAf,KAAyBL,gBAApE;;CACA,MAAMM,kBAAkB,GAAG,SAArBA,kBAAqB,GAAM;CAChCC,IAAAA,GAAG,CAACN,cAAc,CAACO,OAAf,GAAyB,MAAzB,GAAkC,OAAnC,CAAH;CACA,GAFD;;CAGA,MAAMC,cAAc,GAAG,SAAjBA,cAAiB,GAAM;CAC5B,QAAIR,cAAJ,EAAoB;CACnBA,MAAAA,cAAc,CAACQ,cAAf,CAA8BH,kBAA9B;CACA;CACD,GAJD;;CAKA,MAAMC,GAAG,GAAG,SAANA,GAAM,CAAAG,WAAW,EAAI;CAC1B,QAAIA,WAAW,KAAKC,kBAApB,EAAwC;CACvCA,MAAAA,kBAAkB,GAAGD,WAArB;;CAEA,UAAI,OAAOE,MAAM,CAACC,QAAd,KAA2B,UAA/B,EAA2C;CAC1CD,QAAAA,MAAM,CAACC,QAAP;CACA;CACD;;CAED,OAAGC,OAAH,CAAWC,IAAX,CAAgBC,QAAQ,CAACC,WAAT,IAAwB,EAAxC,EAA4C,UAAAC,UAAU,EAAI;CAEzD;CACA,UAAMC,KAAK,GAAG,EAAd;CACA,SAAGL,OAAH,CAAWC,IAAX,CAAgBG,UAAU,CAACE,QAAX,IAAuB,EAAvC,EAA2C,UAAAC,OAAO,EAAI;CACrDF,QAAAA,KAAK,CAACG,IAAN,CAAWD,OAAX;CACA,OAFD;CAIAF,MAAAA,KAAK,CAACL,OAAN,CAAc,UAAAO,OAAO,EAAI;CACxB,YAAME,gBAAgB,GAAG1B,wBAAwB,CAAC2B,IAAzB,CAA8BC,MAAM,CAACJ,OAAO,CAAChB,KAAT,CAAN,CAAsBqB,SAApD,CAAzB;;CAEA,YAAIH,gBAAJ,EAAsB;CACrB,cAAMI,KAAK,GAAG,GAAGC,OAAH,CAAWb,IAAX,CAAgBM,OAAO,CAACQ,gBAAR,CAAyBT,QAAzC,EAAmDC,OAAnD,CAAd;CACAA,UAAAA,OAAO,CAACQ,gBAAR,CAAyBC,UAAzB,CAAoCH,KAApC;CACA,SAHD,MAGO;CACN,cAAMI,eAAe,GAAG,CAACN,MAAM,CAACJ,OAAO,CAAChB,KAAT,CAAN,CAAsBqB,SAAtB,IAAmC,EAApC,EAAwCM,KAAxC,CAA8CpC,gBAA9C,CAAxB;;CAEA,cAAImC,eAAJ,EAAqB;CACpB;CACAV,YAAAA,OAAO,CAAChB,KAAR,CAAcqB,SAAd,GAA0B,CACzB,CAAC,UAAUF,IAAV,CAAed,WAAf,IACEqB,eAAe,CAAC,CAAD,CAAf,KAAuB,IADzB,GAEE,WAAWP,IAAX,CAAgBd,WAAhB,IACCqB,eAAe,CAAC,CAAD,CAAf,KAAuB,IADxB,GAECA,eAAe,CAAC,CAAD,CAAf,KAAuB,IAJ3B,IAKG,cALH,GAMG,EAPsB,IAQtBV,OAAO,CAAChB,KAAR,CAAcqB,SAAd,CAAwBO,OAAxB,CAAgCrC,gBAAhC,EAAkD,IAAlD,CARJ;CASA,WAXD,MAWO;CACN;CACA,gBAAMsC,eAAe,GAAG,CAACT,MAAM,CAACJ,OAAO,CAAChB,KAAT,CAAN,CAAsBqB,SAAtB,IAAmC,EAApC,EAAwCM,KAAxC,CAA8C,6DAA9C,CAAxB;;CACA,gBAAIE,eAAe,IAAIA,eAAe,CAACC,MAAhB,GAAyB,CAAhD,EAAmD;CAClD,kBAAI,UAAUX,IAAV,CAAed,WAAf,MAAgCwB,eAAe,CAAC,CAAD,CAAf,KAAuB,UAAvB,IAAqCA,eAAe,CAAC,CAAD,CAAf,KAAuB,UAA5F,CAAJ,EAA6G;CAC5G;CACAb,gBAAAA,OAAO,CAAChB,KAAR,CAAcqB,SAAd,GAA0BL,OAAO,CAAChB,KAAR,CAAcqB,SAAd,CAAwBO,OAAxB,CAAgC,wCAAhC,mBAAyFC,eAAe,CAAC,CAAD,CAAxG,OAA1B;CACA,eAHD,MAGO,IAAI,WAAWV,IAAX,CAAgBd,WAAhB,MAAiCwB,eAAe,CAAC,CAAD,CAAf,KAAuB,UAAvB,IAAqCA,eAAe,CAAC,CAAD,CAAf,KAAuB,UAA7F,CAAJ,EAA8G;CACpH;CACAb,gBAAAA,OAAO,CAAChB,KAAR,CAAcqB,SAAd,GAA0BL,OAAO,CAAChB,KAAR,CAAcqB,SAAd,CAAwBO,OAAxB,CAAgC,wCAAhC,mBAAyFC,eAAe,CAAC,CAAD,CAAxG,OAA1B;CACA,eAHM,MAGA;CACNb,gBAAAA,OAAO,CAAChB,KAAR,CAAcqB,SAAd,GAA0BL,OAAO,CAAChB,KAAR,CAAcqB,SAAd,CAAwBO,OAAxB,CAAgC,qDAAhC,eAAkGC,eAAe,CAAC,CAAD,CAAjH,OAA1B;CACA;CACD;CACD;CACD;CACD,OApCD;CAqCA,KA7CD;CA8CA,GAvDD;;CAwDA,MAAMtB,MAAM,GAAGa,MAAM,CAACW,cAAP,CACd;CAAEhC,IAAAA,gBAAgB,EAAhBA,gBAAF;CAAoBK,IAAAA,cAAc,EAAdA;CAApB,GADc,EAEd,QAFc,EAGd;CAAE4B,IAAAA,GAAG,EAAE;CAAA,aAAM1B,kBAAN;CAAA,KAAP;CAAiCJ,IAAAA,GAAG,EAAHA;CAAjC,GAHc,CAAf,CApEoD;;CA2EpD,MAAII,kBAAkB,GAAGZ,kBAAkB,KAAKE,cAAc,IAAIA,cAAc,CAACO,OAAjC,GAA2C,MAA3C,GAAoD,OAAzD,CAA3C;CAEAD,EAAAA,GAAG,CAACI,kBAAD,CAAH,CA7EoD;;CAgFpD,MAAIV,cAAJ,EAAoB;CACnB,QAAI,sBAAsBA,cAA1B,EAA0C;CACzCA,MAAAA,cAAc,CAACqC,gBAAf,CAAgC,QAAhC,EAA0ChC,kBAA1C;CACA,KAFD,MAEO;CACNL,MAAAA,cAAc,CAACsC,WAAf,CAA2BjC,kBAA3B;CACA;CACD;;CAED,SAAOM,MAAP;CACA,CAzFD;;CCJA;CAEA4B,IAAI,CAAC1C,sBAAL,GAA8BA,sBAA9B;;CAGA0C,IAAI,CAACC,sBAAL,GAA8B3C,sBAA9B;;;;;;"}
+{"version":3,"file":"browser-global.js","sources":["../src/browser.js","../src/browser-global.js"],"sourcesContent":["/* global document,window */\nconst prefersColorSchemeRegExp = /prefers-color-scheme:/i;\n\nconst prefersColorSchemeInit = (initialColorScheme, options) => {\n\t// OPTIONS\n\t{\n\t\tif (!options) {\n\t\t\toptions = {};\n\t\t}\n\n\t\toptions = {\n\t\t\tdebug: (!!options.debug) || false,\n\t\t};\n\t}\n\n\tconst mediaQueryString = '(prefers-color-scheme: dark)';\n\tconst mediaQueryList = ('matchMedia' in window) && window.matchMedia(mediaQueryString);\n\tconst hasNativeSupport = mediaQueryList && mediaQueryList.media === mediaQueryString;\n\tconst mediaQueryListener = () => {\n\t\tset((mediaQueryList && mediaQueryList.matches) ? 'dark' : 'light');\n\t};\n\tconst removeListener = () => {\n\t\tif (mediaQueryList) {\n\t\t\tmediaQueryList.removeListener(mediaQueryListener);\n\t\t}\n\t};\n\tconst set = (colorScheme) => {\n\t\tif (colorScheme !== 'dark' && colorScheme !== 'light') {\n\t\t\tif (hasNativeSupport) {\n\t\t\t\tcolorScheme = mediaQueryList.matches ? 'dark' : 'light';\n\t\t\t} else {\n\t\t\t\tcolorScheme = 'light';\n\t\t\t}\n\t\t}\n\n\t\tif (colorScheme !== currentColorScheme) {\n\t\t\tcurrentColorScheme = colorScheme;\n\n\t\t\tif (typeof result.onChange === 'function') {\n\t\t\t\tresult.onChange();\n\t\t\t}\n\t\t}\n\n\t\t[].forEach.call(document.styleSheets || [], styleSheet => {\n\t\t\ttry {\n\t\t\t\t// cssRules is a live list. Converting to an Array first.\n\t\t\t\tconst rules = [];\n\t\t\t\t[].forEach.call(styleSheet.cssRules || [], cssRule => {\n\t\t\t\t\trules.push(cssRule);\n\t\t\t\t});\n\n\t\t\t\trules.forEach(cssRule => {\n\t\t\t\t\tconst colorSchemeMatch = prefersColorSchemeRegExp.test(Object(cssRule.media).mediaText);\n\n\t\t\t\t\tif (colorSchemeMatch) {\n\t\t\t\t\t\tconst index = [].indexOf.call(cssRule.parentStyleSheet.cssRules, cssRule);\n\t\t\t\t\t\tcssRule.parentStyleSheet.deleteRule(index);\n\t\t\t\t\t} else {\n\t\t\t\t\t\t// New style which supports complex media queries.\n\t\t\t\t\t\tconst colorDepthMatch = (Object(cssRule.media).mediaText || '').match(/\\( *(?:color|max-color): *(48842621|70318723) *\\)/i);\n\t\t\t\t\t\tif (colorDepthMatch && colorDepthMatch.length > 1) {\n\t\t\t\t\t\t\tif (colorScheme === 'dark' && (colorDepthMatch[1] === '48842621')) {\n\t\t\t\t\t\t\t\t// preferred is dark and rule is dark.\n\t\t\t\t\t\t\t\tcssRule.media.mediaText = cssRule.media.mediaText.replace(/\\( *color: *(?:48842621) *\\)/i, `(max-color: ${colorDepthMatch[1]})`);\n\t\t\t\t\t\t\t} else if (colorScheme === 'light' && (colorDepthMatch[1] === '70318723')) {\n\t\t\t\t\t\t\t\t// preferred is light and rule is light.\n\t\t\t\t\t\t\t\tcssRule.media.mediaText = cssRule.media.mediaText.replace(/\\( *color: *(?:70318723) *\\)/i, `(max-color: ${colorDepthMatch[1]})`);\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tcssRule.media.mediaText = cssRule.media.mediaText.replace(/\\( *max-color: *(?:48842621|70318723) *\\)/i, `(color: ${colorDepthMatch[1]})`);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t} catch (e) {\n\t\t\t\tif (options.debug) {\n\t\t\t\t\tconsole.error(e);\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t};\n\tconst result = Object.defineProperty(\n\t\t{ hasNativeSupport, removeListener },\n\t\t'scheme',\n\t\t{ get: () => currentColorScheme, set },\n\t);\n\n\t// initialize the color scheme using the provided value, the system value, or light\n\tlet currentColorScheme = initialColorScheme || (mediaQueryList && mediaQueryList.matches ? 'dark' : 'light');\n\n\tset(currentColorScheme);\n\n\t// listen for system changes\n\tif (mediaQueryList) {\n\t\tif ('addEventListener' in mediaQueryList) {\n\t\t\tmediaQueryList.addEventListener('change', mediaQueryListener);\n\t\t} else {\n\t\t\tmediaQueryList.addListener(mediaQueryListener);\n\t\t}\n\t}\n\n\treturn result;\n};\n\nexport default prefersColorSchemeInit;\n","/* global self,window */\nimport { default as prefersColorSchemeInit } from './browser';\n\n(function (global) {\n\tglobal.prefersColorSchemeInit = prefersColorSchemeInit;\n}('object' === typeof window && window || 'object' === typeof self && self || {}));\n"],"names":["prefersColorSchemeRegExp","prefersColorSchemeInit","initialColorScheme","options","debug","mediaQueryString","mediaQueryList","window","matchMedia","hasNativeSupport","media","mediaQueryListener","set","matches","colorScheme","currentColorScheme","result","onChange","forEach","call","document","styleSheets","styleSheet","rules","cssRules","cssRule","push","test","Object","mediaText","index","indexOf","parentStyleSheet","deleteRule","colorDepthMatch","match","length","replace","e","console","error","defineProperty","removeListener","get","addEventListener","addListener","self"],"mappings":"YACA,IAAMA,EAA2B,yBAE3BC,EAAyB,SAACC,EAAoBC,GAG7CA,IACJA,EAAU,CAAA,GAGXA,EAAU,CACTC,QAAUD,EAAQC,QAAU,GAI9B,IAAMC,EAAmB,+BACnBC,EAAkB,eAAgBC,QAAWA,OAAOC,WAAWH,GAC/DI,EAAmBH,GAAkBA,EAAeI,QAAUL,EAC9DM,EAAqB,WAC1BC,EAAKN,GAAkBA,EAAeO,QAAW,OAAS,UAOrDD,EAAM,SAACE,GACQ,SAAhBA,GAA0C,UAAhBA,IAE5BA,EADGL,GACWH,EAAeO,QAAU,OAEzB,SAIZC,IAAgBC,IACnBA,EAAqBD,EAEU,mBAApBE,EAAOC,UACjBD,EAAOC,YAIT,GAAGC,QAAQC,KAAKC,SAASC,aAAe,IAAI,SAAAC,GAC3C,IAEC,IAAMC,EAAQ,GACd,GAAGL,QAAQC,KAAKG,EAAWE,UAAY,IAAI,SAAAC,GAC1CF,EAAMG,KAAKD,MAGZF,EAAML,SAAQ,SAAAO,GAGb,GAFyBzB,EAAyB2B,KAAKC,OAAOH,EAAQf,OAAOmB,WAEvD,CACrB,IAAMC,EAAQ,GAAGC,QAAQZ,KAAKM,EAAQO,iBAAiBR,SAAUC,GACjEA,EAAQO,iBAAiBC,WAAWH,EACpC,KAAM,CAEN,IAAMI,GAAmBN,OAAOH,EAAQf,OAAOmB,WAAa,IAAIM,MAAM,sDAClED,GAAmBA,EAAgBE,OAAS,IAC3B,SAAhBtB,GAAkD,aAAvBoB,EAAgB,GAE9CT,EAAQf,MAAMmB,UAAYJ,EAAQf,MAAMmB,UAAUQ,QAAQ,gCAAhC,eAAgFH,EAAgB,GAA1H,KAC0B,UAAhBpB,GAAmD,aAAvBoB,EAAgB,GAEtDT,EAAQf,MAAMmB,UAAYJ,EAAQf,MAAMmB,UAAUQ,QAAQ,gCAAhC,eAAgFH,EAAgB,GAA1H,KAEAT,EAAQf,MAAMmB,UAAYJ,EAAQf,MAAMmB,UAAUQ,QAAQ,6CAAhC,WAAyFH,EAAgB,GAAnI,KAGF,IAMF,CAJC,MAAOI,GACJnC,EAAQC,OACXmC,QAAQC,MAAMF,EAEf,MAGGtB,EAASY,OAAOa,eACrB,CAAEhC,iBAAAA,EAAkBiC,eA5DE,WAClBpC,GACHA,EAAeoC,eAAe/B,KA2D/B,SACA,CAAEgC,IAAK,WAAA,OAAM5B,CAAb,EAAiCH,IAAAA,IAI9BG,EAAqBb,IAAuBI,GAAkBA,EAAeO,QAAU,OAAS,SAapG,OAXAD,EAAIG,GAGAT,IACC,qBAAsBA,EACzBA,EAAesC,iBAAiB,SAAUjC,GAE1CL,EAAeuC,YAAYlC,IAItBK,CACP,GChGC,iBAAoBT,QAAUA,QAAU,iBAAoBuC,MAAQA,MAAQ,IADtE7C,uBAAyBA"}