css-prefers-color-scheme 3.0.0 → 5.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 (11) hide show
  1. package/README.md +29 -204
  2. package/browser.js.map +1 -1
  3. package/browser.min.js +1 -1
  4. package/cli.js +116 -0
  5. package/index.js.map +1 -1
  6. package/index.mjs +1 -1
  7. package/index.mjs.map +1 -1
  8. package/package.json +35 -24
  9. package/postcss.js +24 -22
  10. package/postcss.mjs +24 -18
  11. package/CHANGELOG.md +0 -18
package/README.md CHANGED
@@ -1,4 +1,4 @@
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]
@@ -7,229 +7,54 @@
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
- ```bash
11
- npm install css-prefers-color-scheme
12
- ```
13
-
14
- There are 2 steps required to get color schemes working:
15
-
16
- - Transform your queries using the included [PostCSS plugin](#PostCSS-Plugin).
17
- - Apply your queries using the included [browser library](#Browser-Library).
18
-
19
- ## PostCSS Plugin
20
-
21
- [Prefers Color Scheme] transforms `prefers-color-scheme` media queries into
22
- something all browsers understand.
10
+ [!['Can I use' table](https://caniuse.bitsofco.de/image/prefers-color-scheme.png)](https://caniuse.com/#feat=prefers-color-scheme)
23
11
 
24
- ```css
25
- @media (prefers-color-scheme: dark) {
26
- :root {
27
- --site-bgcolor: #1b1b1b;
28
- --site-color: #fff;
29
- }
30
- }
31
-
32
- body {
33
- background-color: var(--site-bgcolor, #f9f9f9);
34
- color: var(--site-color, #111);
35
- font: 100%/1.5 system-ui;
36
- }
37
-
38
- /* becomes */
39
-
40
- @media (color-index: 48) {
41
- :root {
42
- --site-bgcolor: #1b1b1b;
43
- --site-color: #fff;
44
- }
45
- }
46
-
47
- @media (prefers-color-scheme: dark) {
48
- :root {
49
- --site-bgcolor: #1b1b1b;
50
- --site-color: #fff;
51
- }
52
- }
53
-
54
- body {
55
- background-color: var(--site-bgcolor, #f9f9f9);
56
- color: var(--site-color, #111);
57
- font: 100%/1.5 system-ui;
58
- }
59
- ```
12
+ ## Usage
60
13
 
61
- ## Browser Library
14
+ From the command line, transform CSS files that use `prefers-color-scheme`
15
+ media queries:
62
16
 
63
- [Prefers Color Scheme] applies color schemes previously transformed by the
64
- [PostCSS plugin](#PostCSS-Plugin).
65
-
66
- ```js
67
- // initialize prefersColorScheme (applies the system color scheme, if available)
68
- const prefersColorScheme = require('css-prefers-color-scheme')();
69
-
70
- // apply "dark" queries
71
- prefersColorScheme.scheme = 'dark';
72
-
73
- // apply "light" queries (also disabling "dark" queries)
74
- prefersColorScheme.scheme = 'light';
75
- ```
76
-
77
- The script is also available from the [unpkg.com](https://unpkg.com/) CDN:
78
-
79
- ```html
80
- <script src="https://unpkg.com/css-prefers-color-scheme/browser.js"></script>
81
- <script>
82
- // initialize prefersColorScheme (applies the system color scheme, if available)
83
- initPrefersColorScheme()
84
- </script>
17
+ ```bash
18
+ npx css-prefers-color-scheme SOURCE.css TRANSFORMED.css
85
19
  ```
86
20
 
87
- A minified version is also available:
21
+ Next, use that transformed CSS with this script:
88
22
 
89
23
  ```html
90
- <script src="https://unpkg.com/css-prefers-color-scheme/browser.js"></script>
24
+ <link rel="stylesheet" href="TRANSFORMED.css">
25
+ <script src="https://unpkg.com/css-prefers-color-scheme/browser.min"></script>
91
26
  <script>
92
- // initialize prefersColorScheme (applies the system color scheme, if available)
93
- initPrefersColorScheme()
27
+ colorScheme = initPrefersColorScheme('dark') // apply "dark" queries (you can change it afterward, too)
94
28
  </script>
95
29
  ```
96
30
 
97
- [Prefers Color Scheme] works in all major browsers, including Safari 6+ and
98
- Internet Explorer 9+ without any polyfills.
99
- [See it for yourself.](https://app.crossbrowsertesting.com/public/i76b092cd2b52b86/screenshots/z25c0ccdfcc9c9b8956f?size=medium&type=windowed)
100
-
101
- To maintain compatibility with browsers supporting `prefers-color-scheme`, the
102
- library will remove `prefers-color-scheme` media queries in favor of the
103
- cross-browser compatible `color-index` media queries. This ensures a seemless
104
- experience when JavaScript is unable to run.
105
-
106
- ---
107
-
108
- ## Browser Usage
109
-
110
- Use [Prefers Color Scheme] to activate your `prefers-color-scheme` queries:
111
-
112
- ```js
113
- const prefersColorScheme = require('css-prefers-color-scheme')();
114
- ```
115
-
116
- By default, the system color scheme is applied, if your browser supports it.
117
- Otherwise, the light color scheme is applied. You may override this by passing
118
- in a color scheme.
119
-
120
- ```js
121
- const prefersColorScheme = require('css-prefers-color-scheme')('dark');
122
- ```
123
-
124
- The `prefersColorScheme` object returns the following properties:
125
-
126
- ### value
127
-
128
- The `value` property returns the currently preferred color scheme, and can be
129
- set to change it.
130
-
131
- ```js
132
- const prefersColorScheme = require('css-prefers-color-scheme')();
133
-
134
- // log the preferred color scheme
135
- console.log(prefersColorScheme.scheme);
136
-
137
- // apply "dark" queries
138
- prefersColorScheme.scheme = 'dark';
139
- ```
140
-
141
- ### hasNativeSupport
142
-
143
- The `hasNativeSupport` boolean represents whether `prefers-color-scheme` is
144
- supported by the current browser.
145
-
146
- ### onChange
147
-
148
- The `onChange` function can be added in order to listen for changes to the
149
- preferred color scheme, whether they are triggered by the system or manually by
150
- the `change` function.
151
-
152
- ### removeListener
153
-
154
- The `removeListener` function removes the native `prefers-color-scheme`
155
- listener, which may or may not be applied, depending on your browser support.
156
- This is provided to give you complete control over plugin cleanup.
157
-
158
- ---
159
-
160
- ## PostCSS Usage
161
-
162
- Use [Prefers Color Scheme] to process your CSS:
163
-
164
- ```js
165
- const postcssPrefersColorScheme = require('css-prefers-color-scheme/postcss');
166
-
167
- postcssPrefersColorScheme.process(YOUR_CSS /*, processOptions, pluginOptions */);
168
- ```
169
-
170
- Or use it as a [PostCSS] plugin:
31
+ Dependencies got you down? Don’t worry, this script is only 537 bytes.
171
32
 
172
- ```js
173
- const postcss = require('postcss');
174
- const postcssPrefersColorScheme = require('css-prefers-color-scheme/postcss');
33
+ ## Usage
175
34
 
176
- postcss([
177
- postcssPrefersColorScheme(/* pluginOptions */)
178
- ]).process(YOUR_CSS /*, processOptions */);
179
- ```
180
-
181
- [Prefers Color Scheme] runs in all Node environments, with special
182
- instructions for:
183
-
184
- | [Node](INSTALL.md#node) | [Webpack](INSTALL.md#webpack) | [Create React App](INSTALL.md#create-react-app) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) |
185
- | --- | --- | --- | --- | --- |
186
-
187
- ### Options
188
-
189
- #### preserve
190
-
191
- The `preserve` option determines whether the original `prefers-color-scheme`
192
- query will be preserved or removed. By default, it is preserved.
193
-
194
-
195
- ```js
196
- require('css-prefers-color-scheme/postcss')({ preserve: false });
197
- ```
198
-
199
- ```css
200
- @media (prefers-color-scheme: dark) {
201
- body {
202
- background-color: black;
203
- }
204
- }
205
-
206
- /* becomes */
207
-
208
- @media (color-index: 48) {
209
- body {
210
- background-color: black;
211
- }
212
- }
213
- ```
35
+ - First, transform `prefers-color-scheme` queries using this
36
+ [PostCSS plugin](README-POSTCSS.md).
37
+ - Next, apply light and dark color schemes everywhere using this
38
+ [browser script](README-BROWSER.md).
214
39
 
215
40
  ---
216
41
 
217
42
  ## How does it work?
218
43
 
219
- The [Prefers Color Scheme] [PostCSS plugin](#PostCSS-Plugin) transforms
220
- `prefers-color-scheme` queries into `color-index` queries, changing
44
+ [Prefers Color Scheme] uses a [PostCSS plugin](README-POSTCSS.md) to transform
45
+ `prefers-color-scheme` queries into `color-index` queries. This changes
221
46
  `prefers-color-scheme: dark` into `(color-index: 48)`,
222
47
  `prefers-color-scheme: light` into `(color-index: 70)`, and
223
48
  `prefers-color-scheme: no-preference` into `(color-index: 22)`.
224
49
 
225
50
  The frontend receives these `color-index` queries, which are understood in all
226
- major browsers going back to Internet Explorer 9. However, all browsers only
227
- apply a `color-index` of `0`, so all other values are otherwise ignored.
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.
228
53
 
229
- [Prefers Color Scheme] changes `(color-index: 48)` queries into
230
- `not all and (color-index: 48)` to activate “dark mode” specific CSS, and then
231
- it inverts `(color-index: 70)` queries into `not all and (color-index: 48)`
232
- to activate “light mode” specific CSS.
54
+ [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.
233
58
 
234
59
  ```css
235
60
  @media (color-index: 70) { /* prefers-color-scheme: light */
@@ -240,8 +65,8 @@ to activate “light mode” specific CSS.
240
65
  }
241
66
  ```
242
67
 
243
- These valid queries are accessible to `document.styleSheet`, so no css parsing
244
- is required to use this library, which is how the script is only 539 bytes.
68
+ Since these media queries are accessible to `document.styleSheet`, no CSS
69
+ parsing is required.
245
70
 
246
71
  ## Why does the fallback work this way?
247
72
 
@@ -249,8 +74,8 @@ The value of `48` is chosen for dark mode because it is the keycode for `0`,
249
74
  the hexidecimal value of black. Likewise, `70` is chosen for light mode because
250
75
  it is the keycode for `f`, the hexidecimal value of white.
251
76
 
252
- [cli-img]: https://img.shields.io/travis/csstools/css-prefers-color-scheme.svg
253
- [cli-url]: https://travis-ci.org/csstools/css-prefers-color-scheme
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
254
79
  [git-img]: https://img.shields.io/badge/support-chat-blue.svg
255
80
  [git-url]: https://gitter.im/postcss/postcss
256
81
  [npm-img]: https://img.shields.io/npm/v/css-prefers-color-scheme.svg
package/browser.js.map CHANGED
@@ -1 +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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"}
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 CHANGED
@@ -1 +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}}();
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}}();
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.map CHANGED
@@ -1 +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;;;;"}
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":"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"}
package/index.mjs CHANGED
@@ -61,5 +61,5 @@ const prefersColorSchemeInit = initialColorScheme => {
61
61
  return result;
62
62
  };
63
63
 
64
- export default prefersColorSchemeInit;
64
+ export { prefersColorSchemeInit as default };
65
65
  //# sourceMappingURL=index.mjs.map
package/index.mjs.map CHANGED
@@ -1 +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;;;;"}
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":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "css-prefers-color-scheme",
3
- "version": "3.0.0",
3
+ "version": "5.0.0",
4
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",
@@ -9,10 +9,14 @@
9
9
  "bugs": "https://github.com/csstools/css-prefers-color-scheme/issues",
10
10
  "main": "index.js",
11
11
  "module": "index.mjs",
12
+ "bin": {
13
+ "css-prefers-color-scheme": "cli.js"
14
+ },
12
15
  "files": [
13
16
  "browser.js",
14
17
  "browser.js.map",
15
18
  "browser.min.js",
19
+ "cli.js",
16
20
  "index.mjs",
17
21
  "index.mjs.map",
18
22
  "index.js",
@@ -23,39 +27,46 @@
23
27
  "scripts": {
24
28
  "build": "npm run build:browser && npm run build:node && npm run build:postcss",
25
29
  "build:browser": "npm run build:browser:dist && npm run build:browser:min",
26
- "build:browser:dist": "cross-env NODE_ENV=browser rollup -c .rollup.js --silent",
27
- "build:browser:min": "cross-env NODE_ENV=browser:min rollup -c .rollup.js --silent",
28
- "build:node": "rollup -c .rollup.js --silent",
29
- "build:postcss": "cross-env NODE_ENV=postcss rollup -c .rollup.js --silent",
30
+ "build:browser:dist": "cross-env NODE_ENV=browser rollup --config .rollup.js --silent",
31
+ "build:browser:min": "cross-env NODE_ENV=browser:min rollup --config .rollup.js --silent",
32
+ "build:node": "rollup --config .rollup.js --silent",
33
+ "build:postcss": "cross-env NODE_ENV=postcss rollup --config .rollup.js --silent",
30
34
  "prepublishOnly": "npm test",
31
35
  "pretest": "npm run build",
32
36
  "test": "npm run test:js && npm run test:tape",
33
- "test:js": "eslint src/*.js --cache --ignore-path .gitignore --quiet",
34
- "test:tape": "postcss-tape --plugin=postcss.js"
37
+ "test:js": "eslint src/{*,**/*}.js --cache --ignore-path .gitignore --quiet",
38
+ "test:tape": "postcss-tape --plugin postcss.js"
35
39
  },
36
40
  "engines": {
37
- "node": ">=6.0.0"
41
+ "node": ">=12"
38
42
  },
39
- "dependencies": {
40
- "postcss": "^7.0.5"
43
+ "peerDependencies": {
44
+ "postcss": "^8.3"
41
45
  },
42
46
  "devDependencies": {
43
- "@babel/core": "^7.1.2",
44
- "@babel/preset-env": "^7.1.0",
45
- "babel-eslint": "^10.0.1",
46
- "cross-env": "^5.2.0",
47
- "eslint": "^5.8.0",
48
- "eslint-config-dev": "^2.0.0",
49
- "postcss-tape": "^2.2.0",
50
- "pre-commit": "^1.2.2",
51
- "rollup": "^0.66.6",
52
- "rollup-plugin-babel": "^4.0.3",
53
- "rollup-plugin-terser": "^3.0.0",
54
- "uglify-js": "^3.4.9"
47
+ "@babel/core": "7.15.5",
48
+ "@babel/preset-env": "7.15.6",
49
+ "@rollup/plugin-babel": "5.3.0",
50
+ "cross-env": "7.0.3",
51
+ "eslint": "7.32.0",
52
+ "postcss": "8.3.6",
53
+ "postcss-tape": "6.0.1",
54
+ "pre-commit": "1.2.2",
55
+ "rollup": "2.56.3",
56
+ "rollup-plugin-terser": "7.0.2"
55
57
  },
56
58
  "eslintConfig": {
57
- "extends": "dev",
58
- "parser": "babel-eslint"
59
+ "env": {
60
+ "browser": true,
61
+ "es6": true,
62
+ "node": true
63
+ },
64
+ "extends": "eslint:recommended",
65
+ "parserOptions": {
66
+ "ecmaVersion": 2020,
67
+ "sourceType": "module"
68
+ },
69
+ "root": true
59
70
  },
60
71
  "keywords": [
61
72
  "postcss",
package/postcss.js CHANGED
@@ -1,9 +1,3 @@
1
- 'use strict';
2
-
3
- function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
4
-
5
- var postcss = _interopDefault(require('postcss'));
6
-
7
1
  const mediaRegExp = /^media$/i;
8
2
  const prefersInterfaceRegExp = /\(\s*prefers-color-scheme\s*:\s*(dark|light|no-preference)\s*\)/i;
9
3
  const colorIndexByStyle = {
@@ -14,24 +8,32 @@ const colorIndexByStyle = {
14
8
 
15
9
  const prefersInterfaceReplacer = ($0, style) => `(color-index: ${colorIndexByStyle[style.toLowerCase()]})`;
16
10
 
17
- var postcss$1 = postcss.plugin('postcss-prefers-color-scheme', opts => {
11
+ const creator = opts => {
18
12
  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);
13
+ return {
14
+ postcssPlugin: 'postcss-prefers-color-scheme',
15
+ Once: root => {
16
+ root.walkAtRules(mediaRegExp, atRule => {
17
+ const {
18
+ params
19
+ } = atRule;
20
+ const altParams = params.replace(prefersInterfaceRegExp, prefersInterfaceReplacer);
23
21
 
24
- if (params !== altParams) {
25
- if (preserve) {
26
- atRule.cloneBefore({
27
- params: altParams
28
- });
29
- } else {
30
- atRule.params = altParams;
22
+ if (params !== altParams) {
23
+ if (preserve) {
24
+ atRule.cloneBefore({
25
+ params: altParams
26
+ });
27
+ } else {
28
+ atRule.params = altParams;
29
+ }
31
30
  }
32
- }
33
- });
31
+ });
32
+ }
34
33
  };
35
- });
34
+ };
35
+
36
+ creator.postcss = true;
36
37
 
37
- module.exports = postcss$1;
38
+ module.exports = creator;
39
+ //# sourceMappingURL=postcss.js.map
package/postcss.mjs CHANGED
@@ -1,5 +1,3 @@
1
- import postcss from 'postcss';
2
-
3
1
  const mediaRegExp = /^media$/i;
4
2
  const prefersInterfaceRegExp = /\(\s*prefers-color-scheme\s*:\s*(dark|light|no-preference)\s*\)/i;
5
3
  const colorIndexByStyle = {
@@ -10,24 +8,32 @@ const colorIndexByStyle = {
10
8
 
11
9
  const prefersInterfaceReplacer = ($0, style) => `(color-index: ${colorIndexByStyle[style.toLowerCase()]})`;
12
10
 
13
- var postcss$1 = postcss.plugin('postcss-prefers-color-scheme', opts => {
11
+ const creator = opts => {
14
12
  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);
13
+ return {
14
+ postcssPlugin: 'postcss-prefers-color-scheme',
15
+ Once: root => {
16
+ root.walkAtRules(mediaRegExp, atRule => {
17
+ const {
18
+ params
19
+ } = atRule;
20
+ const altParams = params.replace(prefersInterfaceRegExp, prefersInterfaceReplacer);
19
21
 
20
- if (params !== altParams) {
21
- if (preserve) {
22
- atRule.cloneBefore({
23
- params: altParams
24
- });
25
- } else {
26
- atRule.params = altParams;
22
+ if (params !== altParams) {
23
+ if (preserve) {
24
+ atRule.cloneBefore({
25
+ params: altParams
26
+ });
27
+ } else {
28
+ atRule.params = altParams;
29
+ }
27
30
  }
28
- }
29
- });
31
+ });
32
+ }
30
33
  };
31
- });
34
+ };
35
+
36
+ creator.postcss = true;
32
37
 
33
- export default postcss$1;
38
+ export { creator as default };
39
+ //# sourceMappingURL=postcss.mjs.map
package/CHANGELOG.md DELETED
@@ -1,18 +0,0 @@
1
- # Changes to Prefers Color Scheme
2
-
3
- ### 3.0.0 (November 4, 2018)
4
-
5
- - Preserve `prefers-color-scheme` queries by default for non-JS environments
6
- - Remove `prefers-color-scheme` queries on the frontend for JS environments
7
-
8
- ### 2.0.0 (November 3, 2018)
9
-
10
- - The client library now returns an object with various features, including:
11
- - `scheme` to get or set the preferred color scheme
12
- - `hasNativeSupport` to report whether `prefers-color-scheme` is supported
13
- - `onChange` to listen for when the preferred color scheme changes
14
- - `removeListener` to destroy the native `prefers-color-scheme` listener
15
-
16
- ### 1.0.0 (September 24, 2018)
17
-
18
- - Initial version