build(component-builder): legacy builder clean-up unused plugins

Author: castastrophe

.storybook/main.js

@@ -132,9 +132,7 @@ module.exports = {
 								loader: "postcss-loader",
 								options: {
 									implementation: require("postcss"),
-									postcssOptions: {
-										config: resolve(__dirname, "postcss.config.js"),
-									},
+									sourceMap: true,
 								},
 							},
 						],
@@ -154,21 +152,13 @@ module.exports = {
 	},
 	framework: {
 		name: "@storybook/web-components-webpack5",
-		options: {},
 	},
 	features: {
 		/* Code splitting flag; load stories on-demand */
 		storyStoreV7: true,
 		/* Builds stories.json to help with on-demand loading */
 		buildStoriesJson: true,
 	},
-	// refs: {
-	//   'swc': {
-	//     title: 'Spectrum Web Components',
-	//     url: 'https://opensource.adobe.com/spectrum-web-components/storybook/',
-	//     expanded: false,
-	//   },
-	// },
 	docs: {
 		autodocs: true, // see below for alternatives
 		defaultName: "Docs", // set to change the name of generated docs entries

.storybook/package.json

@@ -22,6 +22,7 @@
     "@chromaui/addon-visual-tests": "^0.0.124",
     "@etchteam/storybook-addon-status": "^4.2.4",
     "@spectrum-css/component-builder": "^4.0.19",
+    "@spectrum-css/component-builder-simple": "^3.0.2",
     "@storybook/addon-a11y": "^7.5.1",
     "@storybook/addon-actions": "^7.5.1",
     "@storybook/addon-console": "^1.2.3",
@@ -44,9 +45,9 @@
     "file-loader": "6.2.0",
     "lit": "^2.8.0",
     "lodash-es": "^4.17.21",
-    "postcss": "^7.0.36",
+    "postcss": "^8.4.32",
     "postcss-class-prefix": "^0.3.0",
-    "postcss-loader": "^4.0.0",
+    "postcss-loader": "^7.3.0",
     "postcss-prefix-selector": "^1.16.0",
     "postcss-selector-replace": "^1.0.2",
     "postcss-warn-cleaner": "^0.1.9",

.storybook/postcss.config.js

@@ -2,8 +2,8 @@ const { resolve, basename } = require("path");
 const { existsSync } = require("fs");
 const warnCleaner = require("postcss-warn-cleaner");
 
-const simpleBuilder = require("@spectrum-css/component-builder-simple/css/processors.js");
-const legacyBuilder = require("@spectrum-css/component-builder/css/processors.js");
+const simpleBuilder = require("@spectrum-css/component-builder-simple/css/postcss.plugins.js");
+const legacyBuilder = require("@spectrum-css/component-builder/css/postcss.plugins.js");
 
 /**
  * Determines the package name from a file path
@@ -76,12 +76,12 @@ module.exports = (ctx) => {
 		if (
 			deps.includes("@spectrum-css/vars")
 		) {
-			plugins.push(...legacyBuilder.processors);
+			plugins.push(...legacyBuilder.plugins);
 		} else {
 			if (ctx.file.split("/").includes("themes")) {
-				plugins.push(...simpleBuilder.getProcessors({ noSelectors: false }));
+				plugins.push(...simpleBuilder.getPlugins({ noSelectors: false }));
 			} else {
-				plugins.push(...simpleBuilder.getProcessors());
+				plugins.push(...simpleBuilder.plugins);
 			}
 		}
 	}

.storybook/preview.js

@@ -220,7 +220,7 @@ export const parameters = {
     	page: DocumentationTemplate,
 		story: {
 			inline: true,
-			iframeHeight: "200px",
+			height: "200px",
 		},
 		source: {
 			type: "dynamic",
@@ -230,10 +230,20 @@ export const parameters = {
 	status: {
 		statuses: {
 			migrated: {
-				background: "#f0f0f0",
-				color: "#444",
+				background: "rgb(0,122,77)",
+				color: "#fff",
 				description: "Migrated to the latest tokens.",
 			},
+			legacy: {
+				background: "rgb(246,133,17)",
+				color: "#fff",
+				description: "Not yet migrated to the latest tokens.",
+			},
+			deprecated: {
+				background: "rgb(211,21,16)",
+				color: "#fff",
+				description: "Should not be used and will not receive updates.",
+			},
 		},
 	},
 };

components/accordion/gulpfile.js renamed to components/accordion/index.js

@@ -33,3 +33,16 @@ governing permissions and limitations under the License.
   max-inline-size: var(--spectrum-asset-icon-max-width);
   margin: var(--spectrum-asset-icon-margin);
 }
+
+.spectrum-Asset-folderBackground {
+  fill: var(--spectrum-asset-folder-background-color);
+}
+
+.spectrum-Asset-fileBackground {
+  fill: var(--spectrum-asset-file-background-color);
+}
+
+.spectrum-Asset-folderOutline,
+.spectrum-Asset-fileOutline {
+  fill: var(--spectrum-asset-icon-outline-color);
+}

components/actionbar/gulpfile.js renamed to components/actionbar/index.js

@@ -0,0 +1 @@
+module.exports = require("@spectrum-css/component-builder/postcss.config.js");

components/actionbutton/gulpfile.js renamed to components/actionbutton/index.js

@@ -3,7 +3,6 @@ import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 
 import "../index.css";
-import "../skin.css";
 
 export const Template = ({
 	rootClass = "spectrum-Asset",

components/actiongroup/gulpfile.js renamed to components/actiongroup/index.js

@@ -11,9 +11,13 @@ governing permissions and limitations under the License.
 */
 
 .spectrum-CycleButton {
+  --spectrum-actionbutton-m-icononly-padding-left: var(--spectrum-global-dimension-size-85);
+  --spectrum-actionbutton-m-icononly-padding-right: var(--spectrum-global-dimension-size-85);
+
   /* Be square */
   padding-block: 0;
   padding-inline: var(--spectrum-actionbutton-m-icononly-padding-left) var(--spectrum-actionbutton-m-icononly-padding-right);
+
   .spectrum-CycleButton-item:not(.is-selected) {
     display: none
   }

components/actionmenu/gulpfile.js renamed to components/actionmenu/index.js

@@ -0,0 +1 @@
+module.exports = require("@spectrum-css/component-builder/postcss.config.js");

components/alertbanner/gulpfile.js renamed to components/alertbanner/index.js

@@ -12,6 +12,17 @@ governing permissions and limitations under the License.
 
 .spectrum-Icon,
 .spectrum-UIIcon {
+  --spectrum-alias-workflow-icon-size-s: var(--spectrum-global-dimension-size-200);
+  --spectrum-alias-workflow-icon-size-m: var(--spectrum-global-dimension-size-225);
+  --spectrum-alias-workflow-icon-size-xl: var(--spectrum-global-dimension-size-275);
+  --spectrum-alias-ui-icon-triplegripper-size-100-height: var(--spectrum-global-dimension-size-100);
+  --spectrum-alias-ui-icon-doublegripper-size-100-width: var(--spectrum-global-dimension-size-200);
+  --spectrum-alias-ui-icon-singlegripper-size-100-width: var(--spectrum-global-dimension-size-300);
+  --spectrum-alias-ui-icon-cornertriangle-size-75: var(--spectrum-global-dimension-size-65);
+  --spectrum-alias-ui-icon-cornertriangle-size-200: var(--spectrum-global-dimension-size-75);
+  --spectrum-alias-ui-icon-asterisk-size-75: var(--spectrum-global-dimension-static-size-100);
+  --spectrum-alias-ui-icon-asterisk-size-100: var(--spectrum-global-dimension-size-100);
+
   display: inline-block;
 
   /* Use custom pass through or inherit the text color */
@@ -28,6 +39,7 @@ governing permissions and limitations under the License.
   /* Don't catch clicks or hover, otherwise they may not escape the SVG */
   pointer-events: none;
 }
+
 @media (forced-colors: active) {
   .spectrum-Icon,
   .spectrum-UIIcon {

components/alertdialog/gulpfile.js renamed to components/alertdialog/index.js

@@ -0,0 +1 @@
+module.exports = require("@spectrum-css/component-builder/postcss.config.js");

components/asset/index.css

@@ -16,6 +16,7 @@ governing permissions and limitations under the License.
   .spectrum-UIIcon--large {
     display: none;
   }
+
   .spectrum-UIIcon--medium {
     display: inline;
   }
@@ -25,26 +26,29 @@ governing permissions and limitations under the License.
   .spectrum-UIIcon--medium {
     display: none;
   }
+
   .spectrum-UIIcon--large {
     display: inline;
   }
 }
 
 /* Hide UI icons on browsers that implement SVG 2 correctly (Firefox 56+) */
 .spectrum--large {
-  x--ui-icon-large-display: block;
-  x--ui-icon-medium-display: none;
+  --ui-icon-large-display: block;
+  --ui-icon-medium-display: none;
 }
+
 .spectrum--medium {
-  x--ui-icon-medium-display: block;
-  x--ui-icon-large-display: none;
+  --ui-icon-medium-display: block;
+  --ui-icon-large-display: none;
 }
 
 .spectrum-UIIcon--large {
-  display: xvar(--ui-icon-large-display);
+  display: var(--ui-icon-large-display);
 }
+
 .spectrum-UIIcon--medium {
-  display: xvar(--ui-icon-medium-display);
+  display: var(--ui-icon-medium-display);
 }
 
 %spectrum-UIIcon--rotation90 {