cmd generate-test-cases (#6)

* generate-test-cases

* update location

* postcss-blank-pseudo: fix selectors with combinators without spaces not being processed

* postcss-has-pseudo: ensure selector parser doesn't throw

* postcss-blank-pseudo: ignore :blank()

* postcss-pseudo-class-any-link : ensure selector parser doesn't throw and fix some bugs

* more generated test cases

* more generated test cases

* more generated test cases

* postcss-dir-pseudo-class : fix combinators and support for `:is(:dir(ltr))` (#62)

* postcss-dir-pseudo-class : fix combinators

* tweak

Author: romainmenke

package.json

@@ -29,7 +29,8 @@
   },
   "scripts": {
     "build": "npm run build --workspaces --if-present",
-    "lint": "npm run lint --workspaces --if-present",
+    "lint": "npm run lint --workspaces --if-present && npm run lint:rollup-config",
+    "lint:rollup-config": "eslint ./rollup --ext .js --ext .ts --ext .mjs --no-error-on-unmatched-pattern",
     "test": "npm run test --workspaces --if-present"
   },
   "volta": {

packages/base-cli/package.json

@@ -17,7 +17,7 @@
   "scripts": {
     "build": "tsc",
     "clean": "node -e \"fs.rmSync('./dist', { recursive: true, force: true });\"",
-    "lint": "eslint src/**/*.ts src/**/*.js --no-error-on-unmatched-pattern",
+    "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": "node ./test/test.mjs"

packages/generate-test-cases/README.md

@@ -0,0 +1,17 @@
+# Generate Test Cases
+
+Similar issues often appear in plugins and this can cause add extra friction
+as it is easy to forget a plugin when testing for a new known issue.
+
+## Usage :
+
+```bash
+npm run generate --workspace="@csstools/generate-test-cases"   
+```
+
+## Incorrect CSS in result.css and expect.css
+
+These tests should not be used to force 100% correctness of output CSS.
+They are intended to make unknown bugs visible.
+
+Some issues might be unfixable and this is ok.

packages/generate-test-cases/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@csstools/generate-test-cases",
+  "private": true,
+  "version": "1.0.0",
+  "description": "PostCSS test case generator",
+  "type": "module",
+  "main": "src/index.mjs",
+  "author": "",
+  "license": "CC0-1.0",
+  "scripts": {
+    "generate": "node ./src/index.mjs",
+    "lint": "eslint ./src --ext .js --ext .ts --ext .mjs --no-error-on-unmatched-pattern",
+    "test": "exit 0;"
+  },
+  "engines": {
+    "node": "^12 || ^14 || >=16"
+  },
+  "devDependencies": {
+    "mdn-data": "^2.0.23"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/csstools/postcss-plugins.git",
+    "directory": "packages/generate-test-cases"
+  }
+}

packages/generate-test-cases/src/declaration.mjs

@@ -0,0 +1,49 @@
+import * as mdnData from 'mdn-data';
+const mdnCSSData = mdnData.default.css;
+
+export function generateDeclarationTestCases(property, value) {
+	let properties = [];
+
+	properties.push(`-webkit-${property}`);
+	properties.push(`-moz-${property}`);
+	properties.push(`-ms-${property}`);
+	properties.push(`-o-${property}`);
+	properties.push(`--${property}`);
+	properties.push(`foo-${property}`);
+
+	let result =  properties.map((x, index) => {
+		return `.order-${index} {
+	${x}: ${value};
+}`;
+	}).join('\n\n') + '\n\n';
+
+	result = result + `/* ${property}: ${value}; */\n\n`;
+
+	result = result + `.content {
+	content: '${property}: ${value};';
+}\n\n`;
+
+	if (mdnCSSData.properties[property] && !['discrete', 'notAnimatable'].includes(mdnCSSData.properties[property].animationType)) {
+		result = result + `.transition {
+	transition: 1s ${property} ease;
+}\n\n`;
+	}
+
+	result = result + `.important {
+	${property}: ${value} !important;
+}\n\n`;
+
+	result = result + `@supports (${property}: ${value}) {
+	.support {
+		${property}: ${value};
+	}
+}\n`;
+
+	result = result + `@keyframes KEYFRAMES {
+	50% {
+		${property}: ${value};
+	}
+}\n`;
+
+	return result;
+}

packages/generate-test-cases/src/generate.mjs

@@ -0,0 +1,37 @@
+import { promises as fsp } from 'fs';
+import path from 'path';
+import { generateDeclarationTestCases } from './declaration.mjs';
+import { generatePropertyTestCases } from './property.mjs';
+import { generateSelectorTestCases } from './selector.mjs';
+import { generateValueTestCases } from './value.mjs';
+
+export async function generate(genType, pluginDir, seedList) {
+	switch (genType) {
+		case 'selector':
+			await fsp.writeFile(path.join(pluginDir, 'test', 'generated-selector-cases.css'), seedList.map((selector) => {
+				return generateSelectorTestCases(selector);
+			}).join('\n'));
+			break;
+
+		case 'value':
+			await fsp.writeFile(path.join(pluginDir, 'test', 'generated-value-cases.css'), seedList.map((value) => {
+				return generateValueTestCases(value);
+			}).join('\n'));
+			break;
+
+		case 'property':
+			await fsp.writeFile(path.join(pluginDir, 'test', 'generated-property-cases.css'), seedList.map((value) => {
+				return generatePropertyTestCases(value);
+			}).join('\n'));
+			break;
+
+		case 'declaration':
+			await fsp.writeFile(path.join(pluginDir, 'test', 'generated-declaration-cases.css'), seedList.map((pair) => {
+				return generateDeclarationTestCases(pair[0], pair[1]);
+			}).join('\n'));
+			break;
+
+		default:
+			break;
+	}
+}

packages/generate-test-cases/src/index.mjs

@@ -0,0 +1,90 @@
+import path from 'path';
+import { generate } from './generate.mjs';
+
+(async () => {
+	await Promise.all(
+		[
+			generate(
+				'selector',
+				path.join('../../plugins', 'postcss-dir-pseudo-class'),
+				[
+					':dir(ltr)',
+					':dir(rtl)',
+				],
+			),
+
+			generate(
+				'selector',
+				path.join('../../plugins', 'postcss-pseudo-class-any-link'),
+				[
+					':any-link',
+				],
+			),
+
+			generate(
+				'selector',
+				path.join('../../plugins', 'postcss-focus-visible'),
+				[
+					':focus-visible',
+				],
+			),
+
+			generate(
+				'selector',
+				path.join('../../plugins', 'postcss-focus-within'),
+				[
+					':focus-within',
+				],
+			),
+
+			generate(
+				'value',
+				path.join('../../plugins', 'postcss-color-functional-notation'),
+				[
+					'rgba(178 34 34 / 1)',
+					'hsl(120 100% 50% / 1)',
+				],
+			),
+
+			generate(
+				'value',
+				path.join('../../plugins', 'postcss-double-position-gradients'),
+				[
+					'linear-gradient(90deg, black 25% 50%, blue 50% 75%)',
+				],
+			),
+
+			generate(
+				'value',
+				path.join('../../plugins', 'postcss-image-set-function'),
+				[
+					'image-set(url(img/test.png) 1x, url(img/test-2x.png) 2x)',
+				],
+			),
+
+			generate(
+				'declaration',
+				path.join('../../plugins', 'postcss-place'),
+				[
+					['place-content', 'first second'],
+				],
+			),
+
+			generate(
+				'declaration',
+				path.join('../../plugins', 'postcss-logical'),
+				[
+					['inset-inline-start', '0'],
+				],
+			),
+
+			generate(
+				'declaration',
+				path.join('../../plugins', 'postcss-overflow-shorthand'),
+				[
+					['overflow', 'hidden auto'],
+				],
+			),
+		],
+	);
+})();

packages/generate-test-cases/src/property.mjs

@@ -0,0 +1,45 @@
+import * as mdnData from 'mdn-data';
+const mdnCSSData = mdnData.css;
+
+export function generatePropertyTestCases(property) {
+	let properties = [];
+
+	properties.push(`-webkit-${property}`);
+	properties.push(`-moz-${property}`);
+	properties.push(`-ms-${property}`);
+	properties.push(`-o-${property}`);
+	properties.push(`--${property}`);
+	properties.push(`foo-${property}`);
+
+	let result =  properties.map((x, index) => {
+		return `.order-${index} {
+	${x}: ${index};
+}`;
+	}).join('\n\n') + '\n\n';
+
+	result = result + `/* ${property} */\n\n`;
+
+	result = result + `.content {
+	content: '${property}';
+}\n\n`;
+
+	if (mdnCSSData.properties[property] && !['discrete', 'notAnimatable'].includes(mdnCSSData.properties[property].animationType)) {
+		result = result + `.transition {
+	transition: 1s ${property} ease;
+}\n\n`;
+	}
+
+	result = result + `@supports (${property}: red) {
+	.support {
+		${property}: red;
+	}
+}\n`;
+
+	result = result + `@keyframes KEYFRAMES {
+	50% {
+		${property}: red;
+	}
+}\n`;
+
+	return result;
+}

packages/generate-test-cases/src/selector.mjs

@@ -0,0 +1,32 @@
+export function generateSelectorTestCases(selector) {
+	let selectors = [];
+
+	for (const other of [selector, 'button', '.🧑🏾‍🎤', '.foo', '#foo', '__foo', ':--foo', '[foo="baz"]', '*', ':hover', '::before']) {
+		for (const combinator of ['', ' ' , '  ', '+', ' + ', '~', ' ~ ', '>', ' > ']) {
+			selectors.push(`${other}${combinator}${selector}`);
+			selectors.push(`${selector}${combinator}${other}`);
+		}
+
+		selectors.push(`${other}, ${selector}`);
+		selectors.push(`${selector}, ${other}`);
+	}
+
+	selectors.push(`foo[${selector}]`);
+	selectors.push(`foo[baz="${selector}"]`);
+
+	selectors.push(`:not(${selector})`);
+
+	selectors.push(`:${selector}`);
+	selectors.push(`:--${selector}`);
+	selectors.push(`__${selector}`);
+
+	let result =  selectors.map((x, index) => {
+		return `${x} {
+	order: ${index};
+}`;
+	}).join('\n\n') + '\n\n';
+
+	result = result + `/* ${selector} */\n`;
+
+	return result;
+}

packages/generate-test-cases/src/value.mjs

@@ -0,0 +1,32 @@
+export function generateValueTestCases(value) {
+	let values = [];
+
+	values.push(`${value} !important`);
+	values.push(`var(1, ${value})`);
+	values.push(`var(${value}, 1)`);
+	values.push(`var(${value}, ${value})`);
+
+	let result =  values.map((x, index) => {
+		return `.order-${index} {
+	order: ${x};
+}`;
+	}).join('\n\n') + '\n\n';
+
+	result = result + `/* ${value} */\n\n`;
+
+	result = result + `:root {
+	--some-var: ${value};
+}\n\n`;
+
+	result = result + `.content {
+	content: '${value}';
+}\n\n`;
+
+	result = result + `@supports (order: ${value}) {
+	.support {
+		order: ${value};
+	}
+}\n`;
+
+	return result;
+}