css-prefers-color-scheme 1.0.0 → 3.1.1

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 (15) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/README.md +37 -89
  3. package/browser.js +72 -0
  4. package/browser.js.map +1 -0
  5. package/browser.min.js +1 -0
  6. package/cli.js +116 -0
  7. package/index.js +67 -0
  8. package/index.js.map +1 -0
  9. package/index.mjs +65 -0
  10. package/index.mjs.map +1 -0
  11. package/package.json +32 -17
  12. package/postcss.js +17 -8
  13. package/postcss.mjs +17 -8
  14. package/client.js +0 -16
  15. package/client.mjs +0 -14
package/CHANGELOG.md CHANGED
@@ -1,5 +1,23 @@
1
1
  # Changes to Prefers Color Scheme
2
2
 
3
+ ### 3.1.0 (November 10, 2018)
4
+
5
+ - Include CLI tool for transforming CSS without any installation
6
+ - Update documentation
7
+
8
+ ### 3.0.0 (November 4, 2018)
9
+
10
+ - Preserve `prefers-color-scheme` queries by default for non-JS environments
11
+ - Remove `prefers-color-scheme` queries on the frontend for JS environments
12
+
13
+ ### 2.0.0 (November 3, 2018)
14
+
15
+ - The client library now returns an object with various features, including:
16
+ - `scheme` to get or set the preferred color scheme
17
+ - `hasNativeSupport` to report whether `prefers-color-scheme` is supported
18
+ - `onChange` to listen for when the preferred color scheme changes
19
+ - `removeListener` to destroy the native `prefers-color-scheme` listener
20
+
3
21
  ### 1.0.0 (September 24, 2018)
4
22
 
5
23
  - Initial version
package/README.md CHANGED
@@ -1,113 +1,61 @@
1
- # Prefers Color Scheme [<img src="https://jonathantneal.github.io/dom-logo.svg" alt="PostCSS" width="90" height="90" align="right">][Prefers Color Scheme]
1
+ # Prefers Color Scheme [<img src="https://jonathantneal.github.io/js-logo.svg" alt="" width="90" height="90" align="right">][Prefers Color Scheme]
2
2
 
3
3
  [![NPM Version][npm-img]][npm-url]
4
4
  [![Build Status][cli-img]][cli-url]
5
5
  [![Support Chat][git-img]][git-url]
6
6
 
7
- [Prefers Color Scheme] lets you use light or dark color themes in CSS,
8
- following the [Media Queries] specification.
7
+ [Prefers Color Scheme] lets you use light and dark color schemes in all
8
+ browsers, following the [Media Queries] specification.
9
9
 
