feat(bundle): bundled css for dev/demos (#3477)

Resurrecting the CSS bundle for development use. Excellent resource for generating quick demo pages by loading all the CSS components in the library in a pre-bundled package with tokens pre-loaded and minified to remove unused tokens.

Author: castastrophe

.changeset/honest-bulldogs-flow.md

@@ -0,0 +1,5 @@
+---
+"@spectrum-css/preview": minor
+---
+
+Update Storybook to leverage the new CSS bundled assets.

.changeset/stupid-rice-compare.md

@@ -0,0 +1,5 @@
+---
+"@spectrum-css/bundle": major
+---
+
+Resurrecting the CSS bundle for development use. Excellent resource for generating quick demo pages by loading all the CSS components in the library in a pre-bundled package with tokens pre-loaded and minified to remove unused tokens.

.storybook/blocks/ComponentDetails.jsx

@@ -2,12 +2,14 @@ import { useOf } from '@storybook/blocks';
 import { ResetWrapper } from "@storybook/components";
 import { styled } from "@storybook/theming";
 import React, { useEffect, useState } from "react";
+
+import { Body, Code, Heading } from "./Typography.jsx";
+import { fetchToken } from "./utilities.js";
+
 import AdobeSVG from "../assets/images/adobe_logo.svg?raw";
 import GitHubSVG from "../assets/images/github_logo.svg?raw";
 import NpmSVG from "../assets/images/npm_logo.svg?raw";
 import WCSVG from "../assets/images/wc_logo.svg?raw";
-import { Body, Code, Heading } from "./Typography.jsx";
-import { fetchToken } from "./utilities.js";
 
 export const DList = styled.dl`
 	display: grid;

.storybook/blocks/PropertiesTable.jsx

@@ -1,9 +1,8 @@
-import "@spectrum-css/table/dist/index.css";
-
 import { DocsContext, useOf } from "@storybook/blocks";
 import { NAVIGATE_URL } from "@storybook/core-events";
 import { styled } from "@storybook/theming";
 import React, { useContext } from 'react';
+
 import { ThemeContainer } from "./ThemeContainer.jsx";
 import { Body, Code, LinkableHeading } from "./Typography.jsx";
 

.storybook/blocks/utilities.js

@@ -14,30 +14,30 @@ import { useTheme } from "@storybook/theming";
  * @returns {string|void} - The value of the token
  */
 function parseData(data, { key, color, platform }) {
-    // If nothing exists for that key, report that the key is missing
-    if (!data) {
-        console.log(`⚠️ Token ${key} can't be found in the spectrum token data`);
-        return;
-    }
+	// If nothing exists for that key, report that the key is missing
+	if (!data) {
+		console.log(`⚠️ Token ${key} can't be found in the spectrum token data`);
+		return;
+	}
 
-    // Check if the key has a value
-    if (data.value) return data.value;
+	// Check if the key has a value
+	if (data.value) return data.value;
 
-    if (Object.keys(data.sets).length === 0) {
-        console.log(`⚠️ Token ${key} has no value or sets`);
-        return;
-    }
+	if (Object.keys(data.sets).length === 0) {
+		console.log(`⚠️ Token ${key} has no value or sets`);
+		return;
+	}
 
-    // Check if one of the contexts is a key in the sets
-    if (color in data.sets) {
-        return parseData(data.sets[color], { key, color, platform });
-    }
+	// Check if one of the contexts is a key in the sets
+	if (color in data.sets) {
+		return parseData(data.sets[color], { key, color, platform });
+	}
 
-    if (platform in data.sets) {
-        return parseData(data.sets[platform], { key, color, platform });
-    }
+	if (platform in data.sets) {
+		return parseData(data.sets[platform], { key, color, platform });
+	}
 
-    return;
+	return;
 }
 
 /**
@@ -49,23 +49,25 @@ function parseData(data, { key, color, platform }) {
  * @returns {string|undefined} - The value of the token or a fallback value
  */
 export function fetchToken(key, fallback = undefined, { color, scale } = {}) {
-    if (typeof key !== "string") return fallback;
+	if (typeof key !== "string") return fallback;
 
-    // Fetch the theme if it exists; this data exists if wrapped in a ThemeProvider
+	// Fetch the theme if it exists; this data exists if wrapped in a ThemeProvider
 	const theme = useTheme() ?? {};
 
-    // If the color or scale is not provided, use the theme values or a fallback
-    if (typeof color !== "string" && typeof theme.color == "string") color = theme.color;
-    else if (!color) color = "light";
+	// If the color or scale is not provided, use the theme values or a fallback
+	if (typeof color !== "string" && typeof theme.color == "string")
+		color = theme.color;
+	else if (!color) color = "light";
 
-    if (typeof scale !== "string" && typeof theme.scale == "string") scale = theme.scale;
-    else if (!scale) scale = "medium";
+	if (typeof scale !== "string" && typeof theme.scale == "string")
+		scale = theme.scale;
+	else if (!scale) scale = "medium";
 
-    // Create a platform context based on the scale (platform used in the token data)
-    const platform = scale === "medium" ? "desktop" : "mobile";
+	// Create a platform context based on the scale (platform used in the token data)
+	const platform = scale === "medium" ? "desktop" : "mobile";
 
-    // Check if the spectrum data is available
-    if (!spectrum || typeof spectrum !== "object") return fallback;
+	// Check if the spectrum data is available
+	if (!spectrum || typeof spectrum !== "object") return fallback;
 
-    return parseData(spectrum[key], { color, platform }) ?? fallback;
+	return parseData(spectrum[key], { color, platform }) ?? fallback;
 }

.storybook/manager.js

@@ -1,7 +1,12 @@
 import "@spectrum-css/tokens/dist/index.css";
 import { addons } from "@storybook/manager-api";
 import { create } from "@storybook/theming";
+
+// Import the CSS bundle
+import "@spectrum-css/bundle/dist/index.min.css";
+
 import "./assets/index.css";
+
 import logo from "./assets/logo.svg";
 import pkg from "./package.json";
 

.storybook/package.json

@@ -29,9 +29,8 @@
 	},
 	"dependencies": {
 		"@adobe/spectrum-css-workflow-icons": "^1.5.4",
-		"@spectrum-css/table": "workspace:^",
+		"@spectrum-css/bundle": "workspace:^",
 		"@spectrum-css/tokens": "workspace:^",
-		"@spectrum-css/typography": "workspace:^",
 		"@spectrum-css/ui-icons": "workspace:^"
 	},
 	"devDependencies": {

.storybook/preview.js

@@ -20,6 +20,10 @@ import {
 	globalTypes
 } from "./types";
 
+// Load the Spectrum CSS bundle to style the docs elements
+import "@spectrum-css/bundle/dist/index.min.css";
+
+// Import the custom base styles
 import "./assets/base.css";
 
 window.global = window;

.storybook/project.json

@@ -11,7 +11,7 @@
 			"{projectRoot}/modes",
 			"{projectRoot}/templates",
 			"{projectRoot}/types",
-			"{projectRoot}/*.{js,html,mdx}"
+			"{projectRoot}/*.{js,html}"
 		]
 	},
 	"targets": {

.stylelintignore

@@ -6,6 +6,7 @@ generator
 dist
 .storybook/storybook-static
 *-generated.css
+tools/bundle/src/*.css
 
 node_modules/**/*.css