feat(component-builder,component-builder-simple): add postcss-reporter

Author: castastrophe

plugins/postcss-dropunusedvars/index.js

@@ -64,7 +64,7 @@ module.exports = ({ fix = true }) => {
 				// Note if it seems like this variable is unused
 				if (!usedAnywhere.includes(varName)) {
 					if (!fix)
-						decl.warn(result, `⚠️ ${varName} unused variable definition`, {
+						decl.warn(result, `${varName} unused variable definition`, {
 							word: varName,
 							index: decl.sourceIndex,
 						});
@@ -92,7 +92,7 @@ module.exports = ({ fix = true }) => {
 
 					if (fix) decl.remove();
 					else {
-						decl.warn(result, `⚠️ ${varName} unused variable definition`, {
+						decl.warn(result, `${varName} unused variable definition`, {
 							word: varName,
 							index: decl.sourceIndex,
 						});

tools/component-builder-simple/css/index.js

@@ -50,6 +50,7 @@ async function buildCSSWithoutThemes() {
 		env: process.env.NODE_ENV || "development",
 		from: "index.css",
 		to: "dist/index-base.css",
+		checkUnused: false,
 		splitinatorOptions: {
 			noFlatVariables: true,
 		},
@@ -74,6 +75,7 @@ async function buildCSSThemeIndex() {
 		env: process.env.NODE_ENV || "development",
 		from: "themes/spectrum.css",
 		to: "dist/index-theme.css",
+		checkUnused: false,
 		splitinatorOptions: {
 			noSelectors: true,
 		},
@@ -97,6 +99,7 @@ async function buildCSSThemes() {
 		env: process.env.NODE_ENV || "development",
 		from: "themes/spectrum.css",
 		to: "dist/themes/spectrum.css",
+		checkUnused: false,
 		splitinatorOptions: {
 			noSelectors: true,
 		},
@@ -122,6 +125,7 @@ async function buildExpressTheme() {
 		env: process.env.NODE_ENV || "development",
 		from: "themes/express.css",
 		to: "dist/themes/express.css",
+		checkUnused: false,
 		additionalPlugins: [
 			require("postcss-combininator")
 		],

tools/component-builder-simple/package.json

@@ -32,6 +32,7 @@
     "postcss-import": "^16.0.0",
     "postcss-load-config": "^5.0.2",
     "postcss-nested": "^6.0.1",
+    "postcss-reporter": "^7.1.0",
     "postcss-splitinator": "^1.0.2",
     "postcss-varsonly": "file:../../plugins/postcss-varsonly"
   },

tools/component-builder-simple/postcss.config.js

@@ -30,6 +30,7 @@ module.exports = ({
 		noFlatVariables: false,
 	},
 	varsOnly = false,
+	checkUnused = true,
 	additionalPlugins = [],
 	...options
 } = {}) => {
@@ -75,11 +76,16 @@ module.exports = ({
 			require("postcss-custom-properties-passthrough")(),
 			require("postcss-calc"),
 			...additionalPlugins,
-			require("postcss-dropunusedvars")({ fix: false }),
+			...(checkUnused ? [require("postcss-dropunusedvars")({
+				fix: false,
+			})] : []),
 			require("postcss-dropdupedvars"),
 			require("postcss-discard-empty"),
 			require("postcss-discard-comments")({ removeAllButFirst: true }),
 			require("autoprefixer")({}),
+			require("postcss-reporter")({
+				clearReportedMessages: true,
+			}),
 		],
 	};
 };

tools/component-builder/package.json

@@ -39,6 +39,7 @@
     "postcss-logical": "^7.0.1",
     "postcss-nested": "^6.0.1",
     "postcss-notnested": "^1.0.0",
+    "postcss-reporter": "^7.1.0",
     "postcss-svg": "^3.0.0",
     "pug": "^3.0.1",
     "replace-ext": "^1.0.0",

tools/component-builder/postcss.config.js

@@ -63,6 +63,9 @@ module.exports = ({
 			require("postcss-discard-empty"),
 			require("postcss-discard-comments")({ removeAllButFirst: true }),
 			require("autoprefixer")({}),
+			require("postcss-reporter")({
+				clearReportedMessages: true,
+			}),
 		],
 	};
 };

yarn.lock

@@ -14539,6 +14539,14 @@ postcss-reporter@^7.0.0:
     picocolors "^1.0.0"
     thenby "^1.3.4"
 
+postcss-reporter@^7.1.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-reporter/-/postcss-reporter-7.1.0.tgz#5ec476d224e2fe25a054e3c66d9b2901d4fab422"
+  integrity sha512-/eoEylGWyy6/DOiMP5lmFRdmDKThqgn7D6hP2dXKJI/0rJSO1ADFNngZfDzxL0YAxFvws+Rtpuji1YIHj4mySA==
+  dependencies:
+    picocolors "^1.0.0"
+    thenby "^1.3.4"
+
 postcss-resolve-nested-selector@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.1.tgz#29ccbc7c37dedfac304e9fff0bf1596b3f6a0e4e"