10
- ```bash
11
- npm install css-prefers-color-scheme
12
- ```
13
-
14
- ```css
15
- @media (prefers-color-scheme: dark) {
16
- :root {
17
- --site-bgcolor: #1b1b1b;
18
- --site-color: #fff;
19
- }
20
- }
10
+ ## Usage
21
11
 
22
- body {
23
- background-color: var(--site-bgcolor, #f9f9f9);
24
- color: var(--site-color, #111);
25
- font: 100%/1.5 system-ui;
26
- }
27
- ```
28
-
29
- [PostCSS] transforms these into cross-browser compatible `color-index` queries:
30
-
31
- ```css
32
- @media (color-index: 48) {
33
- :root {
34
- --site-bgcolor: #1b1b1b;
35
- --site-color: #fff;
36
- }
37
- }
38
-
39
- body {
40
- background-color: var(--site-bgcolor, #f9f9f9);
41
- color: var(--site-color, #111);
42
- font: 100%/1.5 system-ui;
43
- }
44
- ```
45
-
46
- `CSS._prefersColorScheme()` applies these “light mode” and “dark mode” queries
47
- to documents on the fly. The entire frontend script is less than 300 bytes.
48
-
49
- [Prefers Color Scheme] works in all major browsers, including Safari 6+ and
50
- Internet Explorer 9+.
51
- [See it for yourself.](https://app.crossbrowsertesting.com/public/i76b092cd2b52b86/screenshots/z25c0ccdfcc9c9b8956f?size=medium&type=windowed)
52
-
53
- ```js
54
- const prefersColorScheme = require('css-prefers-color-scheme');
55
-
56
- // apply "dark" queries
57
- prefersColorScheme('dark');
58
-
59
- // apply "light" queries (also disabling "dark" queries)
60
- prefersColorScheme('light');
61
- ```
62
-
63
- ## PostCSS Usage
64
-
65
- Add [Prefers Color Scheme] to your project:
12
+ From the command line, transform CSS files that use `prefers-color-scheme`
13
+ media queries:
66
14
 
67
15
  ```bash
68
- npm install css-prefers-color-scheme --save-dev
16
+ npx css-prefers-color-scheme SOURCE.css TRANSFORMED.css
69
17
  ```
70
18
 
71
- Use [Prefers Color Scheme] to process your CSS:
19
+ Next, use that transformed CSS with this script:
72
20
 
73
- ```js
74
- const postcssPrefersColorScheme = require('css-prefers-color-scheme/postcss');
75
-
76
- postcssPrefersColorScheme.process(YOUR_CSS /*, processOptions, pluginOptions */);
21
+ ```html
22
+ <link rel="stylesheet" href="TRANSFORMED.css">
23
+ <script src="https://unpkg.com/css-prefers-color-scheme/browser.min"></script>
24
+ <script>
25
+ colorScheme = initPrefersColorScheme('dark') // apply "dark" queries (you can change it afterward, too)
26
+ </script>
77
27
  ```
78
28
 
79
- Or use it as a [PostCSS] plugin:
29
+ Dependencies got you down? Don’t worry, this script is only 537 bytes.
80
30
 
81
- ```js
82
- const postcss = require('postcss');
83
- const postcssPrefersColorScheme = require('css-prefers-color-scheme/postcss');
31
+ ## Usage
84
32
 
85
- postcss([
86
- postcssPrefersColorScheme(/* pluginOptions */)
87
- ]).process(YOUR_CSS /*, processOptions */);
88
- ```
89
-
90
- [Prefers Color Scheme] runs in all Node environments, with special
91
- instructions for:
92
-
93
- | [Node](INSTALL.md#node) | [Webpack](INSTALL.md#webpack) | [Create React App](INSTALL.md#create-react-app) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) |
94
- | --- | --- | --- | --- | --- |
33
+ - First, transform `prefers-color-scheme` queries using this
34
+ [PostCSS plugin](README-POSTCSS.md).
35
+ - Next, apply light and dark color schemes everywhere using this
36
+ [browser script](README-BROWSER.md).
95
37
 
96
38
  ---
97
39
 
98
- ## How does the frontend work?
40
+ ## How does it work?
41
+
42
+ [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)`.
99
47
 
100
- The `color-index` media query is understood in all major browsers going back to
101
- Internet Explorer 9, but all implementations only seem to allow a `color-index`
102
- of `0`.
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.
103
51
 
104
- This script changes `(color-index: 48)` queries into
105
- `not all and (color-index: 48)` to activate “dark mode” specific CSS, and then
106
- it inverts `(color-index: 70)` queries into `not all and (color-index: 48)`
107
- to activate “light mode” specific CSS.
52
+ [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.
108
56
 
109
57
  ```css
110
- @media (color-index: 70) { /* "light" query */
58
+ @media (color-index: 70) { /* prefers-color-scheme: light */
111
59
  body {
112
60
  background-color: white;
113
61
  color: black;
@@ -115,8 +63,8 @@ to activate “light mode” specific CSS.
115
63
  }
116
64
  ```
117
65
 
118
- These valid queries are accessible to `document.styleSheet`, so no css parsing
119
- is required to use this library, which is how the script is less than 300 bytes.
66
+ Since these media queries are accessible to `document.styleSheet`, no CSS
67
+ parsing is required.
120
68
 
121
69
  ## Why does the fallback work this way?
122
70
 
package/browser.js ADDED
@@ -0,0 +1,72 @@
1
+ var initPrefersColorScheme = (function () {
2
+ 'use strict';
3
+
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
+ [].forEach.call(styleSheet.cssRules || [], function (cssRule) {
33
+ var colorSchemeMatch = prefersColorSchemeRegExp.test(Object(cssRule.media).mediaText);
34
+
35
+ if (colorSchemeMatch) {
36
+ var index = [].indexOf.call(cssRule.parentStyleSheet.cssRules, cssRule);
37
+ cssRule.parentStyleSheet.deleteRule(index);
38
+ } else {
39
+ var colorIndexMatch = (Object(cssRule.media).mediaText || '').match(colorIndexRegExp);
40
+
41
+ if (colorIndexMatch) {
42
+ 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');
43
+ }
44
+ }
45
+ });
46
+ });
47
+ };
48
+
49
+ var result = Object.defineProperty({
50
+ hasNativeSupport: hasNativeSupport,
51
+ removeListener: removeListener
52
+ }, 'scheme', {
53
+ get: function get() {
54
+ return currentColorScheme;
55
+ },
56
+ set: set
57
+ }); // initialize the color scheme using the provided value, the system value, or light
58
+
59
+ var currentColorScheme = initialColorScheme || (mediaQueryList && mediaQueryList.matches ? 'dark' : 'light');
60
+ set(currentColorScheme); // listen for system changes
61
+
62
+ if (mediaQueryList) {
63
+ mediaQueryList.addListener(mediaQueryListener);
64
+ }
65
+
66
+ return result;
67
+ };
68
+
69
+ return prefersColorSchemeInit;
70
+
71
+ }());
72
+ //# sourceMappingURL=browser.js.map
package/browser.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"browser.js","sources":["src/browser.js"],"sourcesContent":["const 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\t\t\t[].forEach.call(styleSheet.cssRules || [], 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\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\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: /^light$/i.test(colorScheme)\n\t\t\t\t\t\t\t\t? colorIndexMatch[3] === '70'\n\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: ''\n\t\t\t\t\t\t) + cssRule.media.mediaText.replace(colorIndexRegExp, '$2');\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\tmediaQueryList.addListener(mediaQueryListener);\n\t}\n\n\treturn result;\n};\n\nexport default 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","cssRules","cssRule","colorSchemeMatch","test","Object","mediaText","index","indexOf","parentStyleSheet","deleteRule","colorIndexMatch","match","replace","defineProperty","get","addListener"],"mappings":"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"}
package/browser.min.js ADDED
@@ -0,0 +1 @@
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}}();
package/cli.js ADDED
@@ -0,0 +1,116 @@
1
+ #!/usr/bin/env node
2
+
3
+ const fs = require('fs');
4
+ const prefersColorScheme = require('./postcss');
5
+
6
+ if (process.argv.length < 3) {
7
+ console.log([
8
+ 'Prefers Color Scheme\n',
9
+ ' Transforms CSS with @media (prefers-color-scheme) {}\n',
10
+ 'Usage:\n',
11
+ ' css-prefers-color-scheme source.css transformed.css',
12
+ ' css-prefers-color-scheme --in=source.css --out=transformed.css --opts={}',
13
+ ' echo "@media (prefers-color-scheme: dark) {}" | css-prefers-color-scheme\n'
14
+ ].join('\n'));
15
+ process.exit(0);
16
+ }
17
+
18
+ // get process and plugin options from the command line
19
+ const fileRegExp = /^[\w\/.]+$/;
20
+ const argRegExp = /^--(\w+)=("|')?(.+)\2$/;
21
+ const relaxedJsonRegExp = /(['"])?([a-z0-9A-Z_]+)(['"])?:/g;
22
+ const argo = process.argv.slice(2).reduce(
23
+ (object, arg) => {
24
+ const argMatch = arg.match(argRegExp);
25
+ const fileMatch = arg.match(fileRegExp);
26
+
27
+ if (argMatch) {
28
+ object[argMatch[1]] = argMatch[3];
29
+ } else if (fileMatch) {
30
+ if (object.from === '<stdin>') {
31
+ object.from = arg;
32
+ } else if (object.to === '<stdout>') {
33
+ object.to = arg;
34
+ }
35
+ }
36
+
37
+ return object;
38
+ },
39
+ { from: '<stdin>', to: '<stdout>', opts: 'null' }
40
+ );
41
+
42
+ // get css from command line arguments or stdin
43
+ (argo.from === '<stdin>' ? getStdin() : readFile(argo.from))
44
+ .then(css => {
45
+ const pluginOpts = JSON.parse(argo.opts.replace(relaxedJsonRegExp, '"$2": '));
46
+ const processOptions = Object.assign({ from: argo.from, to: argo.to || argo.from }, argo.map ? { map: JSON.parse(argo.map) } : {});
47
+
48
+ const result = prefersColorScheme.process(css, processOptions, pluginOpts);
49
+
50
+ if (argo.to === '<stdout>') {
51
+ return result.css;
52
+ } else {
53
+ return writeFile(argo.to, result.css).then(
54
+ () => `CSS was written to "${argo.to}"`
55
+ )
56
+ }
57
+ }).then(
58
+ result => {
59
+ console.log(result);
60
+
61
+ process.exit(0);
62
+ },
63
+ error => {
64
+ console.error(error);
65
+
66
+ process.exit(1);
67
+ }
68
+ );
69
+
70
+ function readFile(pathname) {
71
+ return new Promise((resolve, reject) => {
72
+ fs.readFile(pathname, 'utf8', (error, data) => {
73
+ if (error) {
74
+ reject(error);
75
+ } else {
76
+ resolve(data);
77
+ }
78
+ });
79
+ });
80
+ }
81
+
82
+ function writeFile(pathname, data) {
83
+ return new Promise((resolve, reject) => {
84
+ fs.writeFile(pathname, data, (error, content) => {
85
+ if (error) {
86
+ reject(error);
87
+ } else {
88
+ resolve(content);
89
+ }
90
+ });
91
+ });
92
+ }
93
+
94
+ function getStdin() {
95
+ return new Promise(resolve => {
96
+ let data = '';
97
+
98
+ if (process.stdin.isTTY) {
99
+ resolve(data);
100
+ } else {
101
+ process.stdin.setEncoding('utf8');
102
+
103
+ process.stdin.on('readable', () => {
104
+ let chunk;
105
+
106
+ while (chunk = process.stdin.read()) {
107
+ data += chunk;
108
+ }
109
+ });
110
+
111
+ process.stdin.on('end', () => {
112
+ resolve(data);
113
+ });
114
+ }
115
+ });
116
+ }
package/index.js ADDED
@@ -0,0 +1,67 @@
1
+ 'use strict';
2
+
3
+ const colorIndexRegExp = /((?:not )?all and )?(\(color-index: *(22|48|70)\))/i;
4
+ const prefersColorSchemeRegExp = /prefers-color-scheme:/i;
5
+
6
+ const prefersColorSchemeInit = initialColorScheme => {
7
+ const mediaQueryString = '(prefers-color-scheme: dark)';
8
+ const mediaQueryList = window.matchMedia && matchMedia(mediaQueryString);
9
+ const hasNativeSupport = mediaQueryList && mediaQueryList.media === mediaQueryString;
10
+
11
+ const mediaQueryListener = () => {
12
+ set(mediaQueryList.matches ? 'dark' : 'light');
13
+ };
14
+
15
+ const removeListener = () => {
16
+ if (mediaQueryList) {
17
+ mediaQueryList.removeListener(mediaQueryListener);
18
+ }
19
+ };
20
+
21
+ const set = colorScheme => {
22
+ if (colorScheme !== currentColorScheme) {
23
+ currentColorScheme = colorScheme;
24
+
25
+ if (typeof result.onChange === 'function') {
26
+ result.onChange();
27
+ }
28
+ }
29
+
30
+ [].forEach.call(document.styleSheets || [], styleSheet => {
31
+ [].forEach.call(styleSheet.cssRules || [], cssRule => {
32
+ const colorSchemeMatch = prefersColorSchemeRegExp.test(Object(cssRule.media).mediaText);
33
+
34
+ if (colorSchemeMatch) {
35
+ const index = [].indexOf.call(cssRule.parentStyleSheet.cssRules, cssRule);
36
+ cssRule.parentStyleSheet.deleteRule(index);
37
+ } else {
38
+ const colorIndexMatch = (Object(cssRule.media).mediaText || '').match(colorIndexRegExp);
39
+
40
+ if (colorIndexMatch) {
41
+ 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');
42
+ }
43
+ }
44
+ });
45
+ });
46
+ };
47
+
48
+ const result = Object.defineProperty({
49
+ hasNativeSupport,
50
+ removeListener
51
+ }, 'scheme', {
52
+ get: () => currentColorScheme,
53
+ set
54
+ }); // initialize the color scheme using the provided value, the system value, or light
55
+
56
+ let currentColorScheme = initialColorScheme || (mediaQueryList && mediaQueryList.matches ? 'dark' : 'light');
57
+ set(currentColorScheme); // listen for system changes
58
+
59
+ if (mediaQueryList) {
60
+ mediaQueryList.addListener(mediaQueryListener);
61
+ }
62
+
63
+ return result;
64
+ };
65
+
66
+ module.exports = prefersColorSchemeInit;
67
+ //# sourceMappingURL=index.js.map
package/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sources":["src/browser.js"],"sourcesContent":["const 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\t\t\t[].forEach.call(styleSheet.cssRules || [], 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\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\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: /^light$/i.test(colorScheme)\n\t\t\t\t\t\t\t\t? colorIndexMatch[3] === '70'\n\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: ''\n\t\t\t\t\t\t) + cssRule.media.mediaText.replace(colorIndexRegExp, '$2');\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\tmediaQueryList.addListener(mediaQueryListener);\n\t}\n\n\treturn result;\n};\n\nexport default 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","cssRules","cssRule","colorSchemeMatch","test","Object","mediaText","index","indexOf","parentStyleSheet","deleteRule","colorIndexMatch","match","replace","defineProperty","get","addListener"],"mappings":";;AAAA,MAAMA,gBAAgB,GAAG,qDAAzB;AACA,MAAMC,wBAAwB,GAAG,wBAAjC;;AAEA,MAAMC,sBAAsB,GAAGC,kBAAkB,IAAI;QAC9CC,gBAAgB,GAAG,8BAAzB;QACMC,cAAc,GAAGC,MAAM,CAACC,UAAP,IAAqBA,UAAU,CAACH,gBAAD,CAAtD;QACMI,gBAAgB,GAAGH,cAAc,IAAIA,cAAc,CAACI,KAAf,KAAyBL,gBAApE;;QACMM,kBAAkB,GAAG,MAAM;IAChCC,GAAG,CAACN,cAAc,CAACO,OAAf,GAAyB,MAAzB,GAAkC,OAAnC,CAAH;GADD;;QAGMC,cAAc,GAAG,MAAM;QACxBR,cAAJ,EAAoB;MACnBA,cAAc,CAACQ,cAAf,CAA8BH,kBAA9B;;GAFF;;QAKMC,GAAG,GAAGG,WAAW,IAAI;QACtBA,WAAW,KAAKC,kBAApB,EAAwC;MACvCA,kBAAkB,GAAGD,WAArB;;UAEI,OAAOE,MAAM,CAACC,QAAd,KAA2B,UAA/B,EAA2C;QAC1CD,MAAM,CAACC,QAAP;;;;OAICC,OAAH,CAAWC,IAAX,CAAgBC,QAAQ,CAACC,WAAT,IAAwB,EAAxC,EAA4CC,UAAU,IAAI;SACtDJ,OAAH,CAAWC,IAAX,CAAgBG,UAAU,CAACC,QAAX,IAAuB,EAAvC,EAA2CC,OAAO,IAAI;cAC/CC,gBAAgB,GAAGxB,wBAAwB,CAACyB,IAAzB,CAA8BC,MAAM,CAACH,OAAO,CAACf,KAAT,CAAN,CAAsBmB,SAApD,CAAzB;;YAEIH,gBAAJ,EAAsB;gBACfI,KAAK,GAAG,GAAGC,OAAH,CAAWX,IAAX,CAAgBK,OAAO,CAACO,gBAAR,CAAyBR,QAAzC,EAAmDC,OAAnD,CAAd;UAEAA,OAAO,CAACO,gBAAR,CAAyBC,UAAzB,CAAoCH,KAApC;SAHD,MAIO;gBACAI,eAAe,GAAG,CAACN,MAAM,CAACH,OAAO,CAACf,KAAT,CAAN,CAAsBmB,SAAtB,IAAmC,EAApC,EAAwCM,KAAxC,CAA8ClC,gBAA9C,CAAxB;;cAEIiC,eAAJ,EAAqB;YACpBT,OAAO,CAACf,KAAR,CAAcmB,SAAd,GAA0B,CACzB,CAAC,UAAUF,IAAV,CAAeZ,WAAf,IACEmB,eAAe,CAAC,CAAD,CAAf,KAAuB,IADzB,GAEC,WAAWP,IAAX,CAAgBZ,WAAhB,IACCmB,eAAe,CAAC,CAAD,CAAf,KAAuB,IADxB,GAEAA,eAAe,CAAC,CAAD,CAAf,KAAuB,IAJzB,IAKG,cALH,GAME,EAPuB,IAQtBT,OAAO,CAACf,KAAR,CAAcmB,SAAd,CAAwBO,OAAxB,CAAgCnC,gBAAhC,EAAkD,IAAlD,CARJ;;;OAXH;KADD;GATD;;QAmCMgB,MAAM,GAAGW,MAAM,CAACS,cAAP,CACd;IAAE5B,gBAAF;IAAoBK;GADN,EAEd,QAFc,EAGd;IAAEwB,GAAG,EAAE,MAAMtB,kBAAb;IAAiCJ;GAHnB,CAAf,CA/CoD;;MAsDhDI,kBAAkB,GAAGZ,kBAAkB,KAAKE,cAAc,IAAIA,cAAc,CAACO,OAAjC,GAA2C,MAA3C,GAAoD,OAAzD,CAA3C;EAEAD,GAAG,CAACI,kBAAD,CAAH,CAxDoD;;MA2DhDV,cAAJ,EAAoB;IACnBA,cAAc,CAACiC,WAAf,CAA2B5B,kBAA3B;;;SAGMM,MAAP;CA/DD;;;;"}
package/index.mjs ADDED
@@ -0,0 +1,65 @@
1
+ const colorIndexRegExp = /((?:not )?all and )?(\(color-index: *(22|48|70)\))/i;
2
+ const prefersColorSchemeRegExp = /prefers-color-scheme:/i;
3
+
4
+ const prefersColorSchemeInit = initialColorScheme => {
5
+ const mediaQueryString = '(prefers-color-scheme: dark)';
6
+ const mediaQueryList = window.matchMedia && matchMedia(mediaQueryString);
7
+ const hasNativeSupport = mediaQueryList && mediaQueryList.media === mediaQueryString;
8
+
9
+ const mediaQueryListener = () => {
10
+ set(mediaQueryList.matches ? 'dark' : 'light');
11
+ };
12
+
13
+ const removeListener = () => {
14
+ if (mediaQueryList) {
15
+ mediaQueryList.removeListener(mediaQueryListener);
16
+ }
17
+ };
18
+
19
+ const set = colorScheme => {
20
+ if (colorScheme !== currentColorScheme) {
21
+ currentColorScheme = colorScheme;
22
+
23
+ if (typeof result.onChange === 'function') {
24
+ result.onChange();
25
+ }
26
+ }
27
+
28
+ [].forEach.call(document.styleSheets || [], styleSheet => {
29
+ [].forEach.call(styleSheet.cssRules || [], cssRule => {
30
+ const colorSchemeMatch = prefersColorSchemeRegExp.test(Object(cssRule.media).mediaText);
31
+
32
+ if (colorSchemeMatch) {
33
+ const index = [].indexOf.call(cssRule.parentStyleSheet.cssRules, cssRule);
34
+ cssRule.parentStyleSheet.deleteRule(index);
35
+ } else {
36
+ const colorIndexMatch = (Object(cssRule.media).mediaText || '').match(colorIndexRegExp);
37
+
38
+ if (colorIndexMatch) {
39
+ 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');
40
+ }
41
+ }
42
+ });
43
+ });
44
+ };
45
+
46
+ const result = Object.defineProperty({
47
+ hasNativeSupport,
48
+ removeListener
49
+ }, 'scheme', {
50
+ get: () => currentColorScheme,
51
+ set
52
+ }); // initialize the color scheme using the provided value, the system value, or light
53
+
54
+ let currentColorScheme = initialColorScheme || (mediaQueryList && mediaQueryList.matches ? 'dark' : 'light');
55
+ set(currentColorScheme); // listen for system changes
56
+
57
+ if (mediaQueryList) {
58
+ mediaQueryList.addListener(mediaQueryListener);
59
+ }
60
+
61
+ return result;
62
+ };
63
+
64
+ export default prefersColorSchemeInit;
65
+ //# sourceMappingURL=index.mjs.map
package/index.mjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.mjs","sources":["src/browser.js"],"sourcesContent":["const 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\t\t\t[].forEach.call(styleSheet.cssRules || [], 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\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\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: /^light$/i.test(colorScheme)\n\t\t\t\t\t\t\t\t? colorIndexMatch[3] === '70'\n\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: ''\n\t\t\t\t\t\t) + cssRule.media.mediaText.replace(colorIndexRegExp, '$2');\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\tmediaQueryList.addListener(mediaQueryListener);\n\t}\n\n\treturn result;\n};\n\nexport default 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","cssRules","cssRule","colorSchemeMatch","test","Object","mediaText","index","indexOf","parentStyleSheet","deleteRule","colorIndexMatch","match","replace","defineProperty","get","addListener"],"mappings":"AAAA,MAAMA,gBAAgB,GAAG,qDAAzB;AACA,MAAMC,wBAAwB,GAAG,wBAAjC;;AAEA,MAAMC,sBAAsB,GAAGC,kBAAkB,IAAI;QAC9CC,gBAAgB,GAAG,8BAAzB;QACMC,cAAc,GAAGC,MAAM,CAACC,UAAP,IAAqBA,UAAU,CAACH,gBAAD,CAAtD;QACMI,gBAAgB,GAAGH,cAAc,IAAIA,cAAc,CAACI,KAAf,KAAyBL,gBAApE;;QACMM,kBAAkB,GAAG,MAAM;IAChCC,GAAG,CAACN,cAAc,CAACO,OAAf,GAAyB,MAAzB,GAAkC,OAAnC,CAAH;GADD;;QAGMC,cAAc,GAAG,MAAM;QACxBR,cAAJ,EAAoB;MACnBA,cAAc,CAACQ,cAAf,CAA8BH,kBAA9B;;GAFF;;QAKMC,GAAG,GAAGG,WAAW,IAAI;QACtBA,WAAW,KAAKC,kBAApB,EAAwC;MACvCA,kBAAkB,GAAGD,WAArB;;UAEI,OAAOE,MAAM,CAACC,QAAd,KAA2B,UAA/B,EAA2C;QAC1CD,MAAM,CAACC,QAAP;;;;OAICC,OAAH,CAAWC,IAAX,CAAgBC,QAAQ,CAACC,WAAT,IAAwB,EAAxC,EAA4CC,UAAU,IAAI;SACtDJ,OAAH,CAAWC,IAAX,CAAgBG,UAAU,CAACC,QAAX,IAAuB,EAAvC,EAA2CC,OAAO,IAAI;cAC/CC,gBAAgB,GAAGxB,wBAAwB,CAACyB,IAAzB,CAA8BC,MAAM,CAACH,OAAO,CAACf,KAAT,CAAN,CAAsBmB,SAApD,CAAzB;;YAEIH,gBAAJ,EAAsB;gBACfI,KAAK,GAAG,GAAGC,OAAH,CAAWX,IAAX,CAAgBK,OAAO,CAACO,gBAAR,CAAyBR,QAAzC,EAAmDC,OAAnD,CAAd;UAEAA,OAAO,CAACO,gBAAR,CAAyBC,UAAzB,CAAoCH,KAApC;SAHD,MAIO;gBACAI,eAAe,GAAG,CAACN,MAAM,CAACH,OAAO,CAACf,KAAT,CAAN,CAAsBmB,SAAtB,IAAmC,EAApC,EAAwCM,KAAxC,CAA8ClC,gBAA9C,CAAxB;;cAEIiC,eAAJ,EAAqB;YACpBT,OAAO,CAACf,KAAR,CAAcmB,SAAd,GAA0B,CACzB,CAAC,UAAUF,IAAV,CAAeZ,WAAf,IACEmB,eAAe,CAAC,CAAD,CAAf,KAAuB,IADzB,GAEC,WAAWP,IAAX,CAAgBZ,WAAhB,IACCmB,eAAe,CAAC,CAAD,CAAf,KAAuB,IADxB,GAEAA,eAAe,CAAC,CAAD,CAAf,KAAuB,IAJzB,IAKG,cALH,GAME,EAPuB,IAQtBT,OAAO,CAACf,KAAR,CAAcmB,SAAd,CAAwBO,OAAxB,CAAgCnC,gBAAhC,EAAkD,IAAlD,CARJ;;;OAXH;KADD;GATD;;QAmCMgB,MAAM,GAAGW,MAAM,CAACS,cAAP,CACd;IAAE5B,gBAAF;IAAoBK;GADN,EAEd,QAFc,EAGd;IAAEwB,GAAG,EAAE,MAAMtB,kBAAb;IAAiCJ;GAHnB,CAAf,CA/CoD;;MAsDhDI,kBAAkB,GAAGZ,kBAAkB,KAAKE,cAAc,IAAIA,cAAc,CAACO,OAAjC,GAA2C,MAA3C,GAAoD,OAAzD,CAA3C;EAEAD,GAAG,CAACI,kBAAD,CAAH,CAxDoD;;MA2DhDV,cAAJ,EAAoB;IACnBA,cAAc,CAACiC,WAAf,CAA2B5B,kBAA3B;;;SAGMM,MAAP;CA/DD;;;;"}
package/package.json CHANGED
@@ -1,27 +1,39 @@
1
1
  {
2
2
  "name": "css-prefers-color-scheme",
3
- "version": "1.0.0",
4
- "description": "Use a light or dark color theme in CSS CSS",
3
+ "version": "3.1.1",
4
+ "description": "Use light and dark color schemes in all browsers",
5
5
  "author": "Jonathan Neal <jonathantneal@hotmail.com>",
6
6
  "license": "CC0-1.0",
7
7
  "repository": "csstools/css-prefers-color-scheme",
8
8
  "homepage": "https://github.com/csstools/css-prefers-color-scheme#readme",
9
9
  "bugs": "https://github.com/csstools/css-prefers-color-scheme/issues",
10
- "main": "client.js",
11
- "module": "client.mjs",
10
+ "main": "index.js",
11
+ "module": "index.mjs",
12
+ "bin": {
13
+ "css-prefers-color-scheme": "cli.js"
14
+ },
12
15
  "files": [
13
- "client.js",
14
- "client.mjs",
16
+ "browser.js",
17
+ "browser.js.map",
18
+ "browser.min.js",
19
+ "cli.js",
20
+ "index.mjs",
21
+ "index.mjs.map",
22
+ "index.js",
23
+ "index.js.map",
15
24
  "postcss.js",
16
25
  "postcss.mjs"
17
26
  ],
18
27
  "scripts": {
19
- "build": "npm run build:client && npm run build:postcss",
20
- "build:client": "rollup -c .rollup.client.js --silent",
21
- "build:postcss": "rollup -c .rollup.postcss.js --silent",
28
+ "build": "npm run build:browser && npm run build:node && npm run build:postcss",
29
+ "build:browser": "npm run build:browser:dist && npm run build:browser:min",
30
+ "build:browser:dist": "cross-env NODE_ENV=browser rollup -c .rollup.js --silent",
31
+ "build:browser:min": "cross-env NODE_ENV=browser:min rollup -c .rollup.js --silent",
32
+ "build:node": "rollup -c .rollup.js --silent",
33
+ "build:postcss": "cross-env NODE_ENV=postcss rollup -c .rollup.js --silent",
22
34
  "prepublishOnly": "npm test",
23
35
  "pretest": "npm run build",
24
- "test": "echo 'Running tests...'; npm run test:js && npm run test:tape",
36
+ "test": "npm run test:js && npm run test:tape",
25
37
  "test:js": "eslint src/*.js --cache --ignore-path .gitignore --quiet",
26
38
  "test:tape": "postcss-tape --plugin=postcss.js"
27
39
  },
@@ -29,18 +41,21 @@
29
41
  "node": ">=6.0.0"
30
42
  },
