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

adobe · Feb 5, 2024 · 80697ba · 80697ba
1 parent 57fbd48
commit 80697ba
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 18 deletions.
diff --git a/.storybook/package.json b/.storybook/package.json
@@ -47,6 +47,7 @@
     "lodash-es": "^4.17.21",
     "postcss": "^8.4.33",
     "postcss-class-prefix": "^0.3.0",
+    "postcss-load-config": "^5.0.2",
     "postcss-loader": "^4.0.0",
     "postcss-prefix-selector": "^1.16.0",
     "postcss-selector-replace": "^1.0.2",

diff --git a/plugins/postcss-dropunusedvars/index.js b/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,
 						});

diff --git a/tools/component-builder-simple/css/index.js b/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")
 		],

diff --git a/tools/component-builder-simple/postcss.config.js b/tools/component-builder-simple/postcss.config.js
@@ -30,6 +30,7 @@ module.exports = ({
 		noFlatVariables: false,
 	},
 	varsOnly = false,
+	checkUnused = true,
 	additionalPlugins = [],
 	...options
 } = {}) => {
@@ -76,11 +77,16 @@ module.exports = ({
 			require("postcss-hover-media-feature"),
 			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,
+			}),
 		],
 	};
 };
diff --git a/tools/component-builder/css/index.js b/tools/component-builder/css/index.js
@@ -163,13 +163,6 @@ function bakeVars() {
 				// Find all custom properties used in the component
 				const variableList = getVarsFromCSS(file.contents);
 
-				// Get vars in ALL components
-				const vars = await getAllVars([
-					`${varDir}/css/components/*.css`,
-					`${varDir}/css/globals/*.css`,
-					`${varDir}/custom.css`,
-				]);
-
 				// Get literally all of the possible vars (even overridden vars that are different between themes/scales)
 				const allVars = await getAllVars([
 					`${varDir}/css/themes/*.css`,
@@ -182,14 +175,15 @@ function bakeVars() {
 
 				// For each color stop and scale, filter the variables for those matching the component
 				const usedVars = variableList.reduce((usedVars, varName) => {
-					if (varName.includes("spectrum-global")) return;
-					if (
-						!allVars[varName] &&
-						!varName.startsWith("--mod") &&
-						!varName.startsWith("--highcontrast")
-					) return usedVars;
-
-					usedVars[varName] = vars[varName];
+					// Return if the varName is null/undefined or there is no value found in allVars
+					if (!varName || !allVars[varName]) return usedVars;
+
+					// Check if the variable name matches any of the provided regular expressions
+					if ([/^--mod/, /^--highcontrast/, /spectrum-global/].some(regex => regex.test(varName))) {
+						return usedVars;
+					}
+
+					usedVars[varName] = allVars[varName];
 					return usedVars;
 				}, {});
 

diff --git a/tools/component-builder/postcss.config.js b/tools/component-builder/postcss.config.js
@@ -64,6 +64,9 @@ module.exports = ({
 			require("postcss-discard-empty"),
 			require("postcss-discard-comments")({ removeAllButFirst: true }),
 			require("autoprefixer")({}),
+			require("postcss-reporter")({
+				clearReportedMessages: true,
+			}),
 		],
 	};
 };