csstools · Nov 16, 2022 · Nov 16, 2022 · Nov 18, 2022 · Nov 18, 2022 · Nov 18, 2022
Showing 2,106 changed files with 92,582 additions and 21,696 deletions.
diff --git a/.gitattributes b/.gitattributes
@@ -1 +1,6 @@
 * text=auto eol=lf
+
+# 1. reduce noise when running "git diff" by not showing a full diff for "/dist" contents
+# 2. make it easier to merge by doing a dumb union for everything in "/dist"
+**/dist/** -diff
+**/dist/** merge=union
diff --git a/.github/ISSUE_TEMPLATE/css-issue.yml b/.github/ISSUE_TEMPLATE/css-issue.yml
@@ -68,7 +68,7 @@ body:
         - PostCSS Color Function
         - PostCSS Color Functional Notation
         - PostCSS Color Hex Alpha
-        - PostCSS Color Mod Function
+        - PostCSS Conditional Values
         - PostCSS Custom Media Queries
         - PostCSS Custom Properties
         - PostCSS Custom Selectors
@@ -87,6 +87,10 @@ body:
         - PostCSS Is Pseudo Class
         - PostCSS Lab Function
         - PostCSS Logical
+        - PostCSS Logical Float and Clear
+        - PostCSS Logical Resize
+        - PostCSS Logical Viewport Units
+        - PostCSS Media Queries Aspect-Ratio Number Values
         - PostCSS Media Query Ranges
         - PostCSS Nested Calc
         - PostCSS Nesting
@@ -103,7 +107,7 @@ body:
         - PostCSS Stepped Value Functions
         - PostCSS System Ui Font Family
         - PostCSS Text Decoration Shorthand
-        - PostCSS Trigonometric-Functions
+        - PostCSS Trigonometric Functions
         - PostCSS Unset Value
   - type: input
     id: version

diff --git a/.github/ISSUE_TEMPLATE/plugin-issue.yml b/.github/ISSUE_TEMPLATE/plugin-issue.yml
@@ -70,7 +70,7 @@ body:
         - PostCSS Color Function
         - PostCSS Color Functional Notation
         - PostCSS Color Hex Alpha
-        - PostCSS Color Mod Function
+        - PostCSS Conditional Values
         - PostCSS Custom Media Queries
         - PostCSS Custom Properties
         - PostCSS Custom Selectors
@@ -89,6 +89,10 @@ body:
         - PostCSS Is Pseudo Class
         - PostCSS Lab Function
         - PostCSS Logical
+        - PostCSS Logical Float and Clear
+        - PostCSS Logical Resize
+        - PostCSS Logical Viewport Units
+        - PostCSS Media Queries Aspect-Ratio Number Values
         - PostCSS Media Query Ranges
         - PostCSS Nested Calc
         - PostCSS Nesting
@@ -105,7 +109,7 @@ body:
         - PostCSS Stepped Value Functions
         - PostCSS System Ui Font Family
         - PostCSS Text Decoration Shorthand
-        - PostCSS Trigonometric-Functions
+        - PostCSS Trigonometric Functions
         - PostCSS Unset Value
   - type: input
     id: version

diff --git a/.github/bin/clean.sh b/.github/bin/clean.sh
@@ -2,6 +2,8 @@
 
 set -e
 
+find . -type d -name 'dist' | xargs rm -r
+
 git clean -dfx --exclude \
 	.idea \
 	.vscode \

diff --git a/.github/bin/format-package-json.mjs b/.github/bin/format-package-json.mjs
@@ -64,7 +64,9 @@ const formatted = {};
 	formatted.private = packageJSONInfo.private;
 	delete packageJSONInfo.private;
 
-	formatted.engines = packageJSONInfo.engines;
+	formatted.engines = {
+		node: '^14 || ^16 || >=18'
+	};
 	delete packageJSONInfo.engines;
 
 	formatted.type = packageJSONInfo.type;
@@ -206,7 +208,10 @@ const formatted = {};
 	delete packageJSONInfo.keywords;
 
 	if (formatted.keywords && formatted.keywords.length) {
-		formatted.keywords.sort();
+		const keywords = new Set(formatted.keywords);
+		keywords.forEach((keyword) => keywords.delete(keyword + 's')); // poor mans pluralize, we only want singular words as keywords
+		formatted.keywords = Array.from(keywords);
+		formatted.keywords.sort((a, b) => a.localeCompare(b));
 	}
 
 	if (Object.keys(packageJSONInfo.csstools ?? {}).length) {

diff --git a/.github/bin/generate-docs/install-template.md b/.github/bin/generate-docs/install-template.md
@@ -2,8 +2,15 @@
 
 [<humanReadableName>] runs in all Node environments, with special instructions for:
 
-| [Node](#node) | [PostCSS CLI](#postcss-cli) | [Webpack](#webpack) | [Create React App](#create-react-app) | [Gulp](#gulp) | [Grunt](#grunt) |
-| --- | --- | --- | --- | --- | --- |
+- [Node](#node)
+- [PostCSS CLI](#postcss-cli)
+- [PostCSS Load Config](#postcss-load-config)
+- [Webpack](#webpack)
+- [Next.js](#nextjs)
+- [Gulp](#gulp)
+- [Grunt](#grunt)
+
+<parallelBuildsNotice>
 
 ## Node
 
@@ -16,6 +23,7 @@ npm install postcss <packageName> --save-dev
 Use it as a [PostCSS] plugin:
 
 ```js
+// commonjs
 const postcss = require('postcss');
 const <exportName> = require('<packageName>');
 
@@ -24,6 +32,16 @@ postcss([
 ]).process(YOUR_CSS /*, processOptions */);
 ```
 
+```js
+// esm
+import postcss from 'postcss';
+import <exportName> from '<packageName>';
+
+postcss([
+	<exportName>(/* pluginOptions */)
+]).process(YOUR_CSS /*, processOptions */);
+```
+
 ## PostCSS CLI
 
 Add [PostCSS CLI] to your project:
@@ -44,6 +62,38 @@ module.exports = {
 }
 ```
 
