From f12b033995ed9a1451225e812c259a15ca908cfe Mon Sep 17 00:00:00 2001 From: romainmenke Date: Thu, 20 Jan 2022 15:50:16 +0100 Subject: [PATCH 1/2] apply new test suite to more plugins and sourcemap fixes --- packages/postcss-tape/src/index.ts | 41 ++++++++++++++----- .../{.tape.js => .tape.mjs} | 32 ++++++++------- plugin-packs/postcss-preset-env/CHANGELOG.md | 1 + plugin-packs/postcss-preset-env/package.json | 6 +-- .../css-blank-pseudo/{.tape.js => .tape.mjs} | 7 +++- plugins/css-blank-pseudo/package.json | 2 +- .../{.tape.js => .tape.mjs} | 11 ++--- .../postcss-image-set-function/CHANGELOG.md | 4 ++ .../postcss-image-set-function/package.json | 2 +- .../src/lib/get-media.ts | 3 +- .../src/lib/process-image-set.ts | 2 +- plugins/postcss-nesting/.tape.mjs | 4 +- 12 files changed, 74 insertions(+), 41 deletions(-) rename plugin-packs/postcss-preset-env/{.tape.js => .tape.mjs} (89%) rename plugins/css-blank-pseudo/{.tape.js => .tape.mjs} (75%) rename plugins/postcss-image-set-function/{.tape.js => .tape.mjs} (82%) diff --git a/packages/postcss-tape/src/index.ts b/packages/postcss-tape/src/index.ts index 93c3c3aa4..4bac715c1 100644 --- a/packages/postcss-tape/src/index.ts +++ b/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, // 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) { // 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) { } } - 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. diff --git a/plugin-packs/postcss-preset-env/.tape.js b/plugin-packs/postcss-preset-env/.tape.mjs similarity index 89% rename from plugin-packs/postcss-preset-env/.tape.js rename to plugin-packs/postcss-preset-env/.tape.mjs index 47612481a..0fcd6de73 100644 --- a/plugin-packs/postcss-preset-env/.tape.js +++ b/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 = { } }, }, -}; +}); diff --git a/plugin-packs/postcss-preset-env/CHANGELOG.md b/plugin-packs/postcss-preset-env/CHANGELOG.md index 30326b253..1b791cee5 100644 --- a/plugin-packs/postcss-preset-env/CHANGELOG.md +++ b/plugin-packs/postcss-preset-env/CHANGELOG.md @@ -4,6 +4,7 @@ - Added `@csstools/postcss-is-pseudo-class`
[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) diff --git a/plugin-packs/postcss-preset-env/package.json b/plugin-packs/postcss-preset-env/package.json index ebf1d7efa..9de7b34f7 100644 --- a/plugin-packs/postcss-preset-env/package.json +++ b/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" diff --git a/plugins/css-blank-pseudo/.tape.js b/plugins/css-blank-pseudo/.tape.mjs similarity index 75% rename from plugins/css-blank-pseudo/.tape.js rename to plugins/css-blank-pseudo/.tape.mjs index 45922c879..1c0aa6706 100644 --- a/plugins/css-blank-pseudo/.tape.js +++ b/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 } }, -}; +}); diff --git a/plugins/css-blank-pseudo/package.json b/plugins/css-blank-pseudo/package.json index 3c40ffc82..10f382c59 100644 --- a/plugins/css-blank-pseudo/package.json +++ b/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" }, diff --git a/plugins/postcss-image-set-function/.tape.js b/plugins/postcss-image-set-function/.tape.mjs similarity index 82% rename from plugins/postcss-image-set-function/.tape.js rename to plugins/postcss-image-set-function/.tape.mjs index 10a08ff63..8219da2a7 100644 --- a/plugins/postcss-image-set-function/.tape.js +++ b/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 } }, -}; +}); diff --git a/plugins/postcss-image-set-function/CHANGELOG.md b/plugins/postcss-image-set-function/CHANGELOG.md index 1ce81588c..45e29fd14 100644 --- a/plugins/postcss-image-set-function/CHANGELOG.md +++ b/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. diff --git a/plugins/postcss-image-set-function/package.json b/plugins/postcss-image-set-function/package.json index 28b73efe6..fafb23e94 100644 --- a/plugins/postcss-image-set-function/package.json +++ b/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": { diff --git a/plugins/postcss-image-set-function/src/lib/get-media.ts b/plugins/postcss-image-set-function/src/lib/get-media.ts index 8b33320c0..d799ba96f 100644 --- a/plugins/postcss-image-set-function/src/lib/get-media.ts +++ b/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; diff --git a/plugins/postcss-image-set-function/src/lib/process-image-set.ts b/plugins/postcss-image-set-function/src/lib/process-image-set.ts index a1d46d233..a97495b4d 100644 --- a/plugins/postcss-image-set-function/src/lib/process-image-set.ts +++ b/plugins/postcss-image-set-function/src/lib/process-image-set.ts @@ -33,7 +33,7 @@ export const processImageSet = (imageSetFunctions: Array, 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) { diff --git a/plugins/postcss-nesting/.tape.mjs b/plugins/postcss-nesting/.tape.mjs index a245c21b9..8baa27012 100644 --- a/plugins/postcss-nesting/.tape.mjs +++ b/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'})); }, }, } From bfc1427ddb1aa3afca78223ef849485e2626dcdf Mon Sep 17 00:00:00 2001 From: romainmenke Date: Thu, 20 Jan 2022 18:22:21 +0100 Subject: [PATCH 2/2] cleanup dev dependencies --- plugins/css-blank-pseudo/package.json | 4 ---- plugins/postcss-image-set-function/package.json | 4 ---- 2 files changed, 8 deletions(-) diff --git a/plugins/css-blank-pseudo/package.json b/plugins/css-blank-pseudo/package.json index 10f382c59..2ff793b93 100644 --- a/plugins/css-blank-pseudo/package.json +++ b/plugins/css-blank-pseudo/package.json @@ -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" }, diff --git a/plugins/postcss-image-set-function/package.json b/plugins/postcss-image-set-function/package.json index fafb23e94..8973da1ee 100644 --- a/plugins/postcss-image-set-function/package.json +++ b/plugins/postcss-image-set-function/package.json @@ -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" },