diff --git a/plugin-packs/postcss-preset-env/test/basic.stage0-ff49.expect.css b/plugin-packs/postcss-preset-env/test/basic.stage0-ff49.expect.css
index b53dec5c6..b9ab6c266 100644
--- a/plugin-packs/postcss-preset-env/test/basic.stage0-ff49.expect.css
+++ b/plugin-packs/postcss-preset-env/test/basic.stage0-ff49.expect.css
@@ -57,6 +57,13 @@
}
}
+@media (color: 48842621) {
+ body {
+ background-color: black;
+ color: white;
+ }
+}
+
@media (prefers-color-scheme: dark) {
body {
background-color: black;
diff --git a/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css b/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css
index 9a10585a2..5fc9bb134 100644
--- a/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css
+++ b/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css
@@ -67,6 +67,13 @@
}
}
+@media (color: 48842621) {
+ body {
+ background-color: black;
+ color: white;
+ }
+}
+
@media (prefers-color-scheme: dark) {
body {
background-color: black;
diff --git a/plugins/css-blank-pseudo/.gitignore b/plugins/css-blank-pseudo/.gitignore
index 17847a362..2ba521b3a 100644
--- a/plugins/css-blank-pseudo/.gitignore
+++ b/plugins/css-blank-pseudo/.gitignore
@@ -2,6 +2,7 @@ node_modules
dist
package-lock.json
yarn.lock
+browser.js
*.log*
*.result.css
*.result.css.map
diff --git a/plugins/css-blank-pseudo/README.md b/plugins/css-blank-pseudo/README.md
index 62811d787..c650a1e7e 100644
--- a/plugins/css-blank-pseudo/README.md
+++ b/plugins/css-blank-pseudo/README.md
@@ -32,6 +32,12 @@ Next, use your transformed CSS with this script:
```
+⚠️ Please use a versioned url, like this : `https://unpkg.com/css-blank-pseudo@3.0.0/dist/browser-global.js`
+Without the version, you might unexpectedly get a new major version of the library with breaking changes.
+
+⚠️ If you were using an older version via a CDN, please update the entire url.
+The old URL will no longer work in a future release.
+
That’s it. The script works in most browsers.
## How it works
diff --git a/plugins/css-blank-pseudo/package.json b/plugins/css-blank-pseudo/package.json
index 29e967b2c..f09b84c5a 100644
--- a/plugins/css-blank-pseudo/package.json
+++ b/plugins/css-blank-pseudo/package.json
@@ -26,14 +26,16 @@
"INSTALL.md",
"LICENSE.md",
"README.md",
- "dist"
+ "dist",
+ "browser.js"
],
"bin": {
"css-blank-pseudo": "dist/cli.mjs"
},
"scripts": {
- "build": "rollup -c ../../rollup/default.js",
+ "build": "rollup -c ../../rollup/default.js && npm run copy-browser-scripts-to-old-location",
"clean": "node -e \"fs.rmSync('./dist', { recursive: true, force: true });\"",
+ "copy-browser-scripts-to-old-location": "node -e \"fs.copyFileSync('./dist/browser-global.js', './browser.js');\"",
"lint": "eslint src/**/*.ts src/**/*.js --no-error-on-unmatched-pattern",
"prepublishOnly": "npm run clean && npm run build && npm run test",
"stryker": "stryker run --logLevel error",
diff --git a/plugins/css-has-pseudo/.gitignore b/plugins/css-has-pseudo/.gitignore
index 17847a362..2ba521b3a 100644
--- a/plugins/css-has-pseudo/.gitignore
+++ b/plugins/css-has-pseudo/.gitignore
@@ -2,6 +2,7 @@ node_modules
dist
package-lock.json
yarn.lock
+browser.js
*.log*
*.result.css
*.result.css.map
diff --git a/plugins/css-has-pseudo/README-POSTCSS.md b/plugins/css-has-pseudo/README-POSTCSS.md
index 989ea6f31..795256647 100644
--- a/plugins/css-has-pseudo/README-POSTCSS.md
+++ b/plugins/css-has-pseudo/README-POSTCSS.md
@@ -87,5 +87,6 @@ body[\:has\(\:focus\)] {
[npm-img]: https://img.shields.io/npm/v/css-has-pseudo.svg
[npm-url]: https://www.npmjs.com/package/css-has-pseudo
+[PostCSS]: https://github.com/postcss/postcss
[CSS Has Pseudo]: https://github.com/csstools/postcss-plugins/tree/main/plugins/css-has-pseudo
[Selectors Level 4]: https://drafts.csswg.org/selectors-4/#has-pseudo
diff --git a/plugins/css-has-pseudo/README.md b/plugins/css-has-pseudo/README.md
index 089b238b2..15a3ce999 100644
--- a/plugins/css-has-pseudo/README.md
+++ b/plugins/css-has-pseudo/README.md
@@ -42,6 +42,12 @@ Next, use your transformed CSS with this script:
```
+⚠️ Please use a versioned url, like this : `https://unpkg.com/css-has-pseudo@3.0.0/dist/browser-global.js`
+Without the version, you might unexpectedly get a new major version of the library with breaking changes.
+
+⚠️ If you were using an older version via a CDN, please update the entire url.
+The old URL will no longer work in a future release.
+
That’s it. The script is 765 bytes and works in most browser versions, including
Internet Explorer 11. With a [Mutation Observer polyfill], the script will work
down to Internet Explorer 9.
diff --git a/plugins/css-has-pseudo/package.json b/plugins/css-has-pseudo/package.json
index 0b18f3035..5e478801f 100644
--- a/plugins/css-has-pseudo/package.json
+++ b/plugins/css-has-pseudo/package.json
@@ -26,14 +26,16 @@
"INSTALL.md",
"LICENSE.md",
"README.md",
- "dist"
+ "dist",
+ "browser.js"
],
"bin": {
"css-has-pseudo": "dist/cli.mjs"
},
"scripts": {
- "build": "rollup -c ../../rollup/default.js",
+ "build": "rollup -c ../../rollup/default.js && npm run copy-browser-scripts-to-old-location",
"clean": "node -e \"fs.rmSync('./dist', { recursive: true, force: true });\"",
+ "copy-browser-scripts-to-old-location": "node -e \"fs.copyFileSync('./dist/browser-global.js', './browser.js')\"",
"lint": "eslint src/**/*.ts src/**/*.js --no-error-on-unmatched-pattern",
"prepublishOnly": "npm run clean && npm run build && npm run test",
"stryker": "stryker run --logLevel error",
diff --git a/plugins/css-prefers-color-scheme/.gitignore b/plugins/css-prefers-color-scheme/.gitignore
index 17847a362..e5835f4f9 100644
--- a/plugins/css-prefers-color-scheme/.gitignore
+++ b/plugins/css-prefers-color-scheme/.gitignore
@@ -2,6 +2,8 @@ node_modules
dist
package-lock.json
yarn.lock
+browser.js
+browser.min.js
*.log*
*.result.css
*.result.css.map
diff --git a/plugins/css-prefers-color-scheme/.tape.js b/plugins/css-prefers-color-scheme/.tape.js
index 52be6d171..0e4120680 100644
--- a/plugins/css-prefers-color-scheme/.tape.js
+++ b/plugins/css-prefers-color-scheme/.tape.js
@@ -1,5 +1,23 @@
module.exports = {
- 'basic': {
- message: 'supports basic usage'
- }
+ 'basic': {
+ message: 'supports basic usage'
+ },
+ 'basic:color': {
+ message: 'supports { mediaQuery: "color" } usage',
+ options: {
+ mediaQuery: 'color'
+ }
+ },
+ 'basic:color-index': {
+ message: 'supports { mediaQuery: "color-index" } usage',
+ options: {
+ mediaQuery: 'color-index'
+ }
+ },
+ 'basic:preserve': {
+ message: 'supports { preserve: true } usage',
+ options: {
+ preserve: true
+ }
+ }
};
diff --git a/plugins/css-prefers-color-scheme/README-BROWSER.md b/plugins/css-prefers-color-scheme/README-BROWSER.md
index def806712..a4d38cf57 100644
--- a/plugins/css-prefers-color-scheme/README-BROWSER.md
+++ b/plugins/css-prefers-color-scheme/README-BROWSER.md
@@ -20,7 +20,7 @@ Internet Explorer 9+ without any polyfills.
To maintain compatibility with browsers supporting `prefers-color-scheme`, the
library will remove `prefers-color-scheme` media queries in favor of
-cross-browser compatible `color-index` media queries. This ensures a seemless
+cross-browser compatible `color` media queries. This ensures a seemless
experience, even when JavaScript is unable to run.
## Usage
diff --git a/plugins/css-prefers-color-scheme/README-POSTCSS.md b/plugins/css-prefers-color-scheme/README-POSTCSS.md
index e31695c40..878da96a0 100644
--- a/plugins/css-prefers-color-scheme/README-POSTCSS.md
+++ b/plugins/css-prefers-color-scheme/README-POSTCSS.md
@@ -22,7 +22,7 @@ body {
/* becomes */
-@media (color-index: 48) {
+@media (color: 48842621) {
:root {
--site-bgcolor: #1b1b1b;
--site-color: #fff;
@@ -88,13 +88,42 @@ require('css-prefers-color-scheme')({ preserve: false });
/* becomes */
-@media (color-index: 48) {
+@media (color: 48842621) {
body {
background-color: black;
}
}
```
+#### mediaQuery
+
+The `mediaQuery` option defines if either `color` or `color-index` should be used.
+Without passing an option CSS for both will be provided.
+When omitted CSS is generated that is compatible with the both the new and old browser polyfill.
+This setting allows you to shrink your bundle size.
+
+In a future version this setting will be removed and only `color` queries will be generated.
+
+You have updated the browser polyfill :
+_version 6 or higher_
+
+```js
+postcssPrefersColorScheme({ mediaQuery: 'color' });
+```
+
+You have **not** updated the browser polyfill :
+_version 5 or lower_
+
+```js
+postcssPrefersColorScheme({ mediaQuery: 'color-index' });
+```
+
+You are unsure :
+
+```js
+postcssPrefersColorScheme();
+```
+
[git-img]: https://img.shields.io/badge/support-chat-blue.svg
[git-url]: https://gitter.im/postcss/postcss
[npm-img]: https://img.shields.io/npm/v/css-prefers-color-scheme.svg
diff --git a/plugins/css-prefers-color-scheme/README.md b/plugins/css-prefers-color-scheme/README.md
index 06c416fda..21bc33243 100644
--- a/plugins/css-prefers-color-scheme/README.md
+++ b/plugins/css-prefers-color-scheme/README.md
@@ -28,7 +28,11 @@ colorScheme = initPrefersColorScheme('dark') // apply "dark" queries (you can ch
```
-Dependencies got you down? Don’t worry, this script is only 537 bytes.
+⚠️ Please use a versioned url, like this : `https://unpkg.com/css-prefers-color-scheme@6.0.0/dist/browser-global.js`
+Without the version, you might unexpectedly get a new major version of the library with breaking changes.
+
+⚠️ If you were using an older version via a CDN, please update the entire url.
+The old URL will no longer work in a future release.
## Usage
@@ -41,23 +45,28 @@ Dependencies got you down? Don’t worry, this script is only 537 bytes.
## How does it work?
+_This plugin used to work with `color-index` as detailed here : [color-index](https://github.com/csstools/css-prefers-color-scheme#how-does-it-work)._
+_This is deprecated but will continue to work for now._
+_`color` has better browser support and enables complex media queries._
+
[Prefers Color Scheme] uses a [PostCSS plugin](README-POSTCSS.md) to transform
-`prefers-color-scheme` queries into `color-index` queries. This changes
-`prefers-color-scheme: dark` into `(color-index: 48)`,
-`prefers-color-scheme: light` into `(color-index: 70)`, and
-`prefers-color-scheme: no-preference` into `(color-index: 22)`.
+`prefers-color-scheme` queries into `color` queries. This changes
+`prefers-color-scheme: dark` into `(color: 48842621)`,
+`prefers-color-scheme: light` into `(color: 70318723)`, and
+`prefers-color-scheme: no-preference` into `(color: 22511989)`.
-The frontend receives these `color-index` queries, which are understood in all
-major browsers going back to Internet Explorer 9. However, since browsers only
-apply `color-index` queries of `0`, our color scheme values are ignored.
+The frontend receives these `color` queries, which are understood in all
+major browsers going back to Internet Explorer 9.
+However, since browsers can only have a reasonably small number of bits per color,
+our color scheme values are ignored.
[Prefers Color Scheme] uses a [browser script](README-BROWSER.md) to change
-`(color-index: 48)` queries into `not all and (color-index: 48)` in order to
-activate “dark mode” specific CSS, and it changes `(color-index: 70)` queries
-into `not all and (color-index: 48)` to activate “light mode” specific CSS.
+`(color: 48842621)` queries into `(max-color: 48842621)` in order to
+activate “dark mode” specific CSS, and it changes `(color: 70318723)` queries
+into `(max-color: 48842621)` to activate “light mode” specific CSS.
```css
-@media (color-index: 70) { /* prefers-color-scheme: light */
+@media (color: 70318723) { /* prefers-color-scheme: light */
body {
background-color: white;
color: black;
@@ -73,6 +82,7 @@ parsing is required.
The value of `48` is chosen for dark mode because it is the keycode for `0`,
the hexidecimal value of black. Likewise, `70` is chosen for light mode because
it is the keycode for `f`, the hexidecimal value of white.
+These are suffixed with a random large number.
[cli-img]: https://github.com/csstools/postcss-plugins/workflows/test/badge.svg
[cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test
diff --git a/plugins/css-prefers-color-scheme/package.json b/plugins/css-prefers-color-scheme/package.json
index 9e0969a5c..e82edc7eb 100644
--- a/plugins/css-prefers-color-scheme/package.json
+++ b/plugins/css-prefers-color-scheme/package.json
@@ -26,14 +26,17 @@
"INSTALL.md",
"LICENSE.md",
"README.md",
- "dist"
+ "dist",
+ "browser.js",
+ "browser.min.js"
],
"bin": {
"css-prefers-color-scheme": "dist/cli.mjs"
},
"scripts": {
- "build": "rollup -c ../../rollup/default.js",
+ "build": "rollup -c ../../rollup/default.js && npm run copy-browser-scripts-to-old-location",
"clean": "node -e \"fs.rmSync('./dist', { recursive: true, force: true });\"",
+ "copy-browser-scripts-to-old-location": "node -e \"fs.copyFileSync('./dist/browser-global.js', './browser.js'); fs.copyFileSync('./dist/browser-global.js', './browser.min.js')\"",
"lint": "eslint src/**/*.ts src/**/*.js --no-error-on-unmatched-pattern",
"prepublishOnly": "npm run clean && npm run build && npm run test",
"stryker": "stryker run --logLevel error",
diff --git a/plugins/css-prefers-color-scheme/src/browser.js b/plugins/css-prefers-color-scheme/src/browser.js
index a5285a1cc..d8d9f1f8c 100644
--- a/plugins/css-prefers-color-scheme/src/browser.js
+++ b/plugins/css-prefers-color-scheme/src/browser.js
@@ -24,26 +24,47 @@ const prefersColorSchemeInit = initialColorScheme => {
}
[].forEach.call(document.styleSheets || [], styleSheet => {
+
+ // cssRules is a live list. Converting to an Array first.
+ const rules = [];
[].forEach.call(styleSheet.cssRules || [], cssRule => {
+ rules.push(cssRule);
+ });
+
+ rules.forEach(cssRule => {
const colorSchemeMatch = prefersColorSchemeRegExp.test(Object(cssRule.media).mediaText);
if (colorSchemeMatch) {
const index = [].indexOf.call(cssRule.parentStyleSheet.cssRules, cssRule);
-
cssRule.parentStyleSheet.deleteRule(index);
} else {
const colorIndexMatch = (Object(cssRule.media).mediaText || '').match(colorIndexRegExp);
if (colorIndexMatch) {
+ // Old style which has poor browser support and can't handle complex media queries.
cssRule.media.mediaText = (
(/^dark$/i.test(colorScheme)
? colorIndexMatch[3] === '48'
- : /^light$/i.test(colorScheme)
- ? colorIndexMatch[3] === '70'
- : colorIndexMatch[3] === '22')
+ : /^light$/i.test(colorScheme)
+ ? colorIndexMatch[3] === '70'
+ : colorIndexMatch[3] === '22')
? 'not all and '
- : ''
+ : ''
) + cssRule.media.mediaText.replace(colorIndexRegExp, '$2');
+ } else {
+ // New style which supports complex media queries.
+ const colorDepthMatch = (Object(cssRule.media).mediaText || '').match(/\( *(?:color|max-color): *(48842621|70318723|22511989) *\)/i);
+ if (colorDepthMatch && colorDepthMatch.length > 1) {
+ if (/^dark$/i.test(colorScheme) && (colorDepthMatch[1] === '48842621' || colorDepthMatch[1] === '22511989')) {
+ // No preference or preferred is dark and rule is dark.
+ cssRule.media.mediaText = cssRule.media.mediaText.replace(/\( *color: *(?:48842621|70318723) *\)/i, `(max-color: ${colorDepthMatch[1]})`);
+ } else if (/^light$/i.test(colorScheme) && (colorDepthMatch[1] === '70318723' || colorDepthMatch[1] === '22511989')) {
+ // No preference or preferred is light and rule is light.
+ cssRule.media.mediaText = cssRule.media.mediaText.replace(/\( *color: *(?:48842621|22511989) *\)/i, `(max-color: ${colorDepthMatch[1]})`);
+ } else {
+ cssRule.media.mediaText = cssRule.media.mediaText.replace(/\( *max-color: *(?:48842621|70318723|22511989) *\)/i, `(color: ${colorDepthMatch[1]})`);
+ }
+ }
}
}
});
@@ -63,7 +84,7 @@ const prefersColorSchemeInit = initialColorScheme => {
// listen for system changes
if (mediaQueryList) {
if ('addEventListener' in mediaQueryList) {
- mediaQueryList.addEventListener(mediaQueryListener);
+ mediaQueryList.addEventListener('change', mediaQueryListener);
} else {
mediaQueryList.addListener(mediaQueryListener);
}
diff --git a/plugins/css-prefers-color-scheme/src/cli.js b/plugins/css-prefers-color-scheme/src/cli.js
index 1e7b214a2..db9985cf4 100644
--- a/plugins/css-prefers-color-scheme/src/cli.js
+++ b/plugins/css-prefers-color-scheme/src/cli.js
@@ -3,13 +3,14 @@ import { cli, helpTextLogger } from '@csstools/base-cli';
cli(
plugin,
- ['preserve'],
+ ['preserve', 'mediaQuery'],
helpTextLogger(
'css-prefers-color-scheme',
'Prefers Color Scheme',
'Lets you use light and dark color schemes in all browsers, following the [Media Queries] specification.',
{
preserve: true,
+ mediaQuery: 'color|color-index',
},
),
);
diff --git a/plugins/css-prefers-color-scheme/src/index.js b/plugins/css-prefers-color-scheme/src/index.js
index dcb64232a..18b37b80e 100644
--- a/plugins/css-prefers-color-scheme/src/index.js
+++ b/plugins/css-prefers-color-scheme/src/index.js
@@ -1,10 +1,24 @@
const mediaRegExp = /^media$/i;
const prefersInterfaceRegExp = /\(\s*prefers-color-scheme\s*:\s*(dark|light|no-preference)\s*\)/i;
const colorIndexByStyle = { dark: 48, light: 70, 'no-preference': 22 };
-const prefersInterfaceReplacer = ($0, style) => `(color-index: ${colorIndexByStyle[style.toLowerCase()]})`;
+const prefersInterfaceColorIndexReplacer = ($0, style) => `(color-index: ${colorIndexByStyle[style.toLowerCase()]})`;
+
+
+const colorDepthByStyle = { dark: 48842621, light: 70318723, 'no-preference': 22511989 };
+const prefersInterfaceColorDepthReplacer = ($0, style) => `(color: ${colorDepthByStyle[style.toLowerCase()]})`;
const creator = opts => {
const preserve = 'preserve' in Object(opts) ? opts.preserve : true;
+ const mediaQueries = {};
+ if (
+ 'mediaQuery' in Object(opts) &&
+ (opts.mediaQuery === 'color-index' || opts.mediaQuery === 'color')
+ ) {
+ mediaQueries[opts.mediaQuery] = true;
+ } else {
+ mediaQueries['color-index'] = true;
+ mediaQueries['color'] = true;
+ }
return {
postcssPlugin: 'postcss-prefers-color-scheme',
@@ -14,14 +28,19 @@ const creator = opts => {
}
const { params } = atRule;
- const altParams = params.replace(prefersInterfaceRegExp, prefersInterfaceReplacer);
-
- if (params !== altParams) {
- if (preserve) {
- atRule.cloneBefore({ params: altParams });
- } else {
- atRule.params = altParams;
- }
+ const altParamsColorIndex = params.replace(prefersInterfaceRegExp, prefersInterfaceColorIndexReplacer);
+ const altParamsColorDepth = params.replace(prefersInterfaceRegExp, prefersInterfaceColorDepthReplacer);
+
+ if (params !== altParamsColorIndex && mediaQueries['color-index']) {
+ atRule.cloneBefore({ params: altParamsColorIndex });
+ }
+
+ if (params !== altParamsColorDepth && mediaQueries['color']) {
+ atRule.cloneBefore({ params: altParamsColorDepth });
+ }
+
+ if (!preserve) {
+ atRule.remove();
}
},
};
diff --git a/plugins/css-prefers-color-scheme/test/basic.result.css b/plugins/css-prefers-color-scheme/test/basic.color-index.expect.css
similarity index 100%
rename from plugins/css-prefers-color-scheme/test/basic.result.css
rename to plugins/css-prefers-color-scheme/test/basic.color-index.expect.css
diff --git a/plugins/css-prefers-color-scheme/test/basic.color.expect.css b/plugins/css-prefers-color-scheme/test/basic.color.expect.css
new file mode 100644
index 000000000..ce59b3573
--- /dev/null
+++ b/plugins/css-prefers-color-scheme/test/basic.color.expect.css
@@ -0,0 +1,47 @@
+@media (color: 22511989) {
+ :root {
+ --site-bgcolor: #f9f9f9;
+ --site-color: #111;
+ }
+}
+
+@media (prefers-color-scheme: no-preference) {
+ :root {
+ --site-bgcolor: #f9f9f9;
+ --site-color: #111;
+ }
+}
+
+@media (color: 48842621) {
+ :root {
+ --site-bgcolor: #1b1b1b;
+ --site-color: #fff;
+ }
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ --site-bgcolor: #1b1b1b;
+ --site-color: #fff;
+ }
+}
+
+@media (color: 70318723) {
+ :root {
+ --site-bgcolor: #fff;
+ --site-color: #222;
+ }
+}
+
+@media (prefers-color-scheme: light) {
+ :root {
+ --site-bgcolor: #fff;
+ --site-color: #222;
+ }
+}
+
+body {
+ background-color: var(--site-bgcolor, #f9f9f9);
+ color: var(--site-color, #111);
+ font: 100%/1.5 system-ui;
+}
diff --git a/plugins/css-prefers-color-scheme/test/basic.expect.css b/plugins/css-prefers-color-scheme/test/basic.expect.css
index cd2d47a64..0bc225eaf 100644
--- a/plugins/css-prefers-color-scheme/test/basic.expect.css
+++ b/plugins/css-prefers-color-scheme/test/basic.expect.css
@@ -5,6 +5,13 @@
}
}
+@media (color: 22511989) {
+ :root {
+ --site-bgcolor: #f9f9f9;
+ --site-color: #111;
+ }
+}
+
@media (prefers-color-scheme: no-preference) {
:root {
--site-bgcolor: #f9f9f9;
@@ -19,6 +26,13 @@
}
}
+@media (color: 48842621) {
+ :root {
+ --site-bgcolor: #1b1b1b;
+ --site-color: #fff;
+ }
+}
+
@media (prefers-color-scheme: dark) {
:root {
--site-bgcolor: #1b1b1b;
@@ -33,6 +47,13 @@
}
}
+@media (color: 70318723) {
+ :root {
+ --site-bgcolor: #fff;
+ --site-color: #222;
+ }
+}
+
@media (prefers-color-scheme: light) {
:root {
--site-bgcolor: #fff;
diff --git a/plugins/css-prefers-color-scheme/test/basic.preserve.expect.css b/plugins/css-prefers-color-scheme/test/basic.preserve.expect.css
new file mode 100644
index 000000000..0bc225eaf
--- /dev/null
+++ b/plugins/css-prefers-color-scheme/test/basic.preserve.expect.css
@@ -0,0 +1,68 @@
+@media (color-index: 22) {
+ :root {
+ --site-bgcolor: #f9f9f9;
+ --site-color: #111;
+ }
+}
+
+@media (color: 22511989) {
+ :root {
+ --site-bgcolor: #f9f9f9;
+ --site-color: #111;
+ }
+}
+
+@media (prefers-color-scheme: no-preference) {
+ :root {
+ --site-bgcolor: #f9f9f9;
+ --site-color: #111;
+ }
+}
+
+@media (color-index: 48) {
+ :root {
+ --site-bgcolor: #1b1b1b;
+ --site-color: #fff;
+ }
+}
+
+@media (color: 48842621) {
+ :root {
+ --site-bgcolor: #1b1b1b;
+ --site-color: #fff;
+ }
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ --site-bgcolor: #1b1b1b;
+ --site-color: #fff;
+ }
+}
+
+@media (color-index: 70) {
+ :root {
+ --site-bgcolor: #fff;
+ --site-color: #222;
+ }
+}
+
+@media (color: 70318723) {
+ :root {
+ --site-bgcolor: #fff;
+ --site-color: #222;
+ }
+}
+
+@media (prefers-color-scheme: light) {
+ :root {
+ --site-bgcolor: #fff;
+ --site-color: #222;
+ }
+}
+
+body {
+ background-color: var(--site-bgcolor, #f9f9f9);
+ color: var(--site-color, #111);
+ font: 100%/1.5 system-ui;
+}
diff --git a/plugins/css-prefers-color-scheme/test/index.html b/plugins/css-prefers-color-scheme/test/index.html
new file mode 100644
index 000000000..5b181f969
--- /dev/null
+++ b/plugins/css-prefers-color-scheme/test/index.html
@@ -0,0 +1,48 @@
+
+
+
+
+
+
+ Prefers Color Scheme Test
+
+
+
+
+
+ Use this test to manually very the polyfill in various browsers
+
+
+
+
+