31
43
  "dependencies": {
32
- "postcss": "^7.0.2"
44
+ "postcss": "^7.0.5"
33
45
  },
34
46
  "devDependencies": {
35
- "@babel/core": "^7.1.0",
36
- "@babel/preset-env": "^7.0.0",
37
- "babel-eslint": "^9.0.0",
38
- "eslint": "^5.6.0",
47
+ "@babel/core": "^7.1.5",
48
+ "@babel/preset-env": "^7.1.5",
49
+ "babel-eslint": "^10.0.1",
50
+ "cross-env": "^5.2.0",
51
+ "eslint": "^5.9.0",
39
52
  "eslint-config-dev": "^2.0.0",
53
+ "get-stdin": "^6.0.0",
40
54
  "postcss-tape": "^2.2.0",
41
55
  "pre-commit": "^1.2.2",
42
- "rollup": "^0.66.2",
43
- "rollup-plugin-babel": "^4.0.1",
56
+ "rollup": "^0.67.0",
57
+ "rollup-plugin-babel": "^4.0.3",
58
+ "rollup-plugin-terser": "^3.0.0",
44
59
  "uglify-js": "^3.4.9"
45
60
  },
46
61
  "eslintConfig": {
package/postcss.js CHANGED
@@ -14,15 +14,24 @@ const colorIndexByStyle = {
14
14
 
15
15
  const prefersInterfaceReplacer = ($0, style) => `(color-index: ${colorIndexByStyle[style.toLowerCase()]})`;
16
16
 
17
- var postcss$1 = postcss.plugin('postcss-prefers-color-scheme', () => root => {
18
- root.walkAtRules(mediaRegExp, atRule => {
19
- const params = atRule.params;
20
- const altParams = params.replace(prefersInterfaceRegExp, prefersInterfaceReplacer);
17
+ var postcss$1 = postcss.plugin('postcss-prefers-color-scheme', opts => {
18
+ const preserve = 'preserve' in Object(opts) ? opts.preserve : true;
19
+ return root => {
20
+ root.walkAtRules(mediaRegExp, atRule => {
21
+ const params = atRule.params;
22
+ const altParams = params.replace(prefersInterfaceRegExp, prefersInterfaceReplacer);
21
23
 
22
- if (params !== altParams) {
23
- atRule.params = altParams;
24
- }
25
- });
24
+ if (params !== altParams) {
25
+ if (preserve) {
26
+ atRule.cloneBefore({
27
+ params: altParams
28
+ });
29
+ } else {
30
+ atRule.params = altParams;
31
+ }
32
+ }
33
+ });
34
+ };
26
35
  });
27
36
 
28
37
  module.exports = postcss$1;
package/postcss.mjs CHANGED
@@ -10,15 +10,24 @@ const colorIndexByStyle = {
10
10
 
11
11
  const prefersInterfaceReplacer = ($0, style) => `(color-index: ${colorIndexByStyle[style.toLowerCase()]})`;
12
12
 
13
- var postcss$1 = postcss.plugin('postcss-prefers-color-scheme', () => root => {
14
- root.walkAtRules(mediaRegExp, atRule => {
15
- const params = atRule.params;
16
- const altParams = params.replace(prefersInterfaceRegExp, prefersInterfaceReplacer);
13
+ var postcss$1 = postcss.plugin('postcss-prefers-color-scheme', opts => {
14
+ const preserve = 'preserve' in Object(opts) ? opts.preserve : true;
15
+ return root => {
16
+ root.walkAtRules(mediaRegExp, atRule => {
17
+ const params = atRule.params;
18
+ const altParams = params.replace(prefersInterfaceRegExp, prefersInterfaceReplacer);
17
19
 
18
- if (params !== altParams) {
19
- atRule.params = altParams;
20
- }
21
- });
20
+ if (params !== altParams) {
21
+ if (preserve) {
22
+ atRule.cloneBefore({
23
+ params: altParams
24
+ });
25
+ } else {
26
+ atRule.params = altParams;
27
+ }
28
+ }
29
+ });
30
+ };
22
31
  });
23
32
 
24
33
  export default postcss$1;
package/client.js DELETED
@@ -1,16 +0,0 @@
1
- 'use strict';
2
-
3
- const colorIndexRegExp = /((?:not )?all and )?(\(color-index:\s*(22|48|70)\))/i;
4
- var client = (style => {
5
- [].forEach.call(document.styleSheets, styleSheet => {
6
- [].forEach.call(styleSheet.cssRules, cssRule => {
7
- const mediaMatch = (Object(cssRule.media).mediaText || '').match(colorIndexRegExp);
8
-
9
- if (mediaMatch) {
10
- cssRule.media.mediaText = ((/^dark$/i.test(style) ? mediaMatch[3] === '48' : /^light$/i.test(style) ? mediaMatch[3] === '70' : mediaMatch[3] === '22') ? 'not all and ' : '') + cssRule.media.mediaText.replace(colorIndexRegExp, '$2');
11
- }
12
- });
13
- });
14
- });
15
-
16
- module.exports = client;
package/client.mjs DELETED
@@ -1,14 +0,0 @@
1
- const colorIndexRegExp = /((?:not )?all and )?(\(color-index:\s*(22|48|70)\))/i;
2
- var client = (style => {
3
- [].forEach.call(document.styleSheets, styleSheet => {
4
- [].forEach.call(styleSheet.cssRules, cssRule => {
5
- const mediaMatch = (Object(cssRule.media).mediaText || '').match(colorIndexRegExp);
6
-
7
- if (mediaMatch) {
8
- cssRule.media.mediaText = ((/^dark$/i.test(style) ? mediaMatch[3] === '48' : /^light$/i.test(style) ? mediaMatch[3] === '70' : mediaMatch[3] === '22') ? 'not all and ' : '') + cssRule.media.mediaText.replace(colorIndexRegExp, '$2');
9
- }
10
- });
11
- });
12
- });
13
-
14
- export default client;