Fix open issues (#57)

* fix : csstools/css-has-pseudo#13

* fix code bug

* wip

* fix css-prefers-color-scheme

* ensure old browser script location is published

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;

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;

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

plugins/css-blank-pseudo/README.md

@@ -32,6 +32,12 @@ Next, use your transformed CSS with this script:
 <script>cssBlankPseudo(document)</script>
 ```
 
+⚠️ Please use a versioned url, like this : `https://unpkg.com/[email protected]/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

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",

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

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

plugins/css-has-pseudo/README.md

@@ -42,6 +42,12 @@ Next, use your transformed CSS with this script:
 <script>cssHasPseudo(document)</script>
 ```
 
+⚠️ Please use a versioned url, like this : `https://unpkg.com/[email protected]/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.

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",

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

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
+		}
+	}
 };

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

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

plugins/css-prefers-color-scheme/README.md

@@ -28,7 +28,11 @@ colorScheme = initPrefersColorScheme('dark') // apply "dark" queries (you can ch
 </script>
 ```
 
-Dependencies got you down? Don’t worry, this script is only 537 bytes.
+⚠️ Please use a versioned url, like this : `https://unpkg.com/[email protected]/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

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",

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);
 		}

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',
 		},
 	),
 );