build: allow empty theme assets during build step (#2407)

Author: castastrophe

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

@@ -22,7 +22,9 @@ function buildCSS() {
 			"index.css",
 			"themes/spectrum.css", // spectrum comes first
 			"themes/*.css",
-		])
+		], {
+			allowEmpty: true,
+		})
 		.pipe(concat("index.css"))
 		.pipe(
 			postcss(processors, {
@@ -38,7 +40,9 @@ function buildCSSWithoutThemes() {
 			"index.css",
 			"themes/spectrum.css", // spectrum comes first
 			"themes/*.css",
-		])
+		], {
+			allowEmpty: true,
+		})
 		.pipe(concat("index-base.css"))
 		.pipe(
 			postcss(processorsFunction({ noFlatVariables: true }), {
@@ -53,15 +57,19 @@ function buildCSSThemeIndex() {
 		.src([
 			"themes/spectrum.css", // spectrum comes first
 			"themes/*.css",
-		])
+		], {
+			allowEmpty: true,
+		})
 		.pipe(concat("index-theme.css"))
 		.pipe(postcss(processorsFunction({ noSelectors: true })))
 		.pipe(gulp.dest("dist/"));
 }
 
 function buildCSSThemes() {
 	return gulp
-		.src(["themes/*.css"])
+		.src(["themes/*.css"], {
+			allowEmpty: true,
+		})
 		.pipe(postcss(processorsFunction({ noSelectors: true })))
 		.pipe(gulp.dest("dist/themes/"));
 }
@@ -71,7 +79,9 @@ function buildCSSThemes() {
 */
 function buildExpressTheme() {
 	return gulp
-		.src(["dist/index-theme.css"])
+		.src(["dist/index-theme.css"], {
+			allowEmpty: true,
+		})
 		.pipe(concat("express.css"))
 		.pipe(postcss(processorsFunction().concat(require("postcss-combininator"))))
 		.pipe(gulp.dest("dist/themes/"));

tools/component-builder/css/lib/varUtils.js

@@ -169,7 +169,9 @@ function getAllVars() {
 				`${varDir}/css/globals/*.css`,
 				`${varDir}/custom.css`,
 				coreTokensFile,
-			])
+			], {
+				allowEmpty: true,
+			})
 			.pipe(concat("everything.css"))
 			.pipe(
 				through.obj(function getAllVars(file, enc, cb) {
@@ -194,7 +196,9 @@ function getAllComponentVars() {
 				`${varDir}/css/components/*.css`,
 				`${varDir}/css/globals/*.css`,
 				`${varDir}/custom.css`,
-			])
+			], {
+				allowEmpty: true,
+			})
 			.pipe(concat("everything.css"))
 			.pipe(
 				through.obj(function getAllVars(file, enc, cb) {

tools/component-builder/css/vars.js

@@ -12,18 +12,12 @@ governing permissions and limitations under the License.
 
 const gulp = require("gulp");
 const through = require("through2");
-const postcss = require("postcss");
 const logger = require("gulplog");
 const fsp = require("fs").promises;
 const path = require("path");
 
 const varUtils = require("./lib/varUtils");
 
-// Todo: get these values from a common place?
-let colorStops = ["darkest", "dark", "light", "lightest"];
-
-let scales = ["medium", "large"];
-
 function bakeVars() {
 	return gulp
 		.src(["dist/index-vars.css"], {