css-prefers-color-scheme 5.0.0 → 6.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md ADDED
@@ -0,0 +1,69 @@
1
+ # Changes to Prefers Color Scheme
2
+
3
+ ### 6.0.0 (December 13, 2021)
4
+
5
+ - Breaking: require/import paths have changed
6
+ - Changed: new polyfill CDN urls.
7
+ - Updated: documentation
8
+ - Fixed: `CSSRuleList` edits skipping rules as this is a live list.
9
+ - Fixed: complex `@media` queries not working.
10
+
11
+ **Migrating to 6.0.0**
12
+
13
+ PostCSS plugin :
14
+
15
+ ```diff
16
+ - const postcssPrefersColorScheme = require('css-prefers-color-scheme/postcss');
17
+ + const postcssPrefersColorScheme = require('css-prefers-color-scheme');
18
+ ```
19
+
20
+ Browser Polyfill :
21
+
22
+ ```diff
23
+ - const prefersColorScheme = require('css-prefers-color-scheme')();
24
+ + const prefersColorScheme = require('css-prefers-color-scheme/browser')();
25
+ ```
26
+
27
+ _The old CND url is now deprecated and will be removed in a next major release._
28
+ _It will continue to work for now._
29
+
30
+ ```diff
31
+ - <script src="https://unpkg.com/css-prefers-color-scheme/browser.min"></script>
32
+ + <script src="https://unpkg.com/css-prefers-color-scheme/dist/browser-global.js"></script>
33
+ ```
34
+
35
+ ### 5.0.0 (September 17, 2021)
36
+
37
+ - Updated: Support for PostCS 8+ (major).
38
+ - Updated: Support for Node 12+ (major).
39
+
40
+ ### 4.0.0 (May 24, 2019)
41
+
42
+ - Updated: `postcss` to 7.0.16 (patch)
43
+ - Updated: Node 8+ compatibility (major)
44
+
45
+ ### 3.1.1 (November 10, 2018)
46
+
47
+ - Updated: Project organization. No functional changes.
48
+
49
+ ### 3.1.0 (November 10, 2018)
50
+
51
+ - Include CLI tool for transforming CSS without any installation
52
+ - Update documentation
53
+
54
+ ### 3.0.0 (November 4, 2018)
55
+
56
+ - Preserve `prefers-color-scheme` queries by default for non-JS environments
57
+ - Remove `prefers-color-scheme` queries on the frontend for JS environments
58
+
59
+ ### 2.0.0 (November 3, 2018)
60
+
61
+ - The client library now returns an object with various features, including:
62
+ - `scheme` to get or set the preferred color scheme
63
+ - `hasNativeSupport` to report whether `prefers-color-scheme` is supported
64
+ - `onChange` to listen for when the preferred color scheme changes
65
+ - `removeListener` to destroy the native `prefers-color-scheme` listener
66
+
67
+ ### 1.0.0 (September 24, 2018)
68
+
69
+ - Initial version
package/INSTALL.md ADDED
@@ -0,0 +1,150 @@
1
+ # Installing Prefers Color Scheme
2
+
3
+ [Prefers Color Scheme] runs in all Node environments, with special
4
+ instructions for:
5
+
6
+ | [Node](#node) | [Webpack](#webpack) | [Create React App](#create-react-app) | [Gulp](#gulp) | [Grunt](#grunt) |
7
+ | --- | --- | --- | --- | --- |
8
+
9
+ ## Node
10
+
11
+ Add [Prefers Color Scheme] to your project:
12
+
13
+ ```bash
14
+ npm install css-prefers-color-scheme
15
+ ```
16
+
17
+ Use [Prefers Color Scheme] to process your CSS:
18
+
19
+ ```js
20
+ const postcssPrefers = require('css-prefers-color-scheme/postcss');
21
+
22
+ prefersColorScheme.process(YOUR_CSS /*, processOptions, pluginOptions */);
23
+ ```
24
+
25
+ Or use it as a [PostCSS] plugin:
26
+
27
+ ```js
28
+ const postcss = require('postcss');
29
+ const postcssPrefers = require('css-prefers-color-scheme/postcss');
30
+
31
+ postcss([
32
+ prefersColorScheme(/* pluginOptions */)
33
+ ]).process(YOUR_CSS /*, processOptions */);
34
+ ```
35
+
36
+ ## Webpack
37
+
38
+ Add [PostCSS Loader] to your project:
39
+
40
+ ```bash
41
+ npm install postcss-loader --save-dev
42
+ ```
43
+
44
+ Use [Prefers Color Scheme] in your Webpack configuration:
45
+
46
+ ```js
47
+ const postcssPrefers = require('css-prefers-color-scheme/postcss');
48
+
49
+ module.exports = {
50
+ module: {
51
+ rules: [
52
+ {
53
+ test: /\.css$/,
54
+ use: [
55
+ 'style-loader',
56
+ { loader: 'css-loader', options: { importLoaders: 1 } },
57
+ { loader: 'postcss-loader', options: {
58
+ ident: 'postcss',
59
+ plugins: () => [
60
+ prefersColorScheme(/* pluginOptions */)
61
+ ]
62
+ } }
63
+ ]
64
+ }
65
+ ]
66
+ }
67
+ }
68
+ ```
69
+
70
+ ## Create React App
71
+
72
+ Add [React App Rewired] and [React App Rewire PostCSS] to your project:
73
+
74
+ ```bash
75
+ npm install react-app-rewired react-app-rewire-postcss --save-dev
76
+ ```
77
+
78
+ Use [React App Rewire PostCSS] and [Prefers Color Scheme] in your
79
+ `config-overrides.js` file:
80
+
81
+ ```js
82
+ const reactAppRewirePostcss = require('react-app-rewire-postcss');
83
+ const postcssPrefers = require('css-prefers-color-scheme/postcss');
84
+
85
+ export default config => reactAppRewirePostcss(config, {
86
+ plugins: () => [
87
+ prefersColorScheme(/* pluginOptions */)
88
+ ]
89
+ });
90
+ ```
91
+
92
+ ## Gulp
93
+
94
+ Add [Gulp PostCSS] to your project:
95
+
96
+ ```bash
97
+ npm install gulp-postcss --save-dev
98
+ ```
99
+
100
+ Use [Prefers Color Scheme] in your Gulpfile:
101
+
102
+ ```js
103
+ const postcss = require('gulp-postcss');
104
+ const postcssPrefers = require('css-prefers-color-scheme/postcss');
105
+
106
+ gulp.task('css', () => gulp.src('./src/*.css').pipe(
107
+ postcss([
108
+ prefersColorScheme(/* pluginOptions */)
109
+ ])
110
+ ).pipe(
111
+ gulp.dest('.')
112
+ ));
113
+ ```
114
+
115
+ ## Grunt
116
+
117
+ Add [Grunt PostCSS] to your project:
118
+
119
+ ```bash
120
+ npm install grunt-postcss --save-dev
121
+ ```
122
+
123
+ Use [Prefers Color Scheme] in your Gruntfile:
124
+
125
+ ```js
126
+ const postcssPrefers = require('css-prefers-color-scheme/postcss');
127
+
128
+ grunt.loadNpmTasks('grunt-postcss');
129
+
130
+ grunt.initConfig({
131
+ postcss: {
132
+ options: {
133
+ use: [
134
+ prefersColorScheme(/* pluginOptions */)
135
+ ]
136
+ },
137
+ dist: {
138
+ src: '*.css'
139
+ }
140
+ }
141
+ });
142
+ ```
143
+
144
+ [Gulp PostCSS]: https://github.com/postcss/gulp-postcss
145
+ [Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss
146
+ [PostCSS]: https://github.com/postcss/postcss
147
+ [PostCSS Loader]: https://github.com/postcss/postcss-loader
148
+ [Prefers Color Scheme]: https://github.com/csstools/postcss-plugins/tree/main/plugins/css-prefers-color-scheme
149
+ [React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss
150
+ [React App Rewired]: https://github.com/timarney/react-app-rewired
package/README.md CHANGED
@@ -22,13 +22,17 @@ Next, use that transformed CSS with this script:
22
22
 
23
23
  ```html
24
24
  <link rel="stylesheet" href="TRANSFORMED.css">
25
- <script src="https://unpkg.com/css-prefers-color-scheme/browser.min"></script>
25
+ <script src="https://unpkg.com/css-prefers-color-scheme/dist/browser-global.js"></script>
26
26
  <script>
27
27
  colorScheme = initPrefersColorScheme('dark') // apply "dark" queries (you can change it afterward, too)
28
28
  </script>
29
29
  ```
30
30
 
31
- Dependencies got you down? Don’t worry, this script is only 537 bytes.
31
+ ⚠️ Please use a versioned url, like this : `https://unpkg.com/css-prefers-color-scheme@6.0.0/dist/browser-global.js`
32
+ Without the version, you might unexpectedly get a new major version of the library with breaking changes.
33
+
34
+ ⚠️ If you were using an older version via a CDN, please update the entire url.
35
+ The old URL will no longer work in a future release.
32
36
 
33
37
  ## Usage
34
38
 
@@ -41,23 +45,28 @@ Dependencies got you down? Don’t worry, this script is only 537 bytes.
41
45
 
42
46
  ## How does it work?
43
47
 
48
+ _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)._
49
+ _This is deprecated but will continue to work for now._
50
+ _`color` has better browser support and enables complex media queries._
51
+
44
52
  [Prefers Color Scheme] uses a [PostCSS plugin](README-POSTCSS.md) to transform
45
- `prefers-color-scheme` queries into `color-index` queries. This changes
46
- `prefers-color-scheme: dark` into `(color-index: 48)`,
47
- `prefers-color-scheme: light` into `(color-index: 70)`, and
48
- `prefers-color-scheme: no-preference` into `(color-index: 22)`.
53
+ `prefers-color-scheme` queries into `color` queries. This changes
54
+ `prefers-color-scheme: dark` into `(color: 48842621)`,
55
+ `prefers-color-scheme: light` into `(color: 70318723)`, and
56
+ `prefers-color-scheme: no-preference` into `(color: 22511989)`.
49
57
 
50
- The frontend receives these `color-index` queries, which are understood in all
51
- major browsers going back to Internet Explorer 9. However, since browsers only
52
- apply `color-index` queries of `0`, our color scheme values are ignored.
58
+ The frontend receives these `color` queries, which are understood in all
59
+ major browsers going back to Internet Explorer 9.
60
+ However, since browsers can only have a reasonably small number of bits per color,
61
+ our color scheme values are ignored.
53
62
 
54
63
  [Prefers Color Scheme] uses a [browser script](README-BROWSER.md) to change
55
- `(color-index: 48)` queries into `not all and (color-index: 48)` in order to
56
- activate “dark mode” specific CSS, and it changes `(color-index: 70)` queries
57
- into `not all and (color-index: 48)` to activate “light mode” specific CSS.
64
+ `(color: 48842621)` queries into `(max-color: 48842621)` in order to
65
+ activate “dark mode” specific CSS, and it changes `(color: 70318723)` queries
66
+ into `(max-color: 48842621)` to activate “light mode” specific CSS.
58
67
 
59
68
  ```css
60
- @media (color-index: 70) { /* prefers-color-scheme: light */
69
+ @media (color: 70318723) { /* prefers-color-scheme: light */
61
70
  body {
62
71
  background-color: white;
63
72
  color: black;
@@ -73,14 +82,15 @@ parsing is required.
73
82
  The value of `48` is chosen for dark mode because it is the keycode for `0`,
74
83
  the hexidecimal value of black. Likewise, `70` is chosen for light mode because
75
84
  it is the keycode for `f`, the hexidecimal value of white.
85
+ These are suffixed with a random large number.
76
86
 
77
- [cli-img]: https://github.com/csstools/css-prefers-color-scheme/workflows/test/badge.svg
78
- [cli-url]: https://github.com/csstools/css-prefers-color-scheme/actions/workflows/test.yml?query=workflow/test
87
+ [cli-img]: https://github.com/csstools/postcss-plugins/workflows/test/badge.svg
88
+ [cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test
79
89
  [git-img]: https://img.shields.io/badge/support-chat-blue.svg
80
90
  [git-url]: https://gitter.im/postcss/postcss
81
91
  [npm-img]: https://img.shields.io/npm/v/css-prefers-color-scheme.svg
82
92
  [npm-url]: https://www.npmjs.com/package/css-prefers-color-scheme
83
93
 
84
94
  [PostCSS]: https://github.com/postcss/postcss
85
- [Prefers Color Scheme]: https://github.com/csstools/css-prefers-color-scheme
95
+ [Prefers Color Scheme]: https://github.com/csstools/postcss-plugins/tree/main/plugins/css-prefers-color-scheme
86
96
  [Media Queries]: https://drafts.csswg.org/mediaqueries-5/#descdef-media-prefers-color-scheme
package/browser.js CHANGED
@@ -1,6 +1,6 @@
1
- var initPrefersColorScheme = (function () {
2
- 'use strict';
1
+ (function () {
3
2
 
3
+ /* global document,window,matchMedia */
4
4
  var colorIndexRegExp = /((?:not )?all and )?(\(color-index: *(22|48|70)\))/i;
5
5
  var prefersColorSchemeRegExp = /prefers-color-scheme:/i;
6
6
 
@@ -29,7 +29,12 @@ var initPrefersColorScheme = (function () {
29
29
  }
30
30
 
31
31
  [].forEach.call(document.styleSheets || [], function (styleSheet) {
32
+ // cssRules is a live list. Converting to an Array first.
33
+ var rules = [];
32
34
  [].forEach.call(styleSheet.cssRules || [], function (cssRule) {
35
+ rules.push(cssRule);
36
+ });
37
+ rules.forEach(function (cssRule) {
33
38
  var colorSchemeMatch = prefersColorSchemeRegExp.test(Object(cssRule.media).mediaText);
34
39
 
35
40
  if (colorSchemeMatch) {
@@ -39,7 +44,23 @@ var initPrefersColorScheme = (function () {
39
44
  var colorIndexMatch = (Object(cssRule.media).mediaText || '').match(colorIndexRegExp);
40
45
 
41
46
  if (colorIndexMatch) {
47
+ // Old style which has poor browser support and can't handle complex media queries.
42
48
  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');
49
+ } else {
50
+ // New style which supports complex media queries.
51
+ var colorDepthMatch = (Object(cssRule.media).mediaText || '').match(/\( *(?:color|max-color): *(48842621|70318723|22511989) *\)/i);
52
+
53
+ if (colorDepthMatch && colorDepthMatch.length > 1) {
54
+ if (/^dark$/i.test(colorScheme) && (colorDepthMatch[1] === '48842621' || colorDepthMatch[1] === '22511989')) {
55
+ // No preference or preferred is dark and rule is dark.
56
+ cssRule.media.mediaText = cssRule.media.mediaText.replace(/\( *color: *(?:48842621|70318723) *\)/i, "(max-color: " + colorDepthMatch[1] + ")");
57
+ } else if (/^light$/i.test(colorScheme) && (colorDepthMatch[1] === '70318723' || colorDepthMatch[1] === '22511989')) {
58
+ // No preference or preferred is light and rule is light.
59
+ cssRule.media.mediaText = cssRule.media.mediaText.replace(/\( *color: *(?:48842621|22511989) *\)/i, "(max-color: " + colorDepthMatch[1] + ")");
60
+ } else {
61
+ cssRule.media.mediaText = cssRule.media.mediaText.replace(/\( *max-color: *(?:48842621|70318723|22511989) *\)/i, "(color: " + colorDepthMatch[1] + ")");
62
+ }
63
+ }
43
64
  }
44
65
  }
45
66
  });
@@ -60,13 +81,20 @@ var initPrefersColorScheme = (function () {
60
81
  set(currentColorScheme); // listen for system changes
61
82
 
62
83
  if (mediaQueryList) {
63
- mediaQueryList.addListener(mediaQueryListener);
84
+ if ('addEventListener' in mediaQueryList) {
85
+ mediaQueryList.addEventListener('change', mediaQueryListener);
86
+ } else {
87
+ mediaQueryList.addListener(mediaQueryListener);
88
+ }
64
89
  }
65
90
 
66
91
  return result;
67
92
  };
68
93
 
69
- return prefersColorSchemeInit;
94
+ /* global self */
95
+ self.prefersColorSchemeInit = prefersColorSchemeInit; // Legacy : there used to be a rollup config that exposed this function under a different name.
96
+
97
+ self.initPrefersColorScheme = prefersColorSchemeInit;
70
98
 
71
- }());
72
- //# sourceMappingURL=browser.js.map
99
+ })();
100
+ //# sourceMappingURL=browser-global.js.map
package/browser.min.js CHANGED
@@ -1 +1,100 @@
1
- var initPrefersColorScheme=function(){"use strict";var e=/((?:not )?all and )?(\(color-index: *(22|48|70)\))/i,t=/prefers-color-scheme:/i;return function(a){var n="(prefers-color-scheme: dark)",i=window.matchMedia&&matchMedia(n),r=i&&i.media===n,c=function(){o(i.matches?"dark":"light")},o=function(a){a!==l&&(l=a,"function"==typeof s.onChange&&s.onChange()),[].forEach.call(document.styleSheets||[],(function(n){[].forEach.call(n.cssRules||[],(function(n){if(t.test(Object(n.media).mediaText)){var i=[].indexOf.call(n.parentStyleSheet.cssRules,n);n.parentStyleSheet.deleteRule(i)}else{var r=(Object(n.media).mediaText||"").match(e);r&&(n.media.mediaText=((/^dark$/i.test(a)?"48"===r[3]:/^light$/i.test(a)?"70"===r[3]:"22"===r[3])?"not all and ":"")+n.media.mediaText.replace(e,"$2"))}}))}))},s=Object.defineProperty({hasNativeSupport:r,removeListener:function(){i&&i.removeListener(c)}},"scheme",{get:function(){return l},set:o}),l=a||(i&&i.matches?"dark":"light");return o(l),i&&i.addListener(c),s}}();
1
+ (function () {
2
+
3
+ /* global document,window,matchMedia */
4
+ var colorIndexRegExp = /((?:not )?all and )?(\(color-index: *(22|48|70)\))/i;
5
+ var prefersColorSchemeRegExp = /prefers-color-scheme:/i;
6
+
7
+ var prefersColorSchemeInit = function prefersColorSchemeInit(initialColorScheme) {
8
+ var mediaQueryString = '(prefers-color-scheme: dark)';
9
+ var mediaQueryList = window.matchMedia && matchMedia(mediaQueryString);
10
+ var hasNativeSupport = mediaQueryList && mediaQueryList.media === mediaQueryString;
11
+
12
+ var mediaQueryListener = function mediaQueryListener() {
13
+ set(mediaQueryList.matches ? 'dark' : 'light');
14
+ };
15
+
16
+ var removeListener = function removeListener() {
17
+ if (mediaQueryList) {
18
+ mediaQueryList.removeListener(mediaQueryListener);
19
+ }
20
+ };
21
+
22
+ var set = function set(colorScheme) {
23
+ if (colorScheme !== currentColorScheme) {
24
+ currentColorScheme = colorScheme;
25
+
26
+ if (typeof result.onChange === 'function') {
27
+ result.onChange();
28
+ }
29
+ }
30
+
31
+ [].forEach.call(document.styleSheets || [], function (styleSheet) {
32
+ // cssRules is a live list. Converting to an Array first.
33
+ var rules = [];
34
+ [].forEach.call(styleSheet.cssRules || [], function (cssRule) {
35
+ rules.push(cssRule);
36
+ });
37
+ rules.forEach(function (cssRule) {
38
+ var colorSchemeMatch = prefersColorSchemeRegExp.test(Object(cssRule.media).mediaText);
39
+
40
+ if (colorSchemeMatch) {
41
+ var index = [].indexOf.call(cssRule.parentStyleSheet.cssRules, cssRule);
42
+ cssRule.parentStyleSheet.deleteRule(index);
43
+ } else {
44
+ var colorIndexMatch = (Object(cssRule.media).mediaText || '').match(colorIndexRegExp);
45
+
46
+ if (colorIndexMatch) {
47
+ // Old style which has poor browser support and can't handle complex media queries.
48
+ 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');
49
+ } else {
50
+ // New style which supports complex media queries.
51
+ var colorDepthMatch = (Object(cssRule.media).mediaText || '').match(/\( *(?:color|max-color): *(48842621|70318723|22511989) *\)/i);
52
+
53
+ if (colorDepthMatch && colorDepthMatch.length > 1) {
54
+ if (/^dark$/i.test(colorScheme) && (colorDepthMatch[1] === '48842621' || colorDepthMatch[1] === '22511989')) {
55
+ // No preference or preferred is dark and rule is dark.
56
+ cssRule.media.mediaText = cssRule.media.mediaText.replace(/\( *color: *(?:48842621|70318723) *\)/i, "(max-color: " + colorDepthMatch[1] + ")");
57
+ } else if (/^light$/i.test(colorScheme) && (colorDepthMatch[1] === '70318723' || colorDepthMatch[1] === '22511989')) {
58
+ // No preference or preferred is light and rule is light.
59
+ cssRule.media.mediaText = cssRule.media.mediaText.replace(/\( *color: *(?:48842621|22511989) *\)/i, "(max-color: " + colorDepthMatch[1] + ")");
60
+ } else {
61
+ cssRule.media.mediaText = cssRule.media.mediaText.replace(/\( *max-color: *(?:48842621|70318723|22511989) *\)/i, "(color: " + colorDepthMatch[1] + ")");
62
+ }
63
+ }
64
+ }
65
+ }
66
+ });
67
+ });
68
+ };
69
+
70
+ var result = Object.defineProperty({
71
+ hasNativeSupport: hasNativeSupport,
72
+ removeListener: removeListener
73
+ }, 'scheme', {
74
+ get: function get() {
75
+ return currentColorScheme;
76
+ },
77
+ set: set
78
+ }); // initialize the color scheme using the provided value, the system value, or light
79
+
80
+ var currentColorScheme = initialColorScheme || (mediaQueryList && mediaQueryList.matches ? 'dark' : 'light');
81
+ set(currentColorScheme); // listen for system changes
82
+
83
+ if (mediaQueryList) {
84
+ if ('addEventListener' in mediaQueryList) {
85
+ mediaQueryList.addEventListener('change', mediaQueryListener);
86
+ } else {
87
+ mediaQueryList.addListener(mediaQueryListener);
88
+ }
89
+ }
90
+
91
+ return result;
92
+ };
93
+
94
+ /* global self */
95
+ self.prefersColorSchemeInit = prefersColorSchemeInit; // Legacy : there used to be a rollup config that exposed this function under a different name.
96
+
97
+ self.initPrefersColorScheme = prefersColorSchemeInit;
98
+
99
+ })();
100
+ //# sourceMappingURL=browser-global.js.map
@@ -0,0 +1,100 @@
1
+ (function () {
2
+
3
+ /* global document,window,matchMedia */
4
+ var colorIndexRegExp = /((?:not )?all and )?(\(color-index: *(22|48|70)\))/i;
5
+ var prefersColorSchemeRegExp = /prefers-color-scheme:/i;
6
+
7
+ var prefersColorSchemeInit = function prefersColorSchemeInit(initialColorScheme) {
8
+ var mediaQueryString = '(prefers-color-scheme: dark)';
9
+ var mediaQueryList = window.matchMedia && matchMedia(mediaQueryString);
10
+ var hasNativeSupport = mediaQueryList && mediaQueryList.media === mediaQueryString;
11
+
12
+ var mediaQueryListener = function mediaQueryListener() {
13
+ set(mediaQueryList.matches ? 'dark' : 'light');
14
+ };
15
+
16
+ var removeListener = function removeListener() {
17
+ if (mediaQueryList) {
18
+ mediaQueryList.removeListener(mediaQueryListener);
19
+ }
20
+ };
21
+
22
+ var set = function set(colorScheme) {
23
+ if (colorScheme !== currentColorScheme) {
24
+ currentColorScheme = colorScheme;
25
+
26
+ if (typeof result.onChange === 'function') {
27
+ result.onChange();
28
+ }
29
+ }
30
+
31
+ [].forEach.call(document.styleSheets || [], function (styleSheet) {
32
+ // cssRules is a live list. Converting to an Array first.
33
+ var rules = [];
34
+ [].forEach.call(styleSheet.cssRules || [], function (cssRule) {
35
+ rules.push(cssRule);
36
+ });
37
+ rules.forEach(function (cssRule) {
38
+ var colorSchemeMatch = prefersColorSchemeRegExp.test(Object(cssRule.media).mediaText);
39
+
40
+ if (colorSchemeMatch) {
41
+ var index = [].indexOf.call(cssRule.parentStyleSheet.cssRules, cssRule);
42
+ cssRule.parentStyleSheet.deleteRule(index);
43
+ } else {
44
+ var colorIndexMatch = (Object(cssRule.media).mediaText || '').match(colorIndexRegExp);
45
+
46
+ if (colorIndexMatch) {
47
+ // Old style which has poor browser support and can't handle complex media queries.
48
+ 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');
49
+ } else {
50
+ // New style which supports complex media queries.
51
+ var colorDepthMatch = (Object(cssRule.media).mediaText || '').match(/\( *(?:color|max-color): *(48842621|70318723|22511989) *\)/i);
52
+
53
+ if (colorDepthMatch && colorDepthMatch.length > 1) {
54
+ if (/^dark$/i.test(colorScheme) && (colorDepthMatch[1] === '48842621' || colorDepthMatch[1] === '22511989')) {
55
+ // No preference or preferred is dark and rule is dark.
56
+ cssRule.media.mediaText = cssRule.media.mediaText.replace(/\( *color: *(?:48842621|70318723) *\)/i, "(max-color: " + colorDepthMatch[1] + ")");
57
+ } else if (/^light$/i.test(colorScheme) && (colorDepthMatch[1] === '70318723' || colorDepthMatch[1] === '22511989')) {
58
+ // No preference or preferred is light and rule is light.
59
+ cssRule.media.mediaText = cssRule.media.mediaText.replace(/\( *color: *(?:48842621|22511989) *\)/i, "(max-color: " + colorDepthMatch[1] + ")");
60
+ } else {
61
+ cssRule.media.mediaText = cssRule.media.mediaText.replace(/\( *max-color: *(?:48842621|70318723|22511989) *\)/i, "(color: " + colorDepthMatch[1] + ")");
62
+ }
63
+ }
64
+ }
65
+ }
66
+ });
67
+ });
68
+ };
69
+
70
+ var result = Object.defineProperty({
71
+ hasNativeSupport: hasNativeSupport,
72
+ removeListener: removeListener
73
+ }, 'scheme', {
74
+ get: function get() {
75
+ return currentColorScheme;
76
+ },
77
+ set: set
78
+ }); // initialize the color scheme using the provided value, the system value, or light
79
+
80
+ var currentColorScheme = initialColorScheme || (mediaQueryList && mediaQueryList.matches ? 'dark' : 'light');
81
+ set(currentColorScheme); // listen for system changes
82
+
83
+ if (mediaQueryList) {
84
+ if ('addEventListener' in mediaQueryList) {
85
+ mediaQueryList.addEventListener('change', mediaQueryListener);
86
+ } else {
87
+ mediaQueryList.addListener(mediaQueryListener);
88
+ }
89
+ }
90
+
91
+ return result;
92
+ };
93
+
94
+ /* global self */
95
+ self.prefersColorSchemeInit = prefersColorSchemeInit; // Legacy : there used to be a rollup config that exposed this function under a different name.
96
+
97
+ self.initPrefersColorScheme = prefersColorSchemeInit;
98
+
99
+ })();
100
+ //# sourceMappingURL=browser-global.js.map
@@ -0,0 +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":"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"}