css-prefers-color-scheme 7.0.1 → 8.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +8 -0
- package/README.md +24 -9
- 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.cjs +1 -1
- package/dist/index.d.ts +3 -1
- package/dist/index.mjs +1 -1
- package/package.json +8 -6
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
# Changes to Prefers Color Scheme
|
|
2
2
|
|
|
3
|
+
### 8.0.1 (January 28, 2023)
|
|
4
|
+
|
|
5
|
+
- Improve `types` declaration in `package.json`
|
|
6
|
+
|
|
7
|
+
### 8.0.0 (January 24, 2023)
|
|
8
|
+
|
|
9
|
+
- Updated: Support for Node v14+ (major).
|
|
10
|
+
|
|
3
11
|
### 7.0.1 (August 23, 2022)
|
|
4
12
|
|
|
5
13
|
- Fix: assign global browser polyfill to `window`, `self` or a blank object.
|
package/README.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
# Prefers Color Scheme [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][
|
|
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
|
[<img alt="npm version" src="https://img.shields.io/npm/v/css-prefers-color-scheme.svg" height="20">][npm-url] [<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/prefers-color-scheme-query.svg" height="20">][css-url] [<img alt="Build Status" src="https://github.com/csstools/postcss-plugins/workflows/test/badge.svg" height="20">][cli-url] [<img alt="Discord" src="https://shields.io/badge/Discord-5865F2?logo=discord&logoColor=white">][discord]
|
|
4
4
|
|
|
@@ -72,8 +72,13 @@ postcss([
|
|
|
72
72
|
[Prefers Color Scheme] runs in all Node environments, with special
|
|
73
73
|
instructions for:
|
|
74
74
|
|
|
75
|
-
|
|
76
|
-
|
|
75
|
+
- [Node](INSTALL.md#node)
|
|
76
|
+
- [PostCSS CLI](INSTALL.md#postcss-cli)
|
|
77
|
+
- [PostCSS Load Config](INSTALL.md#postcss-load-config)
|
|
78
|
+
- [Webpack](INSTALL.md#webpack)
|
|
79
|
+
- [Next.js](INSTALL.md#nextjs)
|
|
80
|
+
- [Gulp](INSTALL.md#gulp)
|
|
81
|
+
- [Grunt](INSTALL.md#grunt)
|
|
77
82
|
|
|
78
83
|
## Options
|
|
79
84
|
|
|
@@ -133,11 +138,11 @@ or
|
|
|
133
138
|
|
|
134
139
|
```html
|
|
135
140
|
<!-- When using a CDN url you will have to manually update the version number -->
|
|
136
|
-
<script src="https://unpkg.com/css-prefers-color-scheme@
|
|
141
|
+
<script src="https://unpkg.com/css-prefers-color-scheme@8.0.1/dist/browser-global.js"></script>
|
|
137
142
|
<script>prefersColorSchemeInit()</script>
|
|
138
143
|
```
|
|
139
144
|
|
|
140
|
-
⚠️ Please use a versioned url, like this : `https://unpkg.com/css-prefers-color-scheme@
|
|
145
|
+
⚠️ Please use a versioned url, like this : `https://unpkg.com/css-prefers-color-scheme@8.0.1/dist/browser-global.js`
|
|
141
146
|
Without the version, you might unexpectedly get a new major version of the library with breaking changes.
|
|
142
147
|
|
|
143
148
|
[Prefers Color Scheme] works in all major browsers, including Safari 6+ and
|
|
@@ -211,7 +216,7 @@ const prefersColorScheme = prefersColorSchemeInit('light', { debug: true });
|
|
|
211
216
|
```
|
|
212
217
|
|
|
213
218
|
```html
|
|
214
|
-
<script src="https://unpkg.com/css-prefers-color-scheme@
|
|
219
|
+
<script src="https://unpkg.com/css-prefers-color-scheme@8.0.1/dist/browser-global.js"></script>
|
|
215
220
|
<script>prefersColorSchemeInit('light', { debug: true })</script>
|
|
216
221
|
```
|
|
217
222
|
|
|
@@ -282,6 +287,19 @@ HTML might look like this :
|
|
|
282
287
|
```
|
|
283
288
|
|
|
284
289
|
|
|
290
|
+
### Using with Next.js
|
|
291
|
+
|
|
292
|
+
Given that Next.js imports packages both on the browser and on the server, you need to make sure that the package is only imported on the browser.
|
|
293
|
+
|
|
294
|
+
As outlined in the [Next.js documentation](https://nextjs.org/docs/advanced-features/dynamic-import#with-external-libraries), you need to load the package with a dynamic import:
|
|
295
|
+
|
|
296
|
+
```jsx
|
|
297
|
+
useEffect(async () => {
|
|
298
|
+
const prefersColorSchemeInit = (await import('css-prefers-color-scheme/browser')).default;
|
|
299
|
+
const prefersColorScheme = prefersColorSchemeInit();
|
|
300
|
+
}, []);
|
|
301
|
+
```
|
|
302
|
+
|
|
285
303
|
## How does it work?
|
|
286
304
|
|
|
287
305
|
[Prefers Color Scheme] is a [PostCSS] plugin that transforms `prefers-color-scheme` queries into `color` queries.
|
|
@@ -321,9 +339,6 @@ These are suffixed with a random large number.
|
|
|
321
339
|
[discord]: https://discord.gg/bUadyRwkJS
|
|
322
340
|
[npm-url]: https://www.npmjs.com/package/css-prefers-color-scheme
|
|
323
341
|
|
|
324
|
-
[Gulp PostCSS]: https://github.com/postcss/gulp-postcss
|
|
325
|
-
[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss
|
|
326
342
|
[PostCSS]: https://github.com/postcss/postcss
|
|
327
|
-
[PostCSS Loader]: https://github.com/postcss/postcss-loader
|
|
328
343
|
[Prefers Color Scheme]: https://github.com/csstools/postcss-plugins/tree/main/plugins/css-prefers-color-scheme
|
|
329
344
|
[Media Queries]: https://www.w3.org/TR/mediaqueries-5/#prefers-color-scheme
|
package/dist/browser-global.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
!function(){var e=/prefers-color-scheme:/i,t=function(t,a){a||(a={}),a={debug:!!a.debug||!1};var
|
|
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":["/* global document,window */\nconst prefersColorSchemeRegExp = /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 = prefersColorSchemeRegExp.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","/* global self,window */\nimport { default as prefersColorSchemeInit } from './browser';\n\n(function (global) {\n\tglobal.prefersColorSchemeInit = prefersColorSchemeInit;\n}('object' === typeof window && window || 'object' === typeof self && self || {}));\n"],"names":["prefersColorSchemeRegExp","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":"YACA,IAAMA,EAA2B,yBAE3BC,EAAyB,
|
|
1
|
+
{"version":3,"file":"browser-global.js","sources":["../src/browser.js","../src/browser-global.js"],"sourcesContent":["/* global document,window */\nconst prefersColorSchemeRegExp = /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 = prefersColorSchemeRegExp.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","/* global self,window */\nimport { default as prefersColorSchemeInit } from './browser';\n\n(function (global) {\n\tglobal.prefersColorSchemeInit = prefersColorSchemeInit;\n}('object' === typeof window && window || 'object' === typeof self && self || {}));\n"],"names":["prefersColorSchemeRegExp","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":"YACA,IAAMA,EAA2B,yBAE3BC,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,EAAyB2B,KAAKC,OAAOH,EAAQf,OAAOmB,WAEvD,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,GAAM,KACtG,UAAhBpB,GAAmD,aAAvBoB,EAAgB,GAEtDT,EAAQf,MAAMmB,UAAYJ,EAAQf,MAAMmB,UAAUQ,QAAQ,gCAA+B,eAAiBH,EAAgB,GAAM,KAEhIT,EAAQf,MAAMmB,UAAYJ,EAAQf,MAAMmB,UAAUQ,QAAQ,6CAA4C,WAAaH,EAAgB,GAAM,KAG5I,CACD,GAKD,CAJE,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,SAAAA,MAAA,OAAM5B,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
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var e=/prefers-color-scheme:/i;module.exports=function(t,a){a||(a={}),a={debug:!!a.debug||!1};var r="(prefers-color-scheme: dark)",i="matchMedia"in window&&window.matchMedia(r),
|
|
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":["/* global document,window */\nconst prefersColorSchemeRegExp = /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 = prefersColorSchemeRegExp.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":["prefersColorSchemeRegExp","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":"AACA,IAAMA,EAA2B,wCAEF,
|
|
1
|
+
{"version":3,"file":"browser.cjs","sources":["../src/browser.js"],"sourcesContent":["/* global document,window */\nconst prefersColorSchemeRegExp = /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 = prefersColorSchemeRegExp.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":["prefersColorSchemeRegExp","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":"AACA,IAAMA,EAA2B,wCAEF,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,EAAyB2B,KAAKC,OAAOH,EAAQf,OAAOmB,WAEvD,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,GAAM,KACtG,UAAhBpB,GAAmD,aAAvBoB,EAAgB,GAEtDT,EAAQf,MAAMmB,UAAYJ,EAAQf,MAAMmB,UAAUQ,QAAQ,gCAA+B,eAAiBH,EAAgB,GAAM,KAEhIT,EAAQf,MAAMmB,UAAYJ,EAAQf,MAAMmB,UAAUQ,QAAQ,6CAA4C,WAAaH,EAAgB,GAAM,KAG5I,CACD,GAKD,CAJE,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,SAAAA,MAAA,OAAM5B,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(t,a){a||(a={}),a={debug:!!a.debug||!1};var r="(prefers-color-scheme: dark)",i="matchMedia"in window&&window.matchMedia(r),
|
|
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":["/* global document,window */\nconst prefersColorSchemeRegExp = /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 = prefersColorSchemeRegExp.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":["prefersColorSchemeRegExp","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":"AACA,IAAMA,EAA2B,yBAE3BC,EAAyB,
|
|
1
|
+
{"version":3,"file":"browser.mjs","sources":["../src/browser.js"],"sourcesContent":["/* global document,window */\nconst prefersColorSchemeRegExp = /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 = prefersColorSchemeRegExp.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":["prefersColorSchemeRegExp","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":"AACA,IAAMA,EAA2B,yBAE3BC,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,EAAyB2B,KAAKC,OAAOH,EAAQf,OAAOmB,WAEvD,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,GAAM,KACtG,UAAhBpB,GAAmD,aAAvBoB,EAAgB,GAEtDT,EAAQf,MAAMmB,UAAYJ,EAAQf,MAAMmB,UAAUQ,QAAQ,gCAA+B,eAAiBH,EAAgB,GAAM,KAEhIT,EAAQf,MAAMmB,UAAYJ,EAAQf,MAAMmB,UAAUQ,QAAQ,6CAA4C,WAAaH,EAAgB,GAAM,KAG5I,CACD,GAKD,CAJE,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,SAAAA,MAAA,OAAM5B,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,s={dark:"48842621",light:"70318723"},
|
|
1
|
+
"use strict";const e=/\(\s*prefers-color-scheme\s*:\s*(dark|light)\s*\)/gi,s={dark:"48842621",light:"70318723"},prefersInterfaceColorDepthReplacer=(e,r)=>`(color: ${s[r.toLowerCase()]})`,creator=s=>{const r=Object.assign({preserve:!0},s);return{postcssPlugin:"postcss-prefers-color-scheme",AtRule:s=>{if("media"!==s.name.toLowerCase())return;const{params:o}=s,t=o.replace(e,prefersInterfaceColorDepthReplacer);o!==t&&(s.cloneBefore({params:t}),r.preserve||s.remove())}}};creator.postcss=!0,module.exports=creator;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import type { PluginCreator } from 'postcss';
|
|
2
|
-
|
|
2
|
+
/** postcss-prefers-color-scheme plugin options */
|
|
3
|
+
export type pluginOptions = {
|
|
4
|
+
/** Preserve the original notation. default: true */
|
|
3
5
|
preserve?: boolean;
|
|
4
6
|
};
|
|
5
7
|
declare const creator: PluginCreator<pluginOptions>;
|
package/dist/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
const e=/\(\s*prefers-color-scheme\s*:\s*(dark|light)\s*\)/gi,s={dark:"48842621",light:"70318723"},
|
|
1
|
+
const e=/\(\s*prefers-color-scheme\s*:\s*(dark|light)\s*\)/gi,s={dark:"48842621",light:"70318723"},prefersInterfaceColorDepthReplacer=(e,r)=>`(color: ${s[r.toLowerCase()]})`,creator=s=>{const r=Object.assign({preserve:!0},s);return{postcssPlugin:"postcss-prefers-color-scheme",AtRule:s=>{if("media"!==s.name.toLowerCase())return;const{params:o}=s,t=o.replace(e,prefersInterfaceColorDepthReplacer);o!==t&&(s.cloneBefore({params:t}),r.preserve||s.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": "8.0.1",
|
|
5
5
|
"contributors": [
|
|
6
6
|
{
|
|
7
7
|
"name": "Antonio Laguna",
|
|
@@ -23,13 +23,14 @@
|
|
|
23
23
|
"url": "https://opencollective.com/csstools"
|
|
24
24
|
},
|
|
25
25
|
"engines": {
|
|
26
|
-
"node": "^
|
|
26
|
+
"node": "^14 || ^16 || >=18"
|
|
27
27
|
},
|
|
28
28
|
"main": "dist/index.cjs",
|
|
29
29
|
"module": "dist/index.mjs",
|
|
30
30
|
"types": "dist/index.d.ts",
|
|
31
31
|
"exports": {
|
|
32
32
|
".": {
|
|
33
|
+
"types": "./dist/index.d.ts",
|
|
33
34
|
"import": "./dist/index.mjs",
|
|
34
35
|
"require": "./dist/index.cjs",
|
|
35
36
|
"default": "./dist/index.mjs"
|
|
@@ -50,14 +51,15 @@
|
|
|
50
51
|
"dist"
|
|
51
52
|
],
|
|
52
53
|
"peerDependencies": {
|
|
53
|
-
"postcss": "^8.
|
|
54
|
+
"postcss": "^8.4"
|
|
54
55
|
},
|
|
55
56
|
"devDependencies": {
|
|
56
|
-
"puppeteer": "^
|
|
57
|
+
"puppeteer": "^19.5.2"
|
|
57
58
|
},
|
|
58
59
|
"scripts": {
|
|
59
|
-
"
|
|
60
|
-
"
|
|
60
|
+
"prebuild": "npm run clean",
|
|
61
|
+
"build": "rollup -c ../../rollup/default.mjs",
|
|
62
|
+
"clean": "node -e \"fs.rmSync('./dist', { recursive: true, force: true }); fs.mkdirSync('./dist');\"",
|
|
61
63
|
"docs": "node ../../.github/bin/generate-docs/install.mjs && node ../../.github/bin/generate-docs/readme.mjs",
|
|
62
64
|
"lint": "npm run lint:eslint && npm run lint:package-json",
|
|
63
65
|
"lint:eslint": "eslint ./src --ext .js --ext .ts --ext .mjs --no-error-on-unmatched-pattern",
|