csstools · romainmenke · Jan 23, 2022 · Jan 23, 2022 · Jan 23, 2022 · Jan 23, 2022
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/postcss-tape/src/index.ts b/packages/postcss-tape/src/index.ts
@@ -76,7 +76,7 @@ export default function runner(currentPlugin: PluginCreator<unknown>) {
 		// https://github.com/postcss/postcss/blob/main/docs/guidelines/plugin.md#54-include-postcss-plugin-keyword-in-packagejson
 		// Include postcss-plugin keyword in package.json
 		const packageInfo = JSON.parse(fs.readFileSync('./package.json').toString());
-		if (!packageInfo.keywords.includes('postcss-plugin')) {
+		if (!packageInfo.keywords || !packageInfo.keywords.includes('postcss-plugin')) {
 			hasErrors = true;
 
 			if (emitGitHubAnnotations) {

diff --git a/plugin-packs/postcss-preset-env/src/lib/get-options-for-browsers-by-feature.js b/plugin-packs/postcss-preset-env/src/lib/get-options-for-browsers-by-feature.js
@@ -7,6 +7,12 @@ export default function getOptionsForBrowsersByFeature(browsers, feature, cssdb)
 	const supportedBrowsers = browserslist(browsers, { ignoreUnknownVersions: true });
 
 	switch (feature.id) {
+		case 'is-pseudo-class':
+			// Emit a warning to avoid making unresolved removal of `:is()` a feature.
+			// see : https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-is-pseudo-class#%EF%B8%8F-known-shortcomings
+			return {
+				onComplexSelector: 'warning',
+			};
 		case 'nesting-rules':
 			{
 				// Nesting rules can transform selectors to use :is pseudo.

diff --git a/plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css b/plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css
@@ -274,6 +274,10 @@
 	order: 27;
 }
 
+.a.c > .b + .d {
+	order: 28;
+}
+
 .test-hwb-function {
 	background-color: rgba(0, 195, 255, .5);
 }

diff --git a/plugin-packs/postcss-preset-env/test/basic.autoprefixer.false.expect.css b/plugin-packs/postcss-preset-env/test/basic.autoprefixer.false.expect.css
@@ -274,6 +274,10 @@
 	order: 27;
 }
 
+.a.c > .b + .d {
+	order: 28;
+}
+
 .test-hwb-function {
 	background-color: rgba(0, 195, 255, .5);
 }

diff --git a/plugin-packs/postcss-preset-env/test/basic.ch38.expect.css b/plugin-packs/postcss-preset-env/test/basic.ch38.expect.css
@@ -194,6 +194,10 @@
 	order: 27;
 }
 
+.a.c > .b + .d {
+	order: 28;
+}
+
 .test-hwb-function {
 	background-color: rgba(0, 195, 255, .5);
 }

diff --git a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78-saf10.expect.css b/plugin-packs/postcss-preset-env/test/basic.ch88-ff78-saf10.expect.css
@@ -207,6 +207,10 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te
 	order: 27;
 }
 
+.a.c > .b + .d {
+	order: 28;
+}
+
 .test-hwb-function {
 	background-color: rgba(0, 195, 255, .5);
 }

diff --git a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.expect.css b/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.expect.css
@@ -181,6 +181,10 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te
 	order: 27;
 }
 
+:is(.a > .b) + :is(.c > .d) {
+	order: 28;
+}
+
 .test-hwb-function {
 	background-color: rgba(0, 195, 255, .5);
 }

diff --git a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.no-is-pseudo.expect.css b/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.no-is-pseudo.expect.css
@@ -181,6 +181,10 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te
 	order: 27;
 }
 
+:is(.a > .b) + :is(.c > .d) {
+	order: 28;
+}
+
 .test-hwb-function {
 	background-color: rgba(0, 195, 255, .5);
 }

diff --git a/plugin-packs/postcss-preset-env/test/basic.css b/plugin-packs/postcss-preset-env/test/basic.css
@@ -149,6 +149,10 @@
 	order: 27;
 }
 
+:is(.a > .b) + :is(.c > .d) {
+	order: 28;
+}
+
 .test-hwb-function {
 	background-color: hwb(194 0% 0% / .5);
 }

diff --git a/plugin-packs/postcss-preset-env/test/basic.expect.css b/plugin-packs/postcss-preset-env/test/basic.expect.css
@@ -298,6 +298,10 @@
 	order: 27;
 }
 
+.a.c > .b + .d {
+	order: 28;
+}
+
 .test-hwb-function {
 	background-color: rgba(0, 195, 255, .5);
 }

diff --git a/plugin-packs/postcss-preset-env/test/basic.ff49.expect.css b/plugin-packs/postcss-preset-env/test/basic.ff49.expect.css
@@ -190,6 +190,10 @@
 	order: 27;
 }
 
+.a.c > .b + .d {
+	order: 28;
+}
+
 .test-hwb-function {
 	background-color: rgba(0, 195, 255, .5);
 }

