css-prefers-color-scheme 3.1.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.
Files changed (22) hide show
  1. package/CHANGELOG.md +46 -0
  2. package/INSTALL.md +150 -0
  3. package/README.md +28 -16
  4. package/browser.js +34 -6
  5. package/browser.min.js +100 -1
  6. package/dist/browser-global.js +100 -0
  7. package/dist/browser-global.js.map +1 -0
  8. package/dist/browser.cjs +93 -0
  9. package/dist/browser.cjs.map +1 -0
  10. package/dist/cli.mjs +3 -0
  11. package/dist/index.cjs +2 -0
  12. package/dist/index.cjs.map +1 -0
  13. package/dist/index.mjs +2 -0
  14. package/dist/index.mjs.map +1 -0
  15. package/package.json +44 -48
  16. package/browser.js.map +0 -1
  17. package/index.js +0 -67
  18. package/index.js.map +0 -1
  19. package/index.mjs +0 -65
  20. package/index.mjs.map +0 -1
  21. package/postcss.js +0 -37
  22. package/postcss.mjs +0 -33
package/CHANGELOG.md CHANGED
@@ -1,5 +1,51 @@
1
1
  # Changes to Prefers Color Scheme
2
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
+
3
49
  ### 3.1.0 (November 10, 2018)
4
50
 
5
51
  - Include CLI tool for transforming CSS without any installation
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
@@ -7,6 +7,8 @@
7
7
  [Prefers Color Scheme] lets you use light and dark color schemes in all
8
8
  browsers, following the [Media Queries] specification.
9
9
 
10
+ [!['Can I use' table](https://caniuse.bitsofco.de/image/prefers-color-scheme.png)](https://caniuse.com/#feat=prefers-color-scheme)
11
+
10
12
  ## Usage
11
13
 
12
14
  From the command line, transform CSS files that use `prefers-color-scheme`
@@ -20,13 +22,17 @@ Next, use that transformed CSS with this script:
20
22
 
21
23
  ```html
22
24
  <link rel="stylesheet" href="TRANSFORMED.css">
23
- <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>
24
26
  <script>
25
27
  colorScheme = initPrefersColorScheme('dark') // apply "dark" queries (you can change it afterward, too)
26
28
  </script>
27
29
  ```
28
30
 
29
- 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.
30
36
 
31
37
  ## Usage
32
38
 
@@ -39,23 +45,28 @@ Dependencies got you down? Don’t worry, this script is only 537 bytes.
39
45
 
40
46
  ## How does it work?
41
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
+
42
52
  [Prefers Color Scheme] uses a [PostCSS plugin](README-POSTCSS.md) to transform
43
- `prefers-color-scheme` queries into `color-index` queries. This changes
44
- `prefers-color-scheme: dark` into `(color-index: 48)`,
45
- `prefers-color-scheme: light` into `(color-index: 70)`, and
46
- `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)`.
47
57
 
48
- The frontend receives these `color-index` queries, which are understood in all
49
- major browsers going back to Internet Explorer 9. However, since browsers only
50
- 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.
51
62
 
52
63
  [Prefers Color Scheme] uses a [browser script](README-BROWSER.md) to change
53
- `(color-index: 48)` queries into `not all and (color-index: 48)` in order to
54
- activate “dark mode” specific CSS, and it changes `(color-index: 70)` queries
55
- 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.
56
67
 
57
68
  ```css
58
- @media (color-index: 70) { /* prefers-color-scheme: light */
69
+ @media (color: 70318723) { /* prefers-color-scheme: light */
59
70
  body {
60
71
  background-color: white;
61
72
  color: black;
@@ -71,14 +82,15 @@ parsing is required.
71
82
  The value of `48` is chosen for dark mode because it is the keycode for `0`,
72
83
  the hexidecimal value of black. Likewise, `70` is chosen for light mode because
73
84
  it is the keycode for `f`, the hexidecimal value of white.
85
+ These are suffixed with a random large number.
74
86
 
75
- [cli-img]: https://img.shields.io/travis/csstools/css-prefers-color-scheme.svg
76
- [cli-url]: https://travis-ci.org/csstools/css-prefers-color-scheme
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
77
89
  [git-img]: https://img.shields.io/badge/support-chat-blue.svg
78
90
  [git-url]: https://gitter.im/postcss/postcss
79
91
  [npm-img]: https://img.shields.io/npm/v/css-prefers-color-scheme.svg
80
92
  [npm-url]: https://www.npmjs.com/package/css-prefers-color-scheme
81
93
 
82
94
  [PostCSS]: https://github.com/postcss/postcss
83
- [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
84
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 r=window.matchMedia&&matchMedia("(prefers-color-scheme: dark)"),n=r&&"(prefers-color-scheme: dark)"===r.media,i=function(){c(r.matches?"dark":"light")},c=function(a){a!==s&&(s=a,"function"==typeof o.onChange&&o.onChange()),[].forEach.call(document.styleSheets||[],function(r){[].forEach.call(r.cssRules||[],function(r){if(t.test(Object(r.media).mediaText)){var n=[].indexOf.call(r.parentStyleSheet.cssRules,r);r.parentStyleSheet.deleteRule(n)}else{var i=(Object(r.media).mediaText||"").match(e);i&&(r.media.mediaText=((/^dark$/i.test(a)?"48"===i[3]:/^light$/i.test(a)?"70"===i[3]:"22"===i[3])?"not all and ":"")+r.media.mediaText.replace(e,"$2"))}})})},o=Object.defineProperty({hasNativeSupport:n,removeListener:function(){r&&r.removeListener(i)}},"scheme",{get:function(){return s},set:c}),s=a||(r&&r.matches?"dark":"light");return c(s),r&&r.addListener(i),o}}();
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
package/dist/browser-global.js ADDED
@@ -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
package/dist/browser-global.js.map ADDED
@@ -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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"}