csstools · romainmenke · Nov 29, 2022 · Nov 21, 2022 · Nov 21, 2022 · Nov 26, 2022
diff --git a/.github/bin/generate-docs/install-template.md b/.github/bin/generate-docs/install-template.md
@@ -11,6 +11,8 @@
 - [Gulp](#gulp)
 - [Grunt](#grunt)
 
+<parallelBuildsNotice>
+
 ## Node
 
 Add [<humanReadableName>] to your project:
@@ -122,6 +124,7 @@ module.exports = {
 						options: {
 							postcssOptions: {
 								plugins: [
+									<otherPluginsInWebpack>,
 									[
 										"<packageName>",
 										{

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/experimental/postcss-nesting/INSTALL.md b/experimental/postcss-nesting/INSTALL.md
@@ -11,6 +11,8 @@
 - [Gulp](#gulp)
 - [Grunt](#grunt)
 
+
+
 ## Node
 
 Add [PostCSS Nesting] to your project:
@@ -122,6 +124,7 @@ module.exports = {
 						options: {
 							postcssOptions: {
 								plugins: [
+									// Other plugins,
 									[
 										"@csstools/postcss-nesting-experimental",
 										{

diff --git a/plugins/css-blank-pseudo/INSTALL.md b/plugins/css-blank-pseudo/INSTALL.md
@@ -11,6 +11,8 @@
 - [Gulp](#gulp)
 - [Grunt](#grunt)
 
+
+
 ## Node
 
 Add [PostCSS Blank Pseudo] to your project:
@@ -122,6 +124,7 @@ module.exports = {
 						options: {
 							postcssOptions: {
 								plugins: [
+									// Other plugins,
 									[
 										"css-blank-pseudo",
 										{

diff --git a/plugins/css-has-pseudo/INSTALL.md b/plugins/css-has-pseudo/INSTALL.md
@@ -11,6 +11,8 @@
 - [Gulp](#gulp)
 - [Grunt](#grunt)
 
+
+
 ## Node
 
 Add [PostCSS Has Pseudo] to your project:
@@ -122,6 +124,7 @@ module.exports = {
 						options: {
 							postcssOptions: {
 								plugins: [
+									// Other plugins,
 									[
 										"css-has-pseudo",
 										{

diff --git a/plugins/css-prefers-color-scheme/INSTALL.md b/plugins/css-prefers-color-scheme/INSTALL.md
@@ -11,6 +11,8 @@
 - [Gulp](#gulp)
 - [Grunt](#grunt)
 
+
+
 ## Node
 
 Add [Prefers Color Scheme] to your project:
@@ -122,6 +124,7 @@ module.exports = {
 						options: {
 							postcssOptions: {
 								plugins: [
+									// Other plugins,
 									[
 										"css-prefers-color-scheme",
 										{

diff --git a/plugins/postcss-attribute-case-insensitive/INSTALL.md b/plugins/postcss-attribute-case-insensitive/INSTALL.md
@@ -11,6 +11,8 @@
 - [Gulp](#gulp)
 - [Grunt](#grunt)
 
+
+
 ## Node
 
 Add [PostCSS Attribute Case Insensitive] to your project:
@@ -122,6 +124,7 @@ module.exports = {
 						options: {
 							postcssOptions: {
 								plugins: [
+									// Other plugins,
 									[
 										"postcss-attribute-case-insensitive",
 										{

diff --git a/plugins/postcss-base-plugin/INSTALL.md b/plugins/postcss-base-plugin/INSTALL.md
@@ -11,6 +11,8 @@
 - [Gulp](#gulp)
 - [Grunt](#grunt)
 
+
+
 ## Node
 
 Add [PostCSS Base Plugin] to your project:
@@ -122,6 +124,7 @@ module.exports = {
 						options: {
 							postcssOptions: {
 								plugins: [
+									// Other plugins,
 									[
 										"@csstools/postcss-base-plugin",
 										{

diff --git a/plugins/postcss-cascade-layers/INSTALL.md b/plugins/postcss-cascade-layers/INSTALL.md
@@ -11,6 +11,9 @@
 - [Gulp](#gulp)
 - [Grunt](#grunt)
 
+⚠️ [PostCSS Cascade Layers] 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.
+
+
 ## Node
 
 Add [PostCSS Cascade Layers] to your project:
@@ -122,6 +125,7 @@ module.exports = {
 						options: {
 							postcssOptions: {
 								plugins: [
+									["postcss-import"],
 									[
 										"@csstools/postcss-cascade-layers",
 										{

diff --git a/plugins/postcss-cascade-layers/package.json b/plugins/postcss-cascade-layers/package.json
@@ -86,6 +86,7 @@
 		"specificity"
 	],
 	"csstools": {
+		"assumesToProcessBundledCSS": true,
 		"cssdbId": "cascade-layers",
 		"exportName": "postcssCascadeLayers",
 		"humanReadableName": "PostCSS Cascade Layers",

diff --git a/plugins/postcss-color-function/INSTALL.md b/plugins/postcss-color-function/INSTALL.md
@@ -11,6 +11,8 @@
 - [Gulp](#gulp)
 - [Grunt](#grunt)
 
+
+
 ## Node
 
 Add [PostCSS Color Function] to your project:
@@ -122,6 +124,7 @@ module.exports = {
 						options: {
 							postcssOptions: {
 								plugins: [
+									// Other plugins,
 									[
 										"@csstools/postcss-color-function",
 										{

diff --git a/plugins/postcss-color-functional-notation/INSTALL.md b/plugins/postcss-color-functional-notation/INSTALL.md
@@ -11,6 +11,8 @@
 - [Gulp](#gulp)
 - [Grunt](#grunt)
 
+
+
 ## Node
 
 Add [PostCSS Color Functional Notation] to your project:
@@ -122,6 +124,7 @@ module.exports = {
 						options: {
 							postcssOptions: {
 								plugins: [
+									// Other plugins,
 									[
 										"postcss-color-functional-notation",
 										{

diff --git a/plugins/postcss-color-hex-alpha/INSTALL.md b/plugins/postcss-color-hex-alpha/INSTALL.md
@@ -11,6 +11,8 @@
 - [Gulp](#gulp)
 - [Grunt](#grunt)
 
+
+
 ## Node
 
 Add [PostCSS Color Hex Alpha] to your project:
@@ -122,6 +124,7 @@ module.exports = {
 						options: {
 							postcssOptions: {
 								plugins: [
+									// Other plugins,
 									[
 										"postcss-color-hex-alpha",
 										{

diff --git a/plugins/postcss-color-rebeccapurple/INSTALL.md b/plugins/postcss-color-rebeccapurple/INSTALL.md
@@ -11,6 +11,8 @@
 - [Gulp](#gulp)
 - [Grunt](#grunt)
 
+
+
 ## Node
 
 Add [PostCSS RebeccaPurple] to your project:
@@ -122,6 +124,7 @@ module.exports = {
 						options: {
 							postcssOptions: {
 								plugins: [
+									// Other plugins,
 									[
 										"postcss-color-rebeccapurple",
 										{

diff --git a/plugins/postcss-conditional-values/INSTALL.md b/plugins/postcss-conditional-values/INSTALL.md
@@ -11,6 +11,9 @@
 - [Gulp](#gulp)
 - [Grunt](#grunt)
 
+⚠️ [PostCSS Conditional Values] 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.
+
+
 ## Node
 
 Add [PostCSS Conditional Values] to your project:
@@ -122,6 +125,7 @@ module.exports = {
 						options: {
 							postcssOptions: {
 								plugins: [
+									["postcss-import"],
 									[
 										"@csstools/postcss-conditional-values",
 										{

diff --git a/plugins/postcss-conditional-values/package.json b/plugins/postcss-conditional-values/package.json
@@ -66,6 +66,7 @@
 		"postcss-plugin"
 	],
 	"csstools": {
+		"assumesToProcessBundledCSS": true,
 		"exportName": "postcssConditionalValues",
 		"humanReadableName": "PostCSS Conditional Values"
 	},

diff --git a/plugins/postcss-custom-media/INSTALL.md b/plugins/postcss-custom-media/INSTALL.md
@@ -11,6 +11,9 @@
 - [Gulp](#gulp)
 - [Grunt](#grunt)
 
+⚠️ [PostCSS Custom Media] 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.
+
+
 ## Node
 
 Add [PostCSS Custom Media] to your project:
@@ -122,6 +125,7 @@ module.exports = {
 						options: {
 							postcssOptions: {
 								plugins: [
+									["postcss-import"],
 									[
 										"postcss-custom-media",
 										{

diff --git a/plugins/postcss-custom-media/package.json b/plugins/postcss-custom-media/package.json
@@ -86,6 +86,7 @@
 		"w3c"
 	],
 	"csstools": {
+		"assumesToProcessBundledCSS": true,
 		"cssdbId": "custom-media-queries",
 		"exportName": "postcssCustomMedia",
 		"humanReadableName": "PostCSS Custom Media",

diff --git a/plugins/postcss-custom-properties/INSTALL.md b/plugins/postcss-custom-properties/INSTALL.md
@@ -11,6 +11,9 @@
 - [Gulp](#gulp)
 - [Grunt](#grunt)
 
+⚠️ [PostCSS Custom Properties] 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.
+
+
 ## Node
 
 Add [PostCSS Custom Properties] to your project:
@@ -122,6 +125,7 @@ module.exports = {
 						options: {
 							postcssOptions: {
 								plugins: [
+									["postcss-import"],
 									[
 										"postcss-custom-properties",
 										{

diff --git a/plugins/postcss-custom-properties/package.json b/plugins/postcss-custom-properties/package.json
@@ -73,6 +73,7 @@
 		"w3c"
 	],
 	"csstools": {
+		"assumesToProcessBundledCSS": true,
 		"cssdbId": "custom-properties",
 		"exportName": "postcssCustomProperties",
 		"humanReadableName": "PostCSS Custom Properties",

diff --git a/plugins/postcss-custom-selectors/INSTALL.md b/plugins/postcss-custom-selectors/INSTALL.md
@@ -11,6 +11,9 @@
 - [Gulp](#gulp)
 - [Grunt](#grunt)
 
+⚠️ [PostCSS Custom Selectors] 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.
+
+
 ## Node
 
 Add [PostCSS Custom Selectors] to your project:
@@ -122,6 +125,7 @@ module.exports = {
 						options: {
 							postcssOptions: {
 								plugins: [
+									["postcss-import"],
 									[
 										"postcss-custom-selectors",
 										{

diff --git a/plugins/postcss-custom-selectors/package.json b/plugins/postcss-custom-selectors/package.json
@@ -88,6 +88,7 @@
 		"w3c"
 	],
 	"csstools": {
+		"assumesToProcessBundledCSS": true,
 		"cssdbId": "custom-selectors",
 		"exportName": "postcssCustomSelectors",
 		"humanReadableName": "PostCSS Custom Selectors",

diff --git a/plugins/postcss-design-tokens/INSTALL.md b/plugins/postcss-design-tokens/INSTALL.md
@@ -11,6 +11,9 @@
 - [Gulp](#gulp)
 - [Grunt](#grunt)
 
+⚠️ [PostCSS Design Tokens] 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.
+
+
 ## Node
 
 Add [PostCSS Design Tokens] to your project:
@@ -122,6 +125,7 @@ module.exports = {
 						options: {
 							postcssOptions: {
 								plugins: [
+									["postcss-import"],
 									[
 										"@csstools/postcss-design-tokens",
 										{

diff --git a/plugins/postcss-design-tokens/package.json b/plugins/postcss-design-tokens/package.json
@@ -73,6 +73,7 @@
 		"postcss-plugin"
 	],
 	"csstools": {
+		"assumesToProcessBundledCSS": true,
 		"exportName": "postcssDesignTokens",
 		"humanReadableName": "PostCSS Design Tokens"
 	},

diff --git a/plugins/postcss-dir-pseudo-class/INSTALL.md b/plugins/postcss-dir-pseudo-class/INSTALL.md
@@ -11,6 +11,8 @@
 - [Gulp](#gulp)
 - [Grunt](#grunt)
 
+
+
 ## Node
 
 Add [PostCSS Dir Pseudo Class] to your project:
@@ -122,6 +124,7 @@ module.exports = {
 						options: {
 							postcssOptions: {
 								plugins: [
+									// Other plugins,
 									[
 										"postcss-dir-pseudo-class",
 										{

diff --git a/plugins/postcss-double-position-gradients/INSTALL.md b/plugins/postcss-double-position-gradients/INSTALL.md
@@ -11,6 +11,8 @@
 - [Gulp](#gulp)
 - [Grunt](#grunt)
 
+
+
 ## Node
 
 Add [PostCSS Double Position Gradients] to your project:
@@ -122,6 +124,7 @@ module.exports = {
 						options: {
 							postcssOptions: {
 								plugins: [
+									// Other plugins,
 									[
 										"postcss-double-position-gradients",
 										{