apply new test suite to more plugins and sourcemap fixes

packages/postcss-tape/src/index.ts

@@ -6,7 +6,7 @@ import path from 'path';
 import fs, { promises as fsp } from 'fs';
 import { strict as assert } from 'assert';
 
-import type { PluginCreator, Plugin } from 'postcss';
+import type { PluginCreator, Plugin, Result } from 'postcss';
 import { formatGitHubActionAnnotation } from './github-annotations';
 import { dashesSeparator, formatCSSAssertError, formatWarningsAssertError } from './format-asserts';
 import noopPlugin from './noop-plugin';
@@ -20,6 +20,9 @@ type TestCaseOptions = {
 	plugins?: Array<Plugin>,
 	// The expected number of warnings.
 	warnings?: number,
+	// Expected exception
+	// NOTE: plugins should not throw exceptions, this goes against best practices. Use `errors` instead.
+	exception?: RegExp,
 
 	// Override the file name of the "expect" file.
 	expect?: string,
@@ -87,7 +90,13 @@ export default function runner(currentPlugin: PluginCreator<unknown>) {
 
 		// https://github.com/postcss/postcss/blob/main/docs/guidelines/plugin.md#11-clear-name-with-postcss--prefix
 		// Clear name with postcss- prefix
-		if (!packageInfo.name.startsWith('postcss-') && !packageInfo.name.startsWith('@csstools/postcss-')) {
+		const isOlderPackageName = [
+			'css-has-pseudo',
+			'css-blank-pseudo',
+			'css-prefers-color-scheme',
+		].includes(packageInfo.name);
+
+		if (!packageInfo.name.startsWith('postcss-') && !packageInfo.name.startsWith('@csstools/postcss-') && !isOlderPackageName) {
 			hasErrors = true;
 
 			if (process.env.GITHUB_ACTIONS) {
@@ -165,14 +174,26 @@ export default function runner(currentPlugin: PluginCreator<unknown>) {
 				}
 			}
 
-			const result = await postcss(plugins).process(input, {
-				from: testFilePath,
-				to: resultFilePath,
-				map: {
-					inline: false,
-					annotation: false,
-				},
-			});
+			let result: Result;
+
+			try {
+				result = await postcss(plugins).process(input, {
+					from: testFilePath,
+					to: resultFilePath,
+					map: {
+						inline: false,
+						annotation: false,
+					},
+				});
+			} catch (err) {
+				if (testCaseOptions.exception && testCaseOptions.exception.test(err.message)) {
+					// expected an exception and got one.
+					continue;
+				}
+
+				// rethrow
+				throw err;
+			}
 
 			// Try to write the result file, even if further checks fails.
 			// This helps writing new tests for plugins.

plugin-packs/postcss-preset-env/.tape.js → plugin-packs/postcss-preset-env/.tape.mjs

@@ -1,3 +1,7 @@
+import postcssTape from '../../packages/postcss-tape/dist/index.mjs';
+import plugin from 'postcss-preset-env';
+import fs from 'fs';
+
 const orderDetectionPlugin = (prop, changeWhenMatches) => {
 	return {
 		postcssPlugin: 'order-detection',
@@ -12,7 +16,7 @@ const orderDetectionPlugin = (prop, changeWhenMatches) => {
 
 orderDetectionPlugin.postcss = true
 
-module.exports = {
+postcssTape(plugin)({
 	'basic': {
 		message: 'supports basic usage'
 	},
@@ -324,16 +328,16 @@ module.exports = {
 		before() {
 			try {
 				global.__exportTo = {
-					css: require('fs').readFileSync('test/generated-custom-exports.css', 'utf8'),
-					js: require('fs').readFileSync('test/generated-custom-exports.js', 'utf8'),
-					json: require('fs').readFileSync('test/generated-custom-exports.json', 'utf8'),
-					mjs: require('fs').readFileSync('test/generated-custom-exports.mjs', 'utf8')
+					css: fs.readFileSync('test/generated-custom-exports.css', 'utf8'),
+					js: fs.readFileSync('test/generated-custom-exports.js', 'utf8'),
+					json: fs.readFileSync('test/generated-custom-exports.json', 'utf8'),
+					mjs: fs.readFileSync('test/generated-custom-exports.mjs', 'utf8')
 				};
 
-				require('fs').rmSync('test/generated-custom-exports.css');
-				require('fs').rmSync('test/generated-custom-exports.js');
-				require('fs').rmSync('test/generated-custom-exports.json');
-				require('fs').rmSync('test/generated-custom-exports.mjs');
+				fs.rmSync('test/generated-custom-exports.css');
+				fs.rmSync('test/generated-custom-exports.js');
+				fs.rmSync('test/generated-custom-exports.json');
+				fs.rmSync('test/generated-custom-exports.mjs');
 			} catch (_) {
 				// ignore errors here.
 				// If the files are removed manually test run will regenerate these.
@@ -343,10 +347,10 @@ module.exports = {
 		},
 		after() {
 			global.__exportAs = {
-				css: require('fs').readFileSync('test/generated-custom-exports.css', 'utf8'),
-				js: require('fs').readFileSync('test/generated-custom-exports.js', 'utf8'),
-				json: require('fs').readFileSync('test/generated-custom-exports.json', 'utf8'),
-				mjs: require('fs').readFileSync('test/generated-custom-exports.mjs', 'utf8')
+				css: fs.readFileSync('test/generated-custom-exports.css', 'utf8'),
+				js: fs.readFileSync('test/generated-custom-exports.js', 'utf8'),
+				json: fs.readFileSync('test/generated-custom-exports.json', 'utf8'),
+				mjs: fs.readFileSync('test/generated-custom-exports.mjs', 'utf8')
 			};
 
 			Object.keys(global.__exportTo).forEach(key => {
@@ -367,4 +371,4 @@ module.exports = {
 			}
 		},
 	},
-};
+});

plugin-packs/postcss-preset-env/CHANGELOG.md

@@ -4,6 +4,7 @@
 
 - Added `@csstools/postcss-is-pseudo-class` <br/> [Check the plugin README](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-is-pseudo-class#readme) for usage details.
 - Added `debug` [option](https://github.com/csstools/postcss-plugins/tree/main/plugin-packs/postcss-preset-env#debug) that enables extra debugging information while processing the CSS.
+- Fix sourcemaps for `image-set()` function
 
 ### 7.2.3 (January 12, 2022)
 

plugin-packs/postcss-preset-env/package.json

@@ -20,7 +20,7 @@
     "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:exports": "node ./test/_import.mjs && node ./test/_require.cjs"
   },
   "engines": {
@@ -63,9 +63,7 @@
     "postcss-selector-not": "^5.0.0"
   },
   "devDependencies": {
-    "postcss": "^8.4.5",
-    "postcss-simple-vars": "^6.0.3",
-    "postcss-tape": "^6.0.1"
+    "postcss-simple-vars": "^6.0.3"
   },
   "peerDependencies": {
     "postcss": "^8.4"

plugins/css-blank-pseudo/.tape.js → plugins/css-blank-pseudo/.tape.mjs

@@ -1,4 +1,7 @@
-module.exports = {
+import postcssTape from '../../packages/postcss-tape/dist/index.mjs';
+import plugin from 'css-blank-pseudo';
+
+postcssTape(plugin)({
 	'basic': {
 		message: 'supports basic usage',
 	},
@@ -21,4 +24,4 @@ module.exports = {
 			preserve: false
 		}
 	},
-};
+});

plugins/css-blank-pseudo/package.json

@@ -40,7 +40,7 @@
     "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",
     "cli": "css-blank-pseudo",
     "test:exports": "node ./test/_import.mjs && node ./test/_require.cjs"
   },
@@ -50,10 +50,6 @@
   "dependencies": {
     "postcss-selector-parser": "^6.0.8"
   },
-  "devDependencies": {
-    "postcss": "^8.3.6",
-    "postcss-tape": "^6.0.1"
-  },
   "peerDependencies": {
     "postcss": "^8.3"
   },

plugins/postcss-image-set-function/.tape.js → plugins/postcss-image-set-function/.tape.mjs

@@ -1,4 +1,7 @@
-module.exports = {
+import postcssTape from '../../packages/postcss-tape/dist/index.mjs';
+import plugin from 'postcss-image-set-function';
+
+postcssTape(plugin)({
 	'basic': {
 		message: 'supports basic usage',
 	},
@@ -29,9 +32,7 @@ module.exports = {
 		},
 		expect: 'invalid.css',
 		result: 'invalid.css',
-		error: {
-			message: /unexpected image/
-		}
+		exception: /unexpected image/
 	},
 	'generated-value-cases': {
 		message: 'correctly handles generated cases',
@@ -45,4 +46,4 @@ module.exports = {
 			preserve: true
 		}
 	},
-};
+});

plugins/postcss-image-set-function/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changes to PostCSS image-set() Function
 
+### Unreleased
+
+- Fix sourcemaps for `image-set()` function
+
 ### 4.0.4 (January 2, 2022)
 
 - Removed Sourcemaps from package tarball.

plugins/postcss-image-set-function/package.json

@@ -21,7 +21,7 @@
     "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:exports": "node ./test/_import.mjs && node ./test/_require.cjs"
   },
   "engines": {
@@ -30,10 +30,6 @@
   "dependencies": {
     "postcss-value-parser": "^4.2.0"
   },
-  "devDependencies": {
-    "postcss": "^8.3.6",
-    "postcss-tape": "^6.0.1"
-  },
   "peerDependencies": {
     "postcss": "^8.3"
   },

plugins/postcss-image-set-function/src/lib/get-media.ts

@@ -4,7 +4,7 @@ import valueParser from 'postcss-value-parser';
 const dpiRatios = { dpcm: 2.54, dpi: 1, dppx: 96, x: 96 };
 
 // return a valid @media rule
-export function getMedia(dpi: number | false, postcss) {
+export function getMedia(dpi: number | false, postcss, decl) {
 	if (typeof dpi === 'boolean') {
 		return false;
 	}
@@ -15,6 +15,7 @@ export function getMedia(dpi: number | false, postcss) {
 	const media = postcss.atRule({
 		name: 'media',
 		params: `(-webkit-min-device-pixel-ratio: ${dpr}), (min-resolution: ${dpi}dpi)`,
+		source: decl.source,
 	});
 
 	return media;

plugins/postcss-image-set-function/src/lib/process-image-set.ts

@@ -33,7 +33,7 @@ export const processImageSet = (imageSetFunctions: Array<imageSetFunction>, decl
 			const value = getImage(imageSetOptionNodes[index + 1]);
 			const mediaDPI = getMediaDPI(imageSetOptionNodes[index + 2]);
 
-			const media = getMedia(mediaDPI, opts.postcss);
+			const media = getMedia(mediaDPI, opts.postcss, decl);
 
 			// handle invalidations
 			if (!comma) {

plugins/postcss-nesting/.tape.mjs

@@ -6,7 +6,7 @@ const mixinPluginRule = () => {
 		postcssPlugin: 'mixin',
 		AtRule: {
 			mixin(node, { postcss }) {
-				node.replaceWith(postcss().process('& .in{ &.deep { color: blue; }}', {from : 'mixin.css'}).root);
+				node.replaceWith(postcss.parse('& .in{ &.deep { color: blue; }}', {from : 'mixin.css'}));
 			},
 		},
 	}
@@ -19,7 +19,7 @@ const mixinPluginDeclaration = () => {
 		postcssPlugin: 'mixin',
 		AtRule: {
 			mixin(node, { postcss }) {
-				node.replaceWith(postcss().process('color: blue;', {from : 'mixin.css'}).root);
+				node.replaceWith(postcss.parse('color: blue;', {from : 'mixin.css'}));
 			},
 		},
 	}