css-prefers-color-scheme 9.0.0 → 10.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +4 -179
- package/README.md +11 -18
- package/dist/browser-global.js.map +1 -1
- package/dist/browser.cjs.map +1 -1
- package/dist/browser.mjs.map +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.d.ts +7 -3
- package/dist/index.mjs +1 -1
- package/package.json +13 -31
package/CHANGELOG.md
CHANGED
|
@@ -1,184 +1,9 @@
|
|
|
1
1
|
# Changes to Prefers Color Scheme
|
|
2
2
|
|
|
3
|
-
###
|
|
3
|
+
### 10.0.0
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
_August 3, 2024_
|
|
6
6
|
|
|
7
|
-
-
|
|
7
|
+
- Updated: Support for Node v18+ (major).
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
_February 6, 2023_
|
|
12
|
-
|
|
13
|
-
- Reduce the amount of duplicate fallback CSS.
|
|
14
|
-
|
|
15
|
-
### 8.0.1
|
|
16
|
-
|
|
17
|
-
_January 28, 2023_
|
|
18
|
-
|
|
19
|
-
- Improve `types` declaration in `package.json`
|
|
20
|
-
|
|
21
|
-
### 8.0.0
|
|
22
|
-
|
|
23
|
-
_January 24, 2023_
|
|
24
|
-
|
|
25
|
-
- Updated: Support for Node v14+ (major).
|
|
26
|
-
|
|
27
|
-
### 7.0.1
|
|
28
|
-
|
|
29
|
-
_August 23, 2022_
|
|
30
|
-
|
|
31
|
-
- Fix: assign global browser polyfill to `window`, `self` or a blank object.
|
|
32
|
-
|
|
33
|
-
### 7.0.0
|
|
34
|
-
|
|
35
|
-
_July 8, 2022_
|
|
36
|
-
|
|
37
|
-
[Read the full changelog](https://github.com/csstools/postcss-plugins/wiki/PostCSS-Preset-Env-8)
|
|
38
|
-
|
|
39
|
-
- Breaking: removed old CDN urls
|
|
40
|
-
- Breaking: remove `color-depth` queries fallback
|
|
41
|
-
- Breaking: remove 'no-preference' support as this was dropped from the spec
|
|
42
|
-
- Breaking: remove old global object
|
|
43
|
-
- Fix: case insensitive matching.
|
|
44
|
-
|
|
45
|
-
#### How to migrate :
|
|
46
|
-
|
|
47
|
-
##### Re-build your CSS with the new version of the library.
|
|
48
|
-
|
|
49
|
-
##### If you use a CDN url, please update it.
|
|
50
|
-
|
|
51
|
-
```diff
|
|
52
|
-
- <script src="https://unpkg.com/css-prefers-color-scheme/browser"></script>
|
|
53
|
-
+ <script src="https://unpkg.com/css-prefers-color-scheme/dist/browser-global.js"></script>
|
|
54
|
-
```
|
|
55
|
-
|
|
56
|
-
```diff
|
|
57
|
-
- <script src="https://unpkg.com/css-prefers-color-scheme/browser.min"></script>
|
|
58
|
-
+ <script src="https://unpkg.com/css-prefers-color-scheme/dist/browser-global.js"></script>
|
|
59
|
-
```
|
|
60
|
-
|
|
61
|
-
##### Use `prefersColorSchemeInit` to initialize the polyfill in the browser.
|
|
62
|
-
|
|
63
|
-
```diff
|
|
64
|
-
- initPrefersColorScheme()
|
|
65
|
-
+ prefersColorSchemeInit()
|
|
66
|
-
```
|
|
67
|
-
|
|
68
|
-
##### Remove `@media (prefer-color-scheme: no-preference)` from your CSS.
|
|
69
|
-
|
|
70
|
-
`@media (prefers-color-scheme: no-preference)` was removed from the specification and should be equivalent to not having any media query.
|
|
71
|
-
|
|
72
|
-
```diff
|
|
73
|
-
- @media (prefers-color-scheme: no-preference) {
|
|
74
|
-
- .some-selector {
|
|
75
|
-
- /* your styles ... */
|
|
76
|
-
- }
|
|
77
|
-
- }
|
|
78
|
-
+ .some-selector {
|
|
79
|
-
+ /* your styles ... */
|
|
80
|
-
+ }
|
|
81
|
-
```
|
|
82
|
-
|
|
83
|
-
### 6.0.3
|
|
84
|
-
|
|
85
|
-
_January 31, 2022_
|
|
86
|
-
|
|
87
|
-
- Fix `preserve: false` option.
|
|
88
|
-
|
|
89
|
-
### 6.0.2
|
|
90
|
-
|
|
91
|
-
_January 2, 2022_
|
|
92
|
-
|
|
93
|
-
- Removed Sourcemaps from package tarball.
|
|
94
|
-
- Moved CLI to CLI Package. See [announcement](https://github.com/csstools/postcss-plugins/discussions/121).
|
|
95
|
-
|
|
96
|
-
### 6.0.1
|
|
97
|
-
|
|
98
|
-
_December 27, 2021_
|
|
99
|
-
|
|
100
|
-
- Fixed: require/import paths for browser script
|
|
101
|
-
|
|
102
|
-
### 6.0.0
|
|
103
|
-
|
|
104
|
-
_December 13, 2021_
|
|
105
|
-
|
|
106
|
-
- Breaking: require/import paths have changed
|
|
107
|
-
- Changed: new polyfill CDN urls.
|
|
108
|
-
- Updated: documentation
|
|
109
|
-
- Fixed: `CSSRuleList` edits skipping rules as this is a live list.
|
|
110
|
-
- Fixed: complex `@media` queries not working.
|
|
111
|
-
|
|
112
|
-
**Migrating to 6.0.0**
|
|
113
|
-
|
|
114
|
-
PostCSS plugin :
|
|
115
|
-
|
|
116
|
-
```diff
|
|
117
|
-
- const postcssPrefersColorScheme = require('css-prefers-color-scheme/postcss');
|
|
118
|
-
+ const postcssPrefersColorScheme = require('css-prefers-color-scheme');
|
|
119
|
-
```
|
|
120
|
-
|
|
121
|
-
Browser Polyfill :
|
|
122
|
-
|
|
123
|
-
```diff
|
|
124
|
-
- const prefersColorScheme = require('css-prefers-color-scheme')();
|
|
125
|
-
+ const prefersColorScheme = require('css-prefers-color-scheme/browser')();
|
|
126
|
-
```
|
|
127
|
-
|
|
128
|
-
_The old CND url is now deprecated and will be removed in a next major release._
|
|
129
|
-
_It will continue to work for now._
|
|
130
|
-
|
|
131
|
-
```diff
|
|
132
|
-
- <script src="https://unpkg.com/css-prefers-color-scheme/browser.min"></script>
|
|
133
|
-
+ <script src="https://unpkg.com/css-prefers-color-scheme/dist/browser-global.js"></script>
|
|
134
|
-
```
|
|
135
|
-
|
|
136
|
-
### 5.0.0
|
|
137
|
-
|
|
138
|
-
_September 17, 2021_
|
|
139
|
-
|
|
140
|
-
- Updated: Support for PostCS 8+ (major).
|
|
141
|
-
- Updated: Support for Node 12+ (major).
|
|
142
|
-
|
|
143
|
-
### 4.0.0
|
|
144
|
-
|
|
145
|
-
_May 24, 2019_
|
|
146
|
-
|
|
147
|
-
- Updated: `postcss` to 7.0.16 (patch)
|
|
148
|
-
- Updated: Node 8+ compatibility (major)
|
|
149
|
-
|
|
150
|
-
### 3.1.1
|
|
151
|
-
|
|
152
|
-
_November 10, 2018_
|
|
153
|
-
|
|
154
|
-
- Updated: Project organization. No functional changes.
|
|
155
|
-
|
|
156
|
-
### 3.1.0
|
|
157
|
-
|
|
158
|
-
_November 10, 2018_
|
|
159
|
-
|
|
160
|
-
- Include CLI tool for transforming CSS without any installation
|
|
161
|
-
- Update documentation
|
|
162
|
-
|
|
163
|
-
### 3.0.0
|
|
164
|
-
|
|
165
|
-
_November 4, 2018_
|
|
166
|
-
|
|
167
|
-
- Preserve `prefers-color-scheme` queries by default for non-JS environments
|
|
168
|
-
- Remove `prefers-color-scheme` queries on the frontend for JS environments
|
|
169
|
-
|
|
170
|
-
### 2.0.0
|
|
171
|
-
|
|
172
|
-
_November 3, 2018_
|
|
173
|
-
|
|
174
|
-
- The client library now returns an object with various features, including:
|
|
175
|
-
- `scheme` to get or set the preferred color scheme
|
|
176
|
-
- `hasNativeSupport` to report whether `prefers-color-scheme` is supported
|
|
177
|
-
- `onChange` to listen for when the preferred color scheme changes
|
|
178
|
-
- `removeListener` to destroy the native `prefers-color-scheme` listener
|
|
179
|
-
|
|
180
|
-
### 1.0.0
|
|
181
|
-
|
|
182
|
-
_September 24, 2018_
|
|
183
|
-
|
|
184
|
-
- Initial version
|
|
9
|
+
[Full CHANGELOG](https://github.com/csstools/postcss-plugins/tree/main/plugins/css-prefers-color-scheme/CHANGELOG.md)
|
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Prefers Color Scheme [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][PostCSS]
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
`npm install css-prefers-color-scheme --save-dev`
|
|
4
4
|
|
|
5
5
|
[Prefers Color Scheme] lets you use light and dark color schemes in all browsers, following the [Media Queries] specification.
|
|
6
6
|
|
|
@@ -73,16 +73,7 @@ postcss([
|
|
|
73
73
|
]).process(YOUR_CSS /*, processOptions */);
|
|
74
74
|
```
|
|
75
75
|
|
|
76
|
-
[Prefers Color Scheme] runs in all Node environments, with special
|
|
77
|
-
instructions for:
|
|
78
76
|
|
|
79
|
-
- [Node](INSTALL.md#node)
|
|
80
|
-
- [PostCSS CLI](INSTALL.md#postcss-cli)
|
|
81
|
-
- [PostCSS Load Config](INSTALL.md#postcss-load-config)
|
|
82
|
-
- [Webpack](INSTALL.md#webpack)
|
|
83
|
-
- [Next.js](INSTALL.md#nextjs)
|
|
84
|
-
- [Gulp](INSTALL.md#gulp)
|
|
85
|
-
- [Grunt](INSTALL.md#grunt)
|
|
86
77
|
|
|
87
78
|
## Options
|
|
88
79
|
|
|
@@ -142,12 +133,13 @@ or
|
|
|
142
133
|
|
|
143
134
|
```html
|
|
144
135
|
<!-- When using a CDN url you will have to manually update the version number -->
|
|
145
|
-
<script src="https://unpkg.com/css-prefers-color-scheme@
|
|
136
|
+
<script src="https://unpkg.com/css-prefers-color-scheme@10.0.0/dist/browser-global.js"></script>
|
|
146
137
|
<script>prefersColorSchemeInit()</script>
|
|
147
138
|
```
|
|
148
139
|
|
|
149
|
-
|
|
150
|
-
|
|
140
|
+
> [!TIP]
|
|
141
|
+
> Please use a versioned url, like this : `https://unpkg.com/css-prefers-color-scheme@10.0.0/dist/browser-global.js`
|
|
142
|
+
> Without the version, you might unexpectedly get a new major version of the library with breaking changes.
|
|
151
143
|
|
|
152
144
|
[Prefers Color Scheme] works in all major browsers, including Safari 6+ and
|
|
153
145
|
Internet Explorer 9+ without any additional polyfills.
|
|
@@ -220,7 +212,7 @@ const prefersColorScheme = prefersColorSchemeInit('light', { debug: true });
|
|
|
220
212
|
```
|
|
221
213
|
|
|
222
214
|
```html
|
|
223
|
-
<script src="https://unpkg.com/css-prefers-color-scheme@
|
|
215
|
+
<script src="https://unpkg.com/css-prefers-color-scheme@10.0.0/dist/browser-global.js"></script>
|
|
224
216
|
<script>prefersColorSchemeInit('light', { debug: true })</script>
|
|
225
217
|
```
|
|
226
218
|
|
|
@@ -242,10 +234,11 @@ ECMA Script:
|
|
|
242
234
|
|
|
243
235
|
## CORS
|
|
244
236
|
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
237
|
+
> [!IMPORTANT]
|
|
238
|
+
> Applies to you if you load CSS from a different domain than the page.
|
|
239
|
+
>
|
|
240
|
+
> In this case the CSS is treated as untrusted and will not be made available to the JavaScript polyfill.
|
|
241
|
+
> The polyfill will not work without applying the correct configuration for CORS.
|
|
249
242
|
|
|
250
243
|
Example :
|
|
251
244
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"browser-global.js","sources":["../src/browser.js","../src/browser-global.js"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"browser-global.js","sources":["../src/browser.js","../src/browser-global.js"],"sourcesContent":["const PREFERS_COLOR_SCHEME_REGEX = /prefers-color-scheme:/i;\n\nconst prefersColorSchemeInit = (initialColorScheme, options) => {\n\t// OPTIONS\n\t{\n\t\tif (!options) {\n\t\t\toptions = {};\n\t\t}\n\n\t\toptions = {\n\t\t\tdebug: (!!options.debug) || false,\n\t\t};\n\t}\n\n\tconst mediaQueryString = '(prefers-color-scheme: dark)';\n\tconst mediaQueryList = ('matchMedia' in window) && window.matchMedia(mediaQueryString);\n\tconst hasNativeSupport = mediaQueryList && mediaQueryList.media === mediaQueryString;\n\tconst mediaQueryListener = () => {\n\t\tset((mediaQueryList && mediaQueryList.matches) ? 'dark' : 'light');\n\t};\n\tconst removeListener = () => {\n\t\tif (mediaQueryList) {\n\t\t\tmediaQueryList.removeListener(mediaQueryListener);\n\t\t}\n\t};\n\tconst set = (colorScheme) => {\n\t\tif (colorScheme !== 'dark' && colorScheme !== 'light') {\n\t\t\tif (hasNativeSupport) {\n\t\t\t\tcolorScheme = mediaQueryList.matches ? 'dark' : 'light';\n\t\t\t} else {\n\t\t\t\tcolorScheme = 'light';\n\t\t\t}\n\t\t}\n\n\t\tif (colorScheme !== currentColorScheme) {\n\t\t\tcurrentColorScheme = colorScheme;\n\n\t\t\tif (typeof result.onChange === 'function') {\n\t\t\t\tresult.onChange();\n\t\t\t}\n\t\t}\n\n\t\t[].forEach.call(document.styleSheets || [], styleSheet => {\n\t\t\ttry {\n\t\t\t\t// cssRules is a live list. Converting to an Array first.\n\t\t\t\tconst rules = [];\n\t\t\t\t[].forEach.call(styleSheet.cssRules || [], cssRule => {\n\t\t\t\t\trules.push(cssRule);\n\t\t\t\t});\n\n\t\t\t\trules.forEach(cssRule => {\n\t\t\t\t\tconst colorSchemeMatch = PREFERS_COLOR_SCHEME_REGEX.test(Object(cssRule.media).mediaText);\n\n\t\t\t\t\tif (colorSchemeMatch) {\n\t\t\t\t\t\tconst index = [].indexOf.call(cssRule.parentStyleSheet.cssRules, cssRule);\n\t\t\t\t\t\tcssRule.parentStyleSheet.deleteRule(index);\n\t\t\t\t\t} else {\n\t\t\t\t\t\t// New style which supports complex media queries.\n\t\t\t\t\t\tconst colorDepthMatch = (Object(cssRule.media).mediaText || '').match(/\\( *(?:color|max-color): *(48842621|70318723) *\\)/i);\n\t\t\t\t\t\tif (colorDepthMatch && colorDepthMatch.length > 1) {\n\t\t\t\t\t\t\tif (colorScheme === 'dark' && (colorDepthMatch[1] === '48842621')) {\n\t\t\t\t\t\t\t\t// preferred is dark and rule is dark.\n\t\t\t\t\t\t\t\tcssRule.media.mediaText = cssRule.media.mediaText.replace(/\\( *color: *(?:48842621) *\\)/i, `(max-color: ${colorDepthMatch[1]})`);\n\t\t\t\t\t\t\t} else if (colorScheme === 'light' && (colorDepthMatch[1] === '70318723')) {\n\t\t\t\t\t\t\t\t// preferred is light and rule is light.\n\t\t\t\t\t\t\t\tcssRule.media.mediaText = cssRule.media.mediaText.replace(/\\( *color: *(?:70318723) *\\)/i, `(max-color: ${colorDepthMatch[1]})`);\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tcssRule.media.mediaText = cssRule.media.mediaText.replace(/\\( *max-color: *(?:48842621|70318723) *\\)/i, `(color: ${colorDepthMatch[1]})`);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t} catch (e) {\n\t\t\t\tif (options.debug) {\n\t\t\t\t\tconsole.error(e);\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t};\n\tconst result = Object.defineProperty(\n\t\t{ hasNativeSupport, removeListener },\n\t\t'scheme',\n\t\t{ get: () => currentColorScheme, set },\n\t);\n\n\t// initialize the color scheme using the provided value, the system value, or light\n\tlet currentColorScheme = initialColorScheme || (mediaQueryList && mediaQueryList.matches ? 'dark' : 'light');\n\n\tset(currentColorScheme);\n\n\t// listen for system changes\n\tif (mediaQueryList) {\n\t\tif ('addEventListener' in mediaQueryList) {\n\t\t\tmediaQueryList.addEventListener('change', mediaQueryListener);\n\t\t} else {\n\t\t\tmediaQueryList.addListener(mediaQueryListener);\n\t\t}\n\t}\n\n\treturn result;\n};\n\nexport default prefersColorSchemeInit;\n","import { default as prefersColorSchemeInit } from './browser';\n\n(function (global) {\n\tglobal.prefersColorSchemeInit = prefersColorSchemeInit;\n}('object' === typeof window && window || 'object' === typeof self && self || {}));\n"],"names":["PREFERS_COLOR_SCHEME_REGEX","prefersColorSchemeInit","initialColorScheme","options","debug","mediaQueryString","mediaQueryList","window","matchMedia","hasNativeSupport","media","mediaQueryListener","set","matches","colorScheme","currentColorScheme","result","onChange","forEach","call","document","styleSheets","styleSheet","rules","cssRules","cssRule","push","test","Object","mediaText","index","indexOf","parentStyleSheet","deleteRule","colorDepthMatch","match","length","replace","e","console","error","defineProperty","removeListener","get","addEventListener","addListener","self"],"mappings":"YAAA,IAAMA,EAA6B,yBAE7BC,EAAyB,SAAzBA,uBAA0BC,EAAoBC,GAG7CA,IACJA,EAAU,CAAA,GAGXA,EAAU,CACTC,QAAUD,EAAQC,QAAU,GAI9B,IAAMC,EAAmB,+BACnBC,EAAkB,eAAgBC,QAAWA,OAAOC,WAAWH,GAC/DI,EAAmBH,GAAkBA,EAAeI,QAAUL,EAC9DM,EAAqB,SAArBA,qBACLC,EAAKN,GAAkBA,EAAeO,QAAW,OAAS,UAOrDD,EAAM,SAANA,IAAOE,GACQ,SAAhBA,GAA0C,UAAhBA,IAE5BA,EADGL,GACWH,EAAeO,QAAU,OAEzB,SAIZC,IAAgBC,IACnBA,EAAqBD,EAEU,mBAApBE,EAAOC,UACjBD,EAAOC,YAIT,GAAGC,QAAQC,KAAKC,SAASC,aAAe,IAAI,SAAAC,GAC3C,IAEC,IAAMC,EAAQ,GACd,GAAGL,QAAQC,KAAKG,EAAWE,UAAY,IAAI,SAAAC,GAC1CF,EAAMG,KAAKD,EACZ,IAEAF,EAAML,SAAQ,SAAAO,GAGb,GAFyBzB,EAA2B2B,KAAKC,OAAOH,EAAQf,OAAOmB,WAEzD,CACrB,IAAMC,EAAQ,GAAGC,QAAQZ,KAAKM,EAAQO,iBAAiBR,SAAUC,GACjEA,EAAQO,iBAAiBC,WAAWH,EACrC,KAAO,CAEN,IAAMI,GAAmBN,OAAOH,EAAQf,OAAOmB,WAAa,IAAIM,MAAM,sDAClED,GAAmBA,EAAgBE,OAAS,IAC3B,SAAhBtB,GAAkD,aAAvBoB,EAAgB,GAE9CT,EAAQf,MAAMmB,UAAYJ,EAAQf,MAAMmB,UAAUQ,QAAQ,gCAAgDH,eAAAA,EAAgB,QAChG,UAAhBpB,GAAmD,aAAvBoB,EAAgB,GAEtDT,EAAQf,MAAMmB,UAAYJ,EAAQf,MAAMmB,UAAUQ,QAAQ,gCAAgDH,eAAAA,EAAgB,QAE1HT,EAAQf,MAAMmB,UAAYJ,EAAQf,MAAMmB,UAAUQ,QAAQ,6CAAyDH,WAAAA,EAAgB,QAGtI,CACD,GACA,CAAC,MAAOI,GACJnC,EAAQC,OACXmC,QAAQC,MAAMF,EAEhB,CACD,KAEKtB,EAASY,OAAOa,eACrB,CAAEhC,iBAAAA,EAAkBiC,eA5DE,SAAjBA,iBACDpC,GACHA,EAAeoC,eAAe/B,KA2D/B,SACA,CAAEgC,IAAK,SAALA,MAAG,OAAQ5B,CAAkB,EAAEH,IAAAA,IAI9BG,EAAqBb,IAAuBI,GAAkBA,EAAeO,QAAU,OAAS,SAapG,OAXAD,EAAIG,GAGAT,IACC,qBAAsBA,EACzBA,EAAesC,iBAAiB,SAAUjC,GAE1CL,EAAeuC,YAAYlC,IAItBK,CACR,GChGE,iBAAoBT,QAAUA,QAAU,iBAAoBuC,MAAQA,MAAQ,IADtE7C,uBAAyBA"}
|
package/dist/browser.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"browser.cjs","sources":["../src/browser.js"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"browser.cjs","sources":["../src/browser.js"],"sourcesContent":["const PREFERS_COLOR_SCHEME_REGEX = /prefers-color-scheme:/i;\n\nconst prefersColorSchemeInit = (initialColorScheme, options) => {\n\t// OPTIONS\n\t{\n\t\tif (!options) {\n\t\t\toptions = {};\n\t\t}\n\n\t\toptions = {\n\t\t\tdebug: (!!options.debug) || false,\n\t\t};\n\t}\n\n\tconst mediaQueryString = '(prefers-color-scheme: dark)';\n\tconst mediaQueryList = ('matchMedia' in window) && window.matchMedia(mediaQueryString);\n\tconst hasNativeSupport = mediaQueryList && mediaQueryList.media === mediaQueryString;\n\tconst mediaQueryListener = () => {\n\t\tset((mediaQueryList && mediaQueryList.matches) ? 'dark' : 'light');\n\t};\n\tconst removeListener = () => {\n\t\tif (mediaQueryList) {\n\t\t\tmediaQueryList.removeListener(mediaQueryListener);\n\t\t}\n\t};\n\tconst set = (colorScheme) => {\n\t\tif (colorScheme !== 'dark' && colorScheme !== 'light') {\n\t\t\tif (hasNativeSupport) {\n\t\t\t\tcolorScheme = mediaQueryList.matches ? 'dark' : 'light';\n\t\t\t} else {\n\t\t\t\tcolorScheme = 'light';\n\t\t\t}\n\t\t}\n\n\t\tif (colorScheme !== currentColorScheme) {\n\t\t\tcurrentColorScheme = colorScheme;\n\n\t\t\tif (typeof result.onChange === 'function') {\n\t\t\t\tresult.onChange();\n\t\t\t}\n\t\t}\n\n\t\t[].forEach.call(document.styleSheets || [], styleSheet => {\n\t\t\ttry {\n\t\t\t\t// cssRules is a live list. Converting to an Array first.\n\t\t\t\tconst rules = [];\n\t\t\t\t[].forEach.call(styleSheet.cssRules || [], cssRule => {\n\t\t\t\t\trules.push(cssRule);\n\t\t\t\t});\n\n\t\t\t\trules.forEach(cssRule => {\n\t\t\t\t\tconst colorSchemeMatch = PREFERS_COLOR_SCHEME_REGEX.test(Object(cssRule.media).mediaText);\n\n\t\t\t\t\tif (colorSchemeMatch) {\n\t\t\t\t\t\tconst index = [].indexOf.call(cssRule.parentStyleSheet.cssRules, cssRule);\n\t\t\t\t\t\tcssRule.parentStyleSheet.deleteRule(index);\n\t\t\t\t\t} else {\n\t\t\t\t\t\t// New style which supports complex media queries.\n\t\t\t\t\t\tconst colorDepthMatch = (Object(cssRule.media).mediaText || '').match(/\\( *(?:color|max-color): *(48842621|70318723) *\\)/i);\n\t\t\t\t\t\tif (colorDepthMatch && colorDepthMatch.length > 1) {\n\t\t\t\t\t\t\tif (colorScheme === 'dark' && (colorDepthMatch[1] === '48842621')) {\n\t\t\t\t\t\t\t\t// preferred is dark and rule is dark.\n\t\t\t\t\t\t\t\tcssRule.media.mediaText = cssRule.media.mediaText.replace(/\\( *color: *(?:48842621) *\\)/i, `(max-color: ${colorDepthMatch[1]})`);\n\t\t\t\t\t\t\t} else if (colorScheme === 'light' && (colorDepthMatch[1] === '70318723')) {\n\t\t\t\t\t\t\t\t// preferred is light and rule is light.\n\t\t\t\t\t\t\t\tcssRule.media.mediaText = cssRule.media.mediaText.replace(/\\( *color: *(?:70318723) *\\)/i, `(max-color: ${colorDepthMatch[1]})`);\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tcssRule.media.mediaText = cssRule.media.mediaText.replace(/\\( *max-color: *(?:48842621|70318723) *\\)/i, `(color: ${colorDepthMatch[1]})`);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t} catch (e) {\n\t\t\t\tif (options.debug) {\n\t\t\t\t\tconsole.error(e);\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t};\n\tconst result = Object.defineProperty(\n\t\t{ hasNativeSupport, removeListener },\n\t\t'scheme',\n\t\t{ get: () => currentColorScheme, set },\n\t);\n\n\t// initialize the color scheme using the provided value, the system value, or light\n\tlet currentColorScheme = initialColorScheme || (mediaQueryList && mediaQueryList.matches ? 'dark' : 'light');\n\n\tset(currentColorScheme);\n\n\t// listen for system changes\n\tif (mediaQueryList) {\n\t\tif ('addEventListener' in mediaQueryList) {\n\t\t\tmediaQueryList.addEventListener('change', mediaQueryListener);\n\t\t} else {\n\t\t\tmediaQueryList.addListener(mediaQueryListener);\n\t\t}\n\t}\n\n\treturn result;\n};\n\nexport default prefersColorSchemeInit;\n"],"names":["PREFERS_COLOR_SCHEME_REGEX","prefersColorSchemeInit","initialColorScheme","options","debug","mediaQueryString","mediaQueryList","window","matchMedia","hasNativeSupport","media","mediaQueryListener","set","matches","colorScheme","currentColorScheme","result","onChange","forEach","call","document","styleSheets","styleSheet","rules","cssRules","cssRule","push","test","Object","mediaText","index","indexOf","parentStyleSheet","deleteRule","colorDepthMatch","match","length","replace","e","console","error","defineProperty","removeListener","get","addEventListener","addListener"],"mappings":"AAAA,IAAMA,EAA6B,wCAEJ,SAAzBC,uBAA0BC,EAAoBC,GAG7CA,IACJA,EAAU,CAAA,GAGXA,EAAU,CACTC,QAAUD,EAAQC,QAAU,GAI9B,IAAMC,EAAmB,+BACnBC,EAAkB,eAAgBC,QAAWA,OAAOC,WAAWH,GAC/DI,EAAmBH,GAAkBA,EAAeI,QAAUL,EAC9DM,EAAqB,SAArBA,qBACLC,EAAKN,GAAkBA,EAAeO,QAAW,OAAS,UAOrDD,EAAM,SAANA,IAAOE,GACQ,SAAhBA,GAA0C,UAAhBA,IAE5BA,EADGL,GACWH,EAAeO,QAAU,OAEzB,SAIZC,IAAgBC,IACnBA,EAAqBD,EAEU,mBAApBE,EAAOC,UACjBD,EAAOC,YAIT,GAAGC,QAAQC,KAAKC,SAASC,aAAe,IAAI,SAAAC,GAC3C,IAEC,IAAMC,EAAQ,GACd,GAAGL,QAAQC,KAAKG,EAAWE,UAAY,IAAI,SAAAC,GAC1CF,EAAMG,KAAKD,EACZ,IAEAF,EAAML,SAAQ,SAAAO,GAGb,GAFyBzB,EAA2B2B,KAAKC,OAAOH,EAAQf,OAAOmB,WAEzD,CACrB,IAAMC,EAAQ,GAAGC,QAAQZ,KAAKM,EAAQO,iBAAiBR,SAAUC,GACjEA,EAAQO,iBAAiBC,WAAWH,EACrC,KAAO,CAEN,IAAMI,GAAmBN,OAAOH,EAAQf,OAAOmB,WAAa,IAAIM,MAAM,sDAClED,GAAmBA,EAAgBE,OAAS,IAC3B,SAAhBtB,GAAkD,aAAvBoB,EAAgB,GAE9CT,EAAQf,MAAMmB,UAAYJ,EAAQf,MAAMmB,UAAUQ,QAAQ,gCAAgDH,eAAAA,EAAgB,QAChG,UAAhBpB,GAAmD,aAAvBoB,EAAgB,GAEtDT,EAAQf,MAAMmB,UAAYJ,EAAQf,MAAMmB,UAAUQ,QAAQ,gCAAgDH,eAAAA,EAAgB,QAE1HT,EAAQf,MAAMmB,UAAYJ,EAAQf,MAAMmB,UAAUQ,QAAQ,6CAAyDH,WAAAA,EAAgB,QAGtI,CACD,GACA,CAAC,MAAOI,GACJnC,EAAQC,OACXmC,QAAQC,MAAMF,EAEhB,CACD,KAEKtB,EAASY,OAAOa,eACrB,CAAEhC,iBAAAA,EAAkBiC,eA5DE,SAAjBA,iBACDpC,GACHA,EAAeoC,eAAe/B,KA2D/B,SACA,CAAEgC,IAAK,SAALA,MAAG,OAAQ5B,CAAkB,EAAEH,IAAAA,IAI9BG,EAAqBb,IAAuBI,GAAkBA,EAAeO,QAAU,OAAS,SAapG,OAXAD,EAAIG,GAGAT,IACC,qBAAsBA,EACzBA,EAAesC,iBAAiB,SAAUjC,GAE1CL,EAAeuC,YAAYlC,IAItBK,CACR"}
|
package/dist/browser.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"browser.mjs","sources":["../src/browser.js"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"browser.mjs","sources":["../src/browser.js"],"sourcesContent":["const PREFERS_COLOR_SCHEME_REGEX = /prefers-color-scheme:/i;\n\nconst prefersColorSchemeInit = (initialColorScheme, options) => {\n\t// OPTIONS\n\t{\n\t\tif (!options) {\n\t\t\toptions = {};\n\t\t}\n\n\t\toptions = {\n\t\t\tdebug: (!!options.debug) || false,\n\t\t};\n\t}\n\n\tconst mediaQueryString = '(prefers-color-scheme: dark)';\n\tconst mediaQueryList = ('matchMedia' in window) && window.matchMedia(mediaQueryString);\n\tconst hasNativeSupport = mediaQueryList && mediaQueryList.media === mediaQueryString;\n\tconst mediaQueryListener = () => {\n\t\tset((mediaQueryList && mediaQueryList.matches) ? 'dark' : 'light');\n\t};\n\tconst removeListener = () => {\n\t\tif (mediaQueryList) {\n\t\t\tmediaQueryList.removeListener(mediaQueryListener);\n\t\t}\n\t};\n\tconst set = (colorScheme) => {\n\t\tif (colorScheme !== 'dark' && colorScheme !== 'light') {\n\t\t\tif (hasNativeSupport) {\n\t\t\t\tcolorScheme = mediaQueryList.matches ? 'dark' : 'light';\n\t\t\t} else {\n\t\t\t\tcolorScheme = 'light';\n\t\t\t}\n\t\t}\n\n\t\tif (colorScheme !== currentColorScheme) {\n\t\t\tcurrentColorScheme = colorScheme;\n\n\t\t\tif (typeof result.onChange === 'function') {\n\t\t\t\tresult.onChange();\n\t\t\t}\n\t\t}\n\n\t\t[].forEach.call(document.styleSheets || [], styleSheet => {\n\t\t\ttry {\n\t\t\t\t// cssRules is a live list. Converting to an Array first.\n\t\t\t\tconst rules = [];\n\t\t\t\t[].forEach.call(styleSheet.cssRules || [], cssRule => {\n\t\t\t\t\trules.push(cssRule);\n\t\t\t\t});\n\n\t\t\t\trules.forEach(cssRule => {\n\t\t\t\t\tconst colorSchemeMatch = PREFERS_COLOR_SCHEME_REGEX.test(Object(cssRule.media).mediaText);\n\n\t\t\t\t\tif (colorSchemeMatch) {\n\t\t\t\t\t\tconst index = [].indexOf.call(cssRule.parentStyleSheet.cssRules, cssRule);\n\t\t\t\t\t\tcssRule.parentStyleSheet.deleteRule(index);\n\t\t\t\t\t} else {\n\t\t\t\t\t\t// New style which supports complex media queries.\n\t\t\t\t\t\tconst colorDepthMatch = (Object(cssRule.media).mediaText || '').match(/\\( *(?:color|max-color): *(48842621|70318723) *\\)/i);\n\t\t\t\t\t\tif (colorDepthMatch && colorDepthMatch.length > 1) {\n\t\t\t\t\t\t\tif (colorScheme === 'dark' && (colorDepthMatch[1] === '48842621')) {\n\t\t\t\t\t\t\t\t// preferred is dark and rule is dark.\n\t\t\t\t\t\t\t\tcssRule.media.mediaText = cssRule.media.mediaText.replace(/\\( *color: *(?:48842621) *\\)/i, `(max-color: ${colorDepthMatch[1]})`);\n\t\t\t\t\t\t\t} else if (colorScheme === 'light' && (colorDepthMatch[1] === '70318723')) {\n\t\t\t\t\t\t\t\t// preferred is light and rule is light.\n\t\t\t\t\t\t\t\tcssRule.media.mediaText = cssRule.media.mediaText.replace(/\\( *color: *(?:70318723) *\\)/i, `(max-color: ${colorDepthMatch[1]})`);\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tcssRule.media.mediaText = cssRule.media.mediaText.replace(/\\( *max-color: *(?:48842621|70318723) *\\)/i, `(color: ${colorDepthMatch[1]})`);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t} catch (e) {\n\t\t\t\tif (options.debug) {\n\t\t\t\t\tconsole.error(e);\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t};\n\tconst result = Object.defineProperty(\n\t\t{ hasNativeSupport, removeListener },\n\t\t'scheme',\n\t\t{ get: () => currentColorScheme, set },\n\t);\n\n\t// initialize the color scheme using the provided value, the system value, or light\n\tlet currentColorScheme = initialColorScheme || (mediaQueryList && mediaQueryList.matches ? 'dark' : 'light');\n\n\tset(currentColorScheme);\n\n\t// listen for system changes\n\tif (mediaQueryList) {\n\t\tif ('addEventListener' in mediaQueryList) {\n\t\t\tmediaQueryList.addEventListener('change', mediaQueryListener);\n\t\t} else {\n\t\t\tmediaQueryList.addListener(mediaQueryListener);\n\t\t}\n\t}\n\n\treturn result;\n};\n\nexport default prefersColorSchemeInit;\n"],"names":["PREFERS_COLOR_SCHEME_REGEX","prefersColorSchemeInit","initialColorScheme","options","debug","mediaQueryString","mediaQueryList","window","matchMedia","hasNativeSupport","media","mediaQueryListener","set","matches","colorScheme","currentColorScheme","result","onChange","forEach","call","document","styleSheets","styleSheet","rules","cssRules","cssRule","push","test","Object","mediaText","index","indexOf","parentStyleSheet","deleteRule","colorDepthMatch","match","length","replace","e","console","error","defineProperty","removeListener","get","addEventListener","addListener"],"mappings":"AAAA,IAAMA,EAA6B,yBAE7BC,EAAyB,SAAzBA,uBAA0BC,EAAoBC,GAG7CA,IACJA,EAAU,CAAA,GAGXA,EAAU,CACTC,QAAUD,EAAQC,QAAU,GAI9B,IAAMC,EAAmB,+BACnBC,EAAkB,eAAgBC,QAAWA,OAAOC,WAAWH,GAC/DI,EAAmBH,GAAkBA,EAAeI,QAAUL,EAC9DM,EAAqB,SAArBA,qBACLC,EAAKN,GAAkBA,EAAeO,QAAW,OAAS,UAOrDD,EAAM,SAANA,IAAOE,GACQ,SAAhBA,GAA0C,UAAhBA,IAE5BA,EADGL,GACWH,EAAeO,QAAU,OAEzB,SAIZC,IAAgBC,IACnBA,EAAqBD,EAEU,mBAApBE,EAAOC,UACjBD,EAAOC,YAIT,GAAGC,QAAQC,KAAKC,SAASC,aAAe,IAAI,SAAAC,GAC3C,IAEC,IAAMC,EAAQ,GACd,GAAGL,QAAQC,KAAKG,EAAWE,UAAY,IAAI,SAAAC,GAC1CF,EAAMG,KAAKD,EACZ,IAEAF,EAAML,SAAQ,SAAAO,GAGb,GAFyBzB,EAA2B2B,KAAKC,OAAOH,EAAQf,OAAOmB,WAEzD,CACrB,IAAMC,EAAQ,GAAGC,QAAQZ,KAAKM,EAAQO,iBAAiBR,SAAUC,GACjEA,EAAQO,iBAAiBC,WAAWH,EACrC,KAAO,CAEN,IAAMI,GAAmBN,OAAOH,EAAQf,OAAOmB,WAAa,IAAIM,MAAM,sDAClED,GAAmBA,EAAgBE,OAAS,IAC3B,SAAhBtB,GAAkD,aAAvBoB,EAAgB,GAE9CT,EAAQf,MAAMmB,UAAYJ,EAAQf,MAAMmB,UAAUQ,QAAQ,gCAAgDH,eAAAA,EAAgB,QAChG,UAAhBpB,GAAmD,aAAvBoB,EAAgB,GAEtDT,EAAQf,MAAMmB,UAAYJ,EAAQf,MAAMmB,UAAUQ,QAAQ,gCAAgDH,eAAAA,EAAgB,QAE1HT,EAAQf,MAAMmB,UAAYJ,EAAQf,MAAMmB,UAAUQ,QAAQ,6CAAyDH,WAAAA,EAAgB,QAGtI,CACD,GACA,CAAC,MAAOI,GACJnC,EAAQC,OACXmC,QAAQC,MAAMF,EAEhB,CACD,KAEKtB,EAASY,OAAOa,eACrB,CAAEhC,iBAAAA,EAAkBiC,eA5DE,SAAjBA,iBACDpC,GACHA,EAAeoC,eAAe/B,KA2D/B,SACA,CAAEgC,IAAK,SAALA,MAAG,OAAQ5B,CAAkB,EAAEH,IAAAA,IAI9BG,EAAqBb,IAAuBI,GAAkBA,EAAeO,QAAU,OAAS,SAapG,OAXAD,EAAIG,GAGAT,IACC,qBAAsBA,EACzBA,EAAesC,iBAAiB,SAAUjC,GAE1CL,EAAeuC,YAAYlC,IAItBK,CACR"}
|
package/dist/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";const e=/\(\s*prefers-color-scheme\s*:\s*(dark|light)\s*\)/gi,
|
|
1
|
+
"use strict";const e=/\(\s*prefers-color-scheme\s*:\s*(dark|light)\s*\)/gi,s="(color: 48842621)",r="(color: 70318723)",creator=o=>{const t=Object.assign({preserve:!0},o);return{postcssPlugin:"postcss-prefers-color-scheme",prepare(){const o=new WeakSet;return{postcssPlugin:"postcss-prefers-color-scheme",AtRule(c){if(o.has(c))return;if("media"!==c.name.toLowerCase())return;const{params:a}=c,p=a.replace(e,((e,o)=>"dark"===o.toLowerCase()?s:"light"===o.toLowerCase()?r:e));a!==p&&(o.add(c),c.cloneBefore({params:p}),t.preserve||c.remove())}}}}};creator.postcss=!0,module.exports=creator;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,8 +1,12 @@
|
|
|
1
1
|
import type { PluginCreator } from 'postcss';
|
|
2
|
+
|
|
3
|
+
declare const creator: PluginCreator<pluginOptions>;
|
|
4
|
+
export default creator;
|
|
5
|
+
|
|
2
6
|
/** postcss-prefers-color-scheme plugin options */
|
|
3
|
-
export type pluginOptions = {
|
|
7
|
+
export declare type pluginOptions = {
|
|
4
8
|
/** Preserve the original notation. default: true */
|
|
5
9
|
preserve?: boolean;
|
|
6
10
|
};
|
|
7
|
-
|
|
8
|
-
export
|
|
11
|
+
|
|
12
|
+
export { }
|
package/dist/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
const e=/\(\s*prefers-color-scheme\s*:\s*(dark|light)\s*\)/gi,
|
|
1
|
+
const e=/\(\s*prefers-color-scheme\s*:\s*(dark|light)\s*\)/gi,s="(color: 48842621)",r="(color: 70318723)",creator=o=>{const t=Object.assign({preserve:!0},o);return{postcssPlugin:"postcss-prefers-color-scheme",prepare(){const o=new WeakSet;return{postcssPlugin:"postcss-prefers-color-scheme",AtRule(c){if(o.has(c))return;if("media"!==c.name.toLowerCase())return;const{params:a}=c,p=a.replace(e,((e,o)=>"dark"===o.toLowerCase()?s:"light"===o.toLowerCase()?r:e));a!==p&&(o.add(c),c.cloneBefore({params:p}),t.preserve||c.remove())}}}}};creator.postcss=!0;export{creator as default};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "css-prefers-color-scheme",
|
|
3
3
|
"description": "Use light and dark color schemes in all browsers",
|
|
4
|
-
"version": "
|
|
4
|
+
"version": "10.0.0",
|
|
5
5
|
"contributors": [
|
|
6
6
|
{
|
|
7
7
|
"name": "Antonio Laguna",
|
|
@@ -29,17 +29,20 @@
|
|
|
29
29
|
}
|
|
30
30
|
],
|
|
31
31
|
"engines": {
|
|
32
|
-
"node": "
|
|
32
|
+
"node": ">=18"
|
|
33
33
|
},
|
|
34
|
+
"type": "module",
|
|
34
35
|
"main": "dist/index.cjs",
|
|
35
36
|
"module": "dist/index.mjs",
|
|
36
|
-
"types": "dist/index.d.ts",
|
|
37
37
|
"exports": {
|
|
38
38
|
".": {
|
|
39
|
-
"
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
39
|
+
"import": {
|
|
40
|
+
"types": "./dist/index.d.ts",
|
|
41
|
+
"default": "./dist/index.mjs"
|
|
42
|
+
},
|
|
43
|
+
"require": {
|
|
44
|
+
"default": "./dist/index.cjs"
|
|
45
|
+
}
|
|
43
46
|
},
|
|
44
47
|
"./browser": {
|
|
45
48
|
"import": "./dist/browser.mjs",
|
|
@@ -59,23 +62,11 @@
|
|
|
59
62
|
"peerDependencies": {
|
|
60
63
|
"postcss": "^8.4"
|
|
61
64
|
},
|
|
62
|
-
"
|
|
63
|
-
"@csstools/postcss-tape": "*",
|
|
64
|
-
"puppeteer": "^20.7.4"
|
|
65
|
-
},
|
|
66
|
-
"scripts": {
|
|
67
|
-
"build": "rollup -c ../../rollup/default.mjs",
|
|
68
|
-
"docs": "node ../../.github/bin/generate-docs/install.mjs && node ../../.github/bin/generate-docs/readme.mjs",
|
|
69
|
-
"lint": "node ../../.github/bin/format-package-json.mjs",
|
|
70
|
-
"prepublishOnly": "npm run build && npm run test",
|
|
71
|
-
"test": "node .tape.mjs && node ./test/_import.mjs && node ./test/_require.cjs",
|
|
72
|
-
"test:browser": "node ./test/_browser.mjs",
|
|
73
|
-
"test:rewrite-expects": "REWRITE_EXPECTS=true node .tape.mjs"
|
|
74
|
-
},
|
|
65
|
+
"scripts": {},
|
|
75
66
|
"homepage": "https://github.com/csstools/postcss-plugins/tree/main/plugins/css-prefers-color-scheme#readme",
|
|
76
67
|
"repository": {
|
|
77
68
|
"type": "git",
|
|
78
|
-
"url": "https://github.com/csstools/postcss-plugins.git",
|
|
69
|
+
"url": "git+https://github.com/csstools/postcss-plugins.git",
|
|
79
70
|
"directory": "plugins/css-prefers-color-scheme"
|
|
80
71
|
},
|
|
81
72
|
"bugs": "https://github.com/csstools/postcss-plugins/issues",
|
|
@@ -94,14 +85,5 @@
|
|
|
94
85
|
"queries",
|
|
95
86
|
"query",
|
|
96
87
|
"scheme"
|
|
97
|
-
]
|
|
98
|
-
"csstools": {
|
|
99
|
-
"cssdbId": "prefers-color-scheme-query",
|
|
100
|
-
"exportName": "prefersColorScheme",
|
|
101
|
-
"humanReadableName": "Prefers Color Scheme",
|
|
102
|
-
"specUrl": "https://www.w3.org/TR/mediaqueries-5/#prefers-color-scheme"
|
|
103
|
-
},
|
|
104
|
-
"volta": {
|
|
105
|
-
"extends": "../../package.json"
|
|
106
|
-
}
|
|
88
|
+
]
|
|
107
89
|
}
|