+## PostCSS Load Config
+
+If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config).
+
+```bash
+npm install <packageName> --save-dev
+```
+
+`package.json`:
+
+```json
+{
+	"postcss": {
+		"plugins": {
+			"<packageName>": {}
+		}
+	}
+}
+```
+
+`.postcssrc.json`:
+
+```json
+{
+	"plugins": {
+		"<packageName>": {}
+	}
+}
+```
+
+_See the [README of `postcss-load-config`](https://github.com/postcss/postcss-load-config#usage) for more usage options._
+
 ## Webpack
 
 _Webpack version 5_
@@ -73,6 +123,7 @@ module.exports = {
 						options: {
 							postcssOptions: {
 								plugins: [
+									<otherPluginsInWebpack>,
 									[
 										"<packageName>",
 										{
@@ -90,26 +141,35 @@ module.exports = {
 };
 ```
 
-## Create React App
+## Next.js
 
-Add [React App Rewired] and [React App Rewire PostCSS] to your project:
+Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config)
 
 ```bash
-npm install react-app-rewired react-app-rewire-postcss <packageName> --save-dev
+npm install <packageName> --save-dev
 ```
 
-Use [React App Rewire PostCSS] and [<humanReadableName>] in your
-`config-overrides.js` file:
+Use [<humanReadableName>] in your `postcss.config.json` file:
 
-```js
-const reactAppRewirePostcss = require('react-app-rewire-postcss');
-const <exportName> = require('<packageName>');
+```json
+{
+	"plugins": [
+		"<packageName>"
+	]
+}
+```
 
-module.exports = config => reactAppRewirePostcss(config, {
-	plugins: () => [
-		<exportName>(/* pluginOptions */)
+```json5
+{
+	"plugins": [
+		[
+			"<packageName>",
+			{
+				// Optionally add plugin options
+			}
+		]
 	]
-});
+}
 ```
 
 ## Gulp
@@ -172,5 +232,4 @@ grunt.initConfig({
 [PostCSS CLI]: https://github.com/postcss/postcss-cli
 [PostCSS Loader]: https://github.com/postcss/postcss-loader
 [<humanReadableName>]: https://github.com/csstools/postcss-plugins/tree/main/<packagePath>
-[React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss
-[React App Rewired]: https://github.com/timarney/react-app-rewired
+[Next.js]: https://nextjs.org
diff --git a/.github/bin/generate-docs/install.mjs b/.github/bin/generate-docs/install.mjs
@@ -11,4 +11,14 @@ installDoc = installDoc.replaceAll('<humanReadableName>', packageJSONInfo.csstoo
 installDoc = installDoc.replaceAll('<packageName>', packageJSONInfo.name);
 installDoc = installDoc.replaceAll('<packagePath>', path.join(path.basename(path.dirname(process.cwd())), path.basename(process.cwd())));
 
+if (packageJSONInfo?.csstools?.assumesToProcessBundledCSS) {
+	installDoc = installDoc.replaceAll('<parallelBuildsNotice>', `⚠️ [${packageJSONInfo.csstools.humanReadableName}] assumes to process your complete CSS bundle.<br>If your build tool processes files individually or in parallel the output will be incorrect.<br>Using [\`postcss-import\`](https://www.npmjs.com/package/postcss-import) and \`@import\` statements is one way to make sure your CSS is bundled before it is processed by this plugin.\n`);
+	installDoc = installDoc.replaceAll('<otherPluginsInWebpack>', `["postcss-import"]`);
+	// <parallelBuildsNotice>
+} else {
+	// Just a filler so that formatting doesn't become too complex.
+	installDoc = installDoc.replaceAll('<parallelBuildsNotice>', ``);
+	installDoc = installDoc.replaceAll('<otherPluginsInWebpack>', `// Other plugins`);
+}
+
 await fsp.writeFile('./INSTALL.md', installDoc);
diff --git a/.github/bin/generate-docs/readme.mjs b/.github/bin/generate-docs/readme.mjs
@@ -33,7 +33,7 @@ readmeDoc = readmeDoc.replace(`<!-- Available Variables: -->
 readmeDoc = readmeDoc.replaceAll('<corsWarning>', corsTemplate);
 
 // Insert "Header" section
-readmeDoc = readmeDoc.replace('<header>', `# <humanReadableName> [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][postcss]
+readmeDoc = readmeDoc.replace('<header>', `# <humanReadableName> [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][PostCSS]
 
 ` + '[<img alt="npm version" src="https://img.shields.io/npm/v/<packageName>.svg" height="20">][npm-url] ' +
 `${
@@ -68,8 +68,13 @@ postcss([
 readmeDoc = readmeDoc.replace('<envSupport>', `[<humanReadableName>] runs in all Node environments, with special
 instructions for:
 
-| [Node](INSTALL.md#node) | [PostCSS CLI](INSTALL.md#postcss-cli) | [Webpack](INSTALL.md#webpack) | [Create React App](INSTALL.md#create-react-app) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) |
-| --- | --- | --- | --- | --- | --- |`);
+- [Node](INSTALL.md#node)
+- [PostCSS CLI](INSTALL.md#postcss-cli)
+- [PostCSS Load Config](INSTALL.md#postcss-load-config)
+- [Webpack](INSTALL.md#webpack)
+- [Next.js](INSTALL.md#nextjs)
+- [Gulp](INSTALL.md#gulp)
+- [Grunt](INSTALL.md#grunt)`);
 
 // Insert "Link List" section
 readmeDoc = readmeDoc.replace('<linkList>', `[cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test
@@ -81,10 +86,7 @@ ${
 [discord]: https://discord.gg/bUadyRwkJS
 [npm-url]: https://www.npmjs.com/package/<packageName>
 
-[Gulp PostCSS]: https://github.com/postcss/gulp-postcss
-[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss
 [PostCSS]: https://github.com/postcss/postcss
-[PostCSS Loader]: https://github.com/postcss/postcss-loader
 [<humanReadableName>]: https://github.com/csstools/postcss-plugins/tree/main/<packagePath>`);
 
 readmeDoc = readmeDoc.replaceAll('<cssdbId>', packageJSONInfo.csstools.cssdbId);

diff --git a/.github/bin/modified-workspaces/exec.mjs b/.github/bin/modified-workspaces/exec.mjs
diff --git a/.github/bin/modified-workspaces/last-cached-commit.mjs b/.github/bin/modified-workspaces/last-cached-commit.mjs