css-prefers-color-scheme 9.0.1 → 11.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 -15
- package/README.md +6 -19
- package/dist/browser-global.js +1 -1
- package/dist/browser-global.js.map +1 -1
- package/dist/browser.cjs +1 -1
- package/dist/browser.cjs.map +1 -1
- package/dist/browser.mjs +1 -1
- package/dist/browser.mjs.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.mjs +1 -1
- package/package.json +6 -12
- package/dist/index.cjs +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,21 +1,10 @@
|
|
|
1
1
|
# Changes to Prefers Color Scheme
|
|
2
2
|
|
|
3
|
-
###
|
|
3
|
+
### 11.0.0
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
_January 14, 2026_
|
|
6
6
|
|
|
7
|
-
-
|
|
8
|
-
|
|
9
|
-
### 9.0.0
|
|
10
|
-
|
|
11
|
-
_July 3, 2023_
|
|
12
|
-
|
|
13
|
-
- Change license to `MIT-0` ([read more about this change in the blog post](https://preset-env.cssdb.org/blog/license-change/))
|
|
14
|
-
|
|
15
|
-
### 8.0.2
|
|
16
|
-
|
|
17
|
-
_February 6, 2023_
|
|
18
|
-
|
|
19
|
-
- Reduce the amount of duplicate fallback CSS.
|
|
7
|
+
- Updated: Support for Node `20.19.0` or later (major).
|
|
8
|
+
- Removed: `commonjs` API. In supported Node versions `require(esm)` will work without needing to make code changes.
|
|
20
9
|
|
|
21
10
|
[Full CHANGELOG](https://github.com/csstools/postcss-plugins/tree/main/plugins/css-prefers-color-scheme/CHANGELOG.md)
|
package/README.md
CHANGED
|
@@ -1,10 +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
|
-
|
|
4
|
-
|
|
5
|
-
```bash
|
|
6
|
-
npm install css-prefers-color-scheme --save-dev
|
|
7
|
-
```
|
|
3
|
+
`npm install css-prefers-color-scheme --save-dev`
|
|
8
4
|
|
|
9
5
|
[Prefers Color Scheme] lets you use light and dark color schemes in all browsers, following the [Media Queries] specification.
|
|
10
6
|
|
|
@@ -12,7 +8,7 @@ To use this feature you need to do two things :
|
|
|
12
8
|
- add the [PostCSS plugin](#usage) that transforms the media queries
|
|
13
9
|
- add the [browser polyfill](#browser) that triggers specific queries in a browser
|
|
14
10
|
|
|
15
|
-
```
|
|
11
|
+
```css
|
|
16
12
|
@media (prefers-color-scheme: dark) {
|
|
17
13
|
:root {
|
|
18
14
|
--site-bgcolor: #1b1b1b;
|
|
@@ -77,16 +73,7 @@ postcss([
|
|
|
77
73
|
]).process(YOUR_CSS /*, processOptions */);
|
|
78
74
|
```
|
|
79
75
|
|
|
80
|
-
[Prefers Color Scheme] runs in all Node environments, with special
|
|
81
|
-
instructions for:
|
|
82
76
|
|
|
83
|
-
- [Node](INSTALL.md#node)
|
|
84
|
-
- [PostCSS CLI](INSTALL.md#postcss-cli)
|
|
85
|
-
- [PostCSS Load Config](INSTALL.md#postcss-load-config)
|
|
86
|
-
- [Webpack](INSTALL.md#webpack)
|
|
87
|
-
- [Next.js](INSTALL.md#nextjs)
|
|
88
|
-
- [Gulp](INSTALL.md#gulp)
|
|
89
|
-
- [Grunt](INSTALL.md#grunt)
|
|
90
77
|
|
|
91
78
|
## Options
|
|
92
79
|
|
|
@@ -99,7 +86,7 @@ is preserved. By default, it is preserved.
|
|
|
99
86
|
prefersColorScheme({ preserve: false })
|
|
100
87
|
```
|
|
101
88
|
|
|
102
|
-
```
|
|
89
|
+
```css
|
|
103
90
|
@media (prefers-color-scheme: dark) {
|
|
104
91
|
:root {
|
|
105
92
|
--site-bgcolor: #1b1b1b;
|
|
@@ -146,12 +133,12 @@ or
|
|
|
146
133
|
|
|
147
134
|
```html
|
|
148
135
|
<!-- When using a CDN url you will have to manually update the version number -->
|
|
149
|
-
<script src="https://unpkg.com/css-prefers-color-scheme@
|
|
136
|
+
<script src="https://unpkg.com/css-prefers-color-scheme@11.0.0/dist/browser-global.js"></script>
|
|
150
137
|
<script>prefersColorSchemeInit()</script>
|
|
151
138
|
```
|
|
152
139
|
|
|
153
140
|
> [!TIP]
|
|
154
|
-
> Please use a versioned url, like this : `https://unpkg.com/css-prefers-color-scheme@
|
|
141
|
+
> Please use a versioned url, like this : `https://unpkg.com/css-prefers-color-scheme@11.0.0/dist/browser-global.js`
|
|
155
142
|
> Without the version, you might unexpectedly get a new major version of the library with breaking changes.
|
|
156
143
|
|
|
157
144
|
[Prefers Color Scheme] works in all major browsers, including Safari 6+ and
|
|
@@ -225,7 +212,7 @@ const prefersColorScheme = prefersColorSchemeInit('light', { debug: true });
|
|
|
225
212
|
```
|
|
226
213
|
|
|
227
214
|
```html
|
|
228
|
-
<script src="https://unpkg.com/css-prefers-color-scheme@
|
|
215
|
+
<script src="https://unpkg.com/css-prefers-color-scheme@11.0.0/dist/browser-global.js"></script>
|
|
229
216
|
<script>prefersColorSchemeInit('light', { debug: true })</script>
|
|
230
217
|
```
|
|
231
218
|
|
package/dist/browser-global.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
!function(){var e=/prefers-color-scheme:/i,t=function prefersColorSchemeInit(t,a){a||(a={}),a={debug:!!a.debug||!1};var r="(prefers-color-scheme: dark)",i="matchMedia"in window&&window.matchMedia(r),o=i&&i.media===r,c=function mediaQueryListener(){n(i&&i.matches?"dark":"light")},n=function set(t){"dark"!==t&&"light"!==t&&(t=o&&i.matches?"dark":"light"),t!==l&&(l=t,"function"==typeof d.onChange&&d.onChange()),[].forEach.call(document.styleSheets||[],
|
|
1
|
+
!function(){var e=/prefers-color-scheme:/i,t=function prefersColorSchemeInit(t,a){a||(a={}),a={debug:!!a.debug||!1};var r="(prefers-color-scheme: dark)",i="matchMedia"in window&&window.matchMedia(r),o=i&&i.media===r,c=function mediaQueryListener(){n(i&&i.matches?"dark":"light")},n=function set(t){"dark"!==t&&"light"!==t&&(t=o&&i.matches?"dark":"light"),t!==l&&(l=t,"function"==typeof d.onChange&&d.onChange()),[].forEach.call(document.styleSheets||[],function(r){try{var i=[];[].forEach.call(r.cssRules||[],function(e){i.push(e)}),i.forEach(function(a){if(e.test(Object(a.media).mediaText)){var r=[].indexOf.call(a.parentStyleSheet.cssRules,a);a.parentStyleSheet.deleteRule(r)}else{var i=(Object(a.media).mediaText||"").match(/\( *(?:color|max-color): *(48842621|70318723) *\)/i);i&&i.length>1&&("dark"===t&&"48842621"===i[1]?a.media.mediaText=a.media.mediaText.replace(/\( *color: *(?:48842621) *\)/i,"(max-color: "+i[1]+")"):"light"===t&&"70318723"===i[1]?a.media.mediaText=a.media.mediaText.replace(/\( *color: *(?:70318723) *\)/i,"(max-color: "+i[1]+")"):a.media.mediaText=a.media.mediaText.replace(/\( *max-color: *(?:48842621|70318723) *\)/i,"(color: "+i[1]+")"))}})}catch(o){a.debug&&console.error(o)}})},d=Object.defineProperty({hasNativeSupport:o,removeListener:function removeListener(){i&&i.removeListener(c)}},"scheme",{get:function get(){return l},set:n}),l=t||(i&&i.matches?"dark":"light");return n(l),i&&("addEventListener"in i?i.addEventListener("change",c):i.addListener(c)),d};("object"==typeof window&&window||"object"==typeof self&&self||{}).prefersColorSchemeInit=t}();
|
|
2
2
|
//# sourceMappingURL=browser-global.js.map
|
|
@@ -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\t// eslint-disable-next-line no-console\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,QAC3D,EAMMD,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,GAAI,SAAAC,GAC3C,IAEC,IAAMC,EAAQ,GACd,GAAGL,QAAQC,KAAKG,EAAWE,UAAY,GAAI,SAAAC,GAC1CF,EAAMG,KAAKD,EACZ,GAEAF,EAAML,QAAQ,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,gCAA+B,eAAiBH,EAAgB,QAChG,UAAhBpB,GAAmD,aAAvBoB,EAAgB,GAEtDT,EAAQf,MAAMmB,UAAYJ,EAAQf,MAAMmB,UAAUQ,QAAQ,gCAA+B,eAAiBH,EAAgB,QAE1HT,EAAQf,MAAMmB,UAAYJ,EAAQf,MAAMmB,UAAUQ,QAAQ,6CAA4C,WAAaH,EAAgB,QAGtI,CACD,EACD,CAAE,MAAOI,GACJnC,EAAQC,OAEXmC,QAAQC,MAAMF,EAEhB,CACD,EACD,EACMtB,EAASY,OAAOa,eACrB,CAAEhC,iBAAAA,EAAkBiC,eA7DE,SAAjBA,iBACDpC,GACHA,EAAeoC,eAAe/B,EAEhC,GA0DC,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,GCjGE,iBAAoBT,QAAUA,QAAU,iBAAoBuC,MAAQA,MAAQ,IADtE7C,uBAAyBA"}
|
package/dist/browser.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var e=/prefers-color-scheme:/i;module.exports=function prefersColorSchemeInit(t,a){a||(a={}),a={debug:!!a.debug||!1};var r="(prefers-color-scheme: dark)",i="matchMedia"in window&&window.matchMedia(r),o=i&&i.media===r,c=function mediaQueryListener(){n(i&&i.matches?"dark":"light")},n=function set(t){"dark"!==t&&"light"!==t&&(t=o&&i.matches?"dark":"light"),t!==m&&(m=t,"function"==typeof d.onChange&&d.onChange()),[].forEach.call(document.styleSheets||[],
|
|
1
|
+
var e=/prefers-color-scheme:/i;module.exports=function prefersColorSchemeInit(t,a){a||(a={}),a={debug:!!a.debug||!1};var r="(prefers-color-scheme: dark)",i="matchMedia"in window&&window.matchMedia(r),o=i&&i.media===r,c=function mediaQueryListener(){n(i&&i.matches?"dark":"light")},n=function set(t){"dark"!==t&&"light"!==t&&(t=o&&i.matches?"dark":"light"),t!==m&&(m=t,"function"==typeof d.onChange&&d.onChange()),[].forEach.call(document.styleSheets||[],function(r){try{var i=[];[].forEach.call(r.cssRules||[],function(e){i.push(e)}),i.forEach(function(a){if(e.test(Object(a.media).mediaText)){var r=[].indexOf.call(a.parentStyleSheet.cssRules,a);a.parentStyleSheet.deleteRule(r)}else{var i=(Object(a.media).mediaText||"").match(/\( *(?:color|max-color): *(48842621|70318723) *\)/i);i&&i.length>1&&("dark"===t&&"48842621"===i[1]?a.media.mediaText=a.media.mediaText.replace(/\( *color: *(?:48842621) *\)/i,"(max-color: "+i[1]+")"):"light"===t&&"70318723"===i[1]?a.media.mediaText=a.media.mediaText.replace(/\( *color: *(?:70318723) *\)/i,"(max-color: "+i[1]+")"):a.media.mediaText=a.media.mediaText.replace(/\( *max-color: *(?:48842621|70318723) *\)/i,"(color: "+i[1]+")"))}})}catch(o){a.debug&&console.error(o)}})},d=Object.defineProperty({hasNativeSupport:o,removeListener:function removeListener(){i&&i.removeListener(c)}},"scheme",{get:function get(){return m},set:n}),m=t||(i&&i.matches?"dark":"light");return n(m),i&&("addEventListener"in i?i.addEventListener("change",c):i.addListener(c)),d};
|
|
2
2
|
//# sourceMappingURL=browser.cjs.map
|
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\t// eslint-disable-next-line no-console\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,QAC3D,EAMMD,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,GAAI,SAAAC,GAC3C,IAEC,IAAMC,EAAQ,GACd,GAAGL,QAAQC,KAAKG,EAAWE,UAAY,GAAI,SAAAC,GAC1CF,EAAMG,KAAKD,EACZ,GAEAF,EAAML,QAAQ,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,gCAA+B,eAAiBH,EAAgB,QAChG,UAAhBpB,GAAmD,aAAvBoB,EAAgB,GAEtDT,EAAQf,MAAMmB,UAAYJ,EAAQf,MAAMmB,UAAUQ,QAAQ,gCAA+B,eAAiBH,EAAgB,QAE1HT,EAAQf,MAAMmB,UAAYJ,EAAQf,MAAMmB,UAAUQ,QAAQ,6CAA4C,WAAaH,EAAgB,QAGtI,CACD,EACD,CAAE,MAAOI,GACJnC,EAAQC,OAEXmC,QAAQC,MAAMF,EAEhB,CACD,EACD,EACMtB,EAASY,OAAOa,eACrB,CAAEhC,iBAAAA,EAAkBiC,eA7DE,SAAjBA,iBACDpC,GACHA,EAAeoC,eAAe/B,EAEhC,GA0DC,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
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var e=/prefers-color-scheme:/i,t=function prefersColorSchemeInit(t,a){a||(a={}),a={debug:!!a.debug||!1};var r="(prefers-color-scheme: dark)",i="matchMedia"in window&&window.matchMedia(r),o=i&&i.media===r,c=function mediaQueryListener(){n(i&&i.matches?"dark":"light")},n=function set(t){"dark"!==t&&"light"!==t&&(t=o&&i.matches?"dark":"light"),t!==l&&(l=t,"function"==typeof d.onChange&&d.onChange()),[].forEach.call(document.styleSheets||[],
|
|
1
|
+
var e=/prefers-color-scheme:/i,t=function prefersColorSchemeInit(t,a){a||(a={}),a={debug:!!a.debug||!1};var r="(prefers-color-scheme: dark)",i="matchMedia"in window&&window.matchMedia(r),o=i&&i.media===r,c=function mediaQueryListener(){n(i&&i.matches?"dark":"light")},n=function set(t){"dark"!==t&&"light"!==t&&(t=o&&i.matches?"dark":"light"),t!==l&&(l=t,"function"==typeof d.onChange&&d.onChange()),[].forEach.call(document.styleSheets||[],function(r){try{var i=[];[].forEach.call(r.cssRules||[],function(e){i.push(e)}),i.forEach(function(a){if(e.test(Object(a.media).mediaText)){var r=[].indexOf.call(a.parentStyleSheet.cssRules,a);a.parentStyleSheet.deleteRule(r)}else{var i=(Object(a.media).mediaText||"").match(/\( *(?:color|max-color): *(48842621|70318723) *\)/i);i&&i.length>1&&("dark"===t&&"48842621"===i[1]?a.media.mediaText=a.media.mediaText.replace(/\( *color: *(?:48842621) *\)/i,"(max-color: "+i[1]+")"):"light"===t&&"70318723"===i[1]?a.media.mediaText=a.media.mediaText.replace(/\( *color: *(?:70318723) *\)/i,"(max-color: "+i[1]+")"):a.media.mediaText=a.media.mediaText.replace(/\( *max-color: *(?:48842621|70318723) *\)/i,"(color: "+i[1]+")"))}})}catch(o){a.debug&&console.error(o)}})},d=Object.defineProperty({hasNativeSupport:o,removeListener:function removeListener(){i&&i.removeListener(c)}},"scheme",{get:function get(){return l},set:n}),l=t||(i&&i.matches?"dark":"light");return n(l),i&&("addEventListener"in i?i.addEventListener("change",c):i.addListener(c)),d};export{t as default};
|
|
2
2
|
//# sourceMappingURL=browser.mjs.map
|
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\t// eslint-disable-next-line no-console\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,QAC3D,EAMMD,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,GAAI,SAAAC,GAC3C,IAEC,IAAMC,EAAQ,GACd,GAAGL,QAAQC,KAAKG,EAAWE,UAAY,GAAI,SAAAC,GAC1CF,EAAMG,KAAKD,EACZ,GAEAF,EAAML,QAAQ,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,gCAA+B,eAAiBH,EAAgB,QAChG,UAAhBpB,GAAmD,aAAvBoB,EAAgB,GAEtDT,EAAQf,MAAMmB,UAAYJ,EAAQf,MAAMmB,UAAUQ,QAAQ,gCAA+B,eAAiBH,EAAgB,QAE1HT,EAAQf,MAAMmB,UAAYJ,EAAQf,MAAMmB,UAAUQ,QAAQ,6CAA4C,WAAaH,EAAgB,QAGtI,CACD,EACD,CAAE,MAAOI,GACJnC,EAAQC,OAEXmC,QAAQC,MAAMF,EAEhB,CACD,EACD,EACMtB,EAASY,OAAOa,eACrB,CAAEhC,iBAAAA,EAAkBiC,eA7DE,SAAjBA,iBACDpC,GACHA,EAAeoC,eAAe/B,EAEhC,GA0DC,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.d.ts
CHANGED
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(a){if(o.has(a))return;if("media"!==a.name.toLowerCase())return;const{params:c}=a,p=c.replace(e,(e,o)=>"dark"===o.toLowerCase()?s:"light"===o.toLowerCase()?r:e);c!==p&&(o.add(a),a.cloneBefore({params:p}),t.preserve||a.remove())}}}}};creator.postcss=!0;export{creator as default,creator as"module.exports"};
|
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": "11.0.0",
|
|
5
5
|
"contributors": [
|
|
6
6
|
{
|
|
7
7
|
"name": "Antonio Laguna",
|
|
@@ -29,20 +29,13 @@
|
|
|
29
29
|
}
|
|
30
30
|
],
|
|
31
31
|
"engines": {
|
|
32
|
-
"node": "
|
|
32
|
+
"node": ">=20.19.0"
|
|
33
33
|
},
|
|
34
34
|
"type": "module",
|
|
35
|
-
"main": "dist/index.cjs",
|
|
36
|
-
"module": "dist/index.mjs",
|
|
37
35
|
"exports": {
|
|
38
36
|
".": {
|
|
39
|
-
"
|
|
40
|
-
|
|
41
|
-
"default": "./dist/index.mjs"
|
|
42
|
-
},
|
|
43
|
-
"require": {
|
|
44
|
-
"default": "./dist/index.cjs"
|
|
45
|
-
}
|
|
37
|
+
"types": "./dist/index.d.ts",
|
|
38
|
+
"default": "./dist/index.mjs"
|
|
46
39
|
},
|
|
47
40
|
"./browser": {
|
|
48
41
|
"import": "./dist/browser.mjs",
|
|
@@ -62,10 +55,11 @@
|
|
|
62
55
|
"peerDependencies": {
|
|
63
56
|
"postcss": "^8.4"
|
|
64
57
|
},
|
|
58
|
+
"scripts": {},
|
|
65
59
|
"homepage": "https://github.com/csstools/postcss-plugins/tree/main/plugins/css-prefers-color-scheme#readme",
|
|
66
60
|
"repository": {
|
|
67
61
|
"type": "git",
|
|
68
|
-
"url": "https://github.com/csstools/postcss-plugins.git",
|
|
62
|
+
"url": "git+https://github.com/csstools/postcss-plugins.git",
|
|
69
63
|
"directory": "plugins/css-prefers-color-scheme"
|
|
70
64
|
},
|
|
71
65
|
"bugs": "https://github.com/csstools/postcss-plugins/issues",
|
package/dist/index.cjs
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";const e=/\(\s*prefers-color-scheme\s*:\s*(dark|light)\s*\)/gi,r="(color: 48842621)",s="(color: 70318723)",creator=o=>{const t=Object.assign({preserve:!0},o);return{postcssPlugin:"postcss-prefers-color-scheme",prepare(){const o=new WeakSet;return{AtRule:a=>{if(o.has(a))return;if("media"!==a.name.toLowerCase())return;const{params:c}=a,n=c.replace(e,((e,o)=>"dark"===o.toLowerCase()?r:"light"===o.toLowerCase()?s:e));c!==n&&(o.add(a),a.cloneBefore({params:n}),t.preserve||a.remove())}}}}};creator.postcss=!0,module.exports=creator;
|