merge bs4 and bs5 postcss config

package.json

@@ -12,7 +12,7 @@
     "css-bs4": "npm-run-all css-compile-bs4 css-postcss-bs4 css-minify-bs4",
     "css-compile-bs4": "sass --style expanded --source-map --embed-sources --no-error-css --quiet src/sass/theme-bootstrap4.scss:css/theme-bootstrap4.css src/sass/custom-editor-style-bootstrap4.scss:css/custom-editor-style-bootstrap4.css",
     "css-minify-bs4": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output css/ --batch --batch-suffix \".min\" \"css/*.css\" \"!css/*.min.css\" \"!css/*rtl*.css\" \"!css/theme.css\" \"!css/custom-editor-style.css\"",
-    "css-postcss-bs4": "postcss --config src/build-bootstrap4/postcss.config.js --replace \"css/*.css\" \"!css/*.rtl*.css\" \"!css/*.min.css\" \"!css/theme.css\" \"!css/custom-editor-style.css\"",
+    "css-postcss-bs4": "postcss --config src/build/postcss.config.js --replace \"css/*.css\" \"!css/*.rtl*.css\" \"!css/*.min.css\" \"!css/theme.css\" \"!css/custom-editor-style.css\" -- BS4",
     "js": "npm-run-all js-compile js-minify",
     "js-compile": "rollup --config src/build/rollup.config.js --sourcemap",
     "js-minify": "terser  --config-file src/build/terser.config.json --output js/theme.min.js js/theme.js",

src/build-bootstrap4/postcss.config.js

@@ -1,34 +0,0 @@
-'use strict';
-
-module.exports = ( ctx ) => {
-	return {
-		map: {
-			inline: false,
-			annotation: true,
-			sourcesContent: true,
-		},
-		plugins: {
-			autoprefixer: {
-				cascade: false,
-				env: 'bs4',
-			},
-			'postcss-understrap-palette-generator': {
-				colors: [
-					'--blue',
-					'--indigo',
-					'--purple',
-					'--pink',
-					'--red',
-					'--orange',
-					'--yellow',
-					'--green',
-					'--teal',
-					'--cyan',
-					'--white',
-					'--gray',
-					'--gray-dark',
-				],
-			},
-		},
-	};
-};

src/build/postcss.config.js

@@ -1,5 +1,26 @@
 'use strict';
 
+const process = require( 'process' );
+
+const colors = [
+	'blue',
+	'indigo',
+	'purple',
+	'pink',
+	'red',
+	'orange',
+	'yellow',
+	'green',
+	'teal',
+	'cyan',
+	'white',
+	'gray',
+	'gray-dark',
+];
+
+const BS4 = process.argv[ process.argv.length - 1 ] === 'BS4';
+const colorInfix = BS4 ? '' : 'bs-';
+
 module.exports = ( ctx ) => {
 	return {
 		map: {
@@ -10,24 +31,10 @@ module.exports = ( ctx ) => {
 		plugins: {
 			autoprefixer: {
 				cascade: false,
-				env: 'bs5',
+				env:  BS4 ? 'bs4' : 'bs5',
 			},
 			'postcss-understrap-palette-generator': {
-				colors: [
-					'--bs-blue',
-					'--bs-indigo',
-					'--bs-purple',
-					'--bs-pink',
-					'--bs-red',
-					'--bs-orange',
-					'--bs-yellow',
-					'--bs-green',
-					'--bs-teal',
-					'--bs-cyan',
-					'--bs-white',
-					'--bs-gray',
-					'--bs-gray-dark',
-				],
+				colors: colors.map( ( x ) => `--${ colorInfix }${ x }` ),
 			},
 		},
 	};