diff --git a/plugin-packs/postcss-preset-env/test/basic.ff66.expect.css b/plugin-packs/postcss-preset-env/test/basic.ff66.expect.css
@@ -178,6 +178,10 @@
 	order: 27;
 }
 
+.a.c > .b + .d {
+	order: 28;
+}
+
 .test-hwb-function {
 	background-color: rgba(0, 195, 255, .5);
 }

diff --git a/plugin-packs/postcss-preset-env/test/basic.ie10.expect.css b/plugin-packs/postcss-preset-env/test/basic.ie10.expect.css
@@ -310,6 +310,11 @@
 	    order: 27;
 }
 
+.a.c > .b + .d {
+	-ms-flex-order: 28;
+	    order: 28;
+}
+
 .test-hwb-function {
 	background-color: rgba(0, 195, 255, .5);
 }

diff --git a/plugin-packs/postcss-preset-env/test/basic.nesting.false.expect.css b/plugin-packs/postcss-preset-env/test/basic.nesting.false.expect.css
@@ -310,6 +310,10 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te
 	order: 27;
 }
 
+.a.c > .b + .d {
+	order: 28;
+}
+
 .test-hwb-function {
 	background-color: rgba(0, 195, 255, .5);
 }

diff --git a/plugin-packs/postcss-preset-env/test/basic.nesting.true.expect.css b/plugin-packs/postcss-preset-env/test/basic.nesting.true.expect.css
@@ -165,6 +165,10 @@
 	order: 27;
 }
 
+:is(.a > .b) + :is(.c > .d) {
+	order: 28;
+}
+
 .test-hwb-function {
 	background-color: hwb(194 0% 0% / .5);
 }

diff --git a/plugin-packs/postcss-preset-env/test/basic.preserve.true.expect.css b/plugin-packs/postcss-preset-env/test/basic.preserve.true.expect.css
@@ -561,6 +561,22 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te
 	        order: 27;
 }
 
+.a.c > .b + .d {
+	-webkit-box-ordinal-group: 29;
+	-webkit-order: 28;
+	   -moz-box-ordinal-group: 29;
+	    -ms-flex-order: 28;
+	        order: 28;
+}
+
+:is(.a > .b) + :is(.c > .d) {
+	-webkit-box-ordinal-group: 29;
+	-webkit-order: 28;
+	   -moz-box-ordinal-group: 29;
+	    -ms-flex-order: 28;
+	        order: 28;
+}
+
 .test-hwb-function {
 	background-color: rgba(0, 195, 255, .5);
 	background-color: hwb(194 0% 0% / .5);

diff --git a/plugin-packs/postcss-preset-env/test/basic.safari15.expect.css b/plugin-packs/postcss-preset-env/test/basic.safari15.expect.css
@@ -165,6 +165,10 @@
 	order: 27;
 }
 
+:is(.a > .b) + :is(.c > .d) {
+	order: 28;
+}
+
 .test-hwb-function {
 	background-color: hwb(194 0% 0% / .5);
 }

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
@@ -209,6 +209,10 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te
 	order: 27;
 }
 
+.a.c > .b + .d {
+	order: 28;
+}
+
 .test-hwb-function {
 	background-color: rgba(0, 195, 255, .5);
 }

diff --git a/plugin-packs/postcss-preset-env/test/basic.stage0-ff66.expect.css b/plugin-packs/postcss-preset-env/test/basic.stage0-ff66.expect.css
@@ -197,6 +197,10 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te
 	order: 27;
 }
 
+.a.c > .b + .d {
+	order: 28;
+}
+
 .test-hwb-function {
 	background-color: rgba(0, 195, 255, .5);
 }

diff --git a/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css b/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css
@@ -317,6 +317,10 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te
 	order: 27;
 }
 
+.a.c > .b + .d {
+	order: 28;
+}
+
 .test-hwb-function {
 	background-color: rgba(0, 195, 255, .5);
 }

diff --git a/plugins/postcss-is-pseudo-class/.tape.js → plugins/postcss-is-pseudo-class/.tape.mjs b/plugins/postcss-is-pseudo-class/.tape.js → plugins/postcss-is-pseudo-class/.tape.mjs
@@ -1,9 +1,9 @@
-module.exports = {
+import postcssTape from '../../packages/postcss-tape/dist/index.mjs';
+import plugin from '@csstools/postcss-is-pseudo-class';
+
+postcssTape(plugin)({
 	basic: {
 		message: "supports basic usage",
-		options: {
-			oncomplex: 'ignore'
-		}
 	},
 	'basic:preserve': {
 		message: "supports basic usage with { preserve: true }",
@@ -19,17 +19,11 @@ module.exports = {
 	},
 	'basic:oncomplex:warning': {
 		message: "supports basic usage with { onComplexSelector: 'warning' }",
-		warnings: 3,
+		warnings: 8,
 		options: {
 			onComplexSelector: 'warning'
 		}
 	},
-	'basic:oncomplex:skip': {
-		message: "supports basic usage with { onComplexSelector: 'skip' }",
-		options: {
-			onComplexSelector: 'skip'
-		}
-	},
 	'generated-selector-class-function-cases': {
 		message: "supports generated selector class function cases",
 		warnings: 1,
@@ -40,4 +34,4 @@ module.exports = {
 	example: {
 		message: "minimal example",
 	},
-};
+});
diff --git a/plugins/postcss-is-pseudo-class/CHANGELOG.md b/plugins/postcss-is-pseudo-class/CHANGELOG.md
@@ -1,5 +1,13 @@
 # Changes to PostCSS Is Pseudo Class
 
+### Unreleased (major)
+
+- Remove `skip` flag in `onComplexSelectors` option.
+
+If a complex selector is encountered that has no known equivalent, it will always be skipped and preserved now.
+
+The previous behavior was to remove `:is()` even if that broke the selector.
+
 ### 1.0.1 (January 17, 2022)
 
 - Fix selector order

diff --git a/plugins/postcss-is-pseudo-class/README.md b/plugins/postcss-is-pseudo-class/README.md
@@ -128,14 +128,6 @@ button:not(.something-random):hover {
 
 ### onComplexSelector
 
-Do not transform complex selectors in `:is` pseudo classes.
-
-```js
-postcss([
-  postcssIsPseudoClass({ onComplexSelector: 'skip' })
-]).process(YOUR_CSS /*, processOptions */);
-```
-
 Warn on complex selectors in `:is` pseudo classes.
 
 ```js

diff --git a/plugins/postcss-is-pseudo-class/package.json b/plugins/postcss-is-pseudo-class/package.json
@@ -31,19 +31,26 @@
     "lint": "eslint ./src --ext .js --ext .ts --ext .mjs --no-error-on-unmatched-pattern",
     "prepublishOnly": "npm run clean && npm run build && npm run test",
     "stryker": "stryker run --logLevel error",
-    "test": "postcss-tape --ci && npm run test:exports",
+    "test": "node .tape.mjs && npm run test:exports",
+    "test:rewrite-expects": "REWRITE_EXPECTS=true node .tape.mjs",
     "test:exports": "node ./test/_import.mjs && node ./test/_require.cjs"
   },
   "dependencies": {
     "postcss-selector-parser": "^6.0.8"
   },
-  "devDependencies": {
-    "postcss": "^8.3.6",
-    "postcss-tape": "^6.0.1"
-  },
   "peerDependencies": {
     "postcss": "^8.3"
   },
+  "keywords": [
+    "postcss",
+    "css",
+    "postcss-plugin",
+    "matches",
+    "is",
+    "selector",
+    "polyfill",
+    "pseudo"
+  ],
   "repository": {
     "type": "git",
     "url": "https://github.com/csstools/postcss-plugins.git",

diff --git a/plugins/postcss-is-pseudo-class/src/index.ts b/plugins/postcss-is-pseudo-class/src/index.ts
@@ -1,7 +1,7 @@
 import type { PluginCreator } from 'postcss';
 import splitSelectors from './split-selectors/split-selectors';
 
-const creator: PluginCreator<{ preserve?: boolean, onComplexSelector?: 'warning' | 'skip', specificityMatchingName?: string }> = (opts?: { preserve?: boolean, onComplexSelector?: 'warning' | 'skip', specificityMatchingName?: string }) => {
+const creator: PluginCreator<{ preserve?: boolean, onComplexSelector?: 'warning', specificityMatchingName?: string }> = (opts?: { preserve?: boolean, onComplexSelector?: 'warning', specificityMatchingName?: string }) => {
 	const options = {
 		specificityMatchingName: 'does-not-exist',
 		...(opts || {}),
@@ -29,7 +29,7 @@ const creator: PluginCreator<{ preserve?: boolean, onComplexSelector?: 'warning'
 				}
 
 				didWarn = true;
-				rule.warn(result, `Complex selectors in '${rule.selector}' will have different matching after transforming.`);
+				rule.warn(result, `Complex selectors in '${rule.selector}' can not be transformed to an equivalent selector without ':is()'.`);
 			};
 
 			try {
@@ -61,6 +61,11 @@ const creator: PluginCreator<{ preserve?: boolean, onComplexSelector?: 'warning'
 					rule.remove();
 				}
 			} catch (e) {
+				// Do not ignore infinite recursion errors.
+				if (e.message.indexOf('call stack size exceeded') > -1) {
+					throw e;
+				}
+
 				rule.warn(result, `Failed to parse selector "${rule.selector}"`);
 			}
 		},

diff --git a/plugins/postcss-is-pseudo-class/src/split-selectors/complex/README.md b/plugins/postcss-is-pseudo-class/src/split-selectors/complex/README.md
@@ -0,0 +1,4 @@
+Some patterns can be detected and converted.
+This is very difficult to abstract, so best to handle this case by case on request.
+
+Make each case a separate file and write a very specific matcher.