build: postcss plugin updates and fixes (#3502)

Author: castastrophe

.changeset/cuddly-dragons-yell.md

@@ -0,0 +1,8 @@
+---
+"@spectrum-tools/stylelint-no-unknown-custom-properties": patch
+"@spectrum-tools/stylelint-no-unused-custom-properties": patch
+---
+
+Update package dependencies.
+
+Specific to `stylelint-no-unknown-custom-properties`, the assumption that only CSS files will be parsed is removed to allow support for JSON assets as well. Additionally, this package will now evaluate dependencies beyond just `@spectrum-css`.

.changeset/cuddly-ravens-repair.md

@@ -0,0 +1,5 @@
+---
+"@spectrum-tools/postcss-add-theming-layer": major
+---
+
+The PostCSS plugin previously published as `postcss-splitinator`. This new package creates a polyfill for style queries by creating a layer of `--system` prefixed custom properties to be loaded by attaching a unique selector. This allows the toggling of component-level property definitions by theme or context. There are many options available to customize the output that are documented in the package [README](plugins/postcss-add-theming-layer/README.md).

.changeset/large-ways-happen.md

@@ -0,0 +1,5 @@
+---
+"@spectrum-tools/stylelint-theme-alignment": minor
+---
+
+Fixes a bug where the source file is expected to be "spectrum-two" instead of "spectrum".

.changeset/rotten-cars-ring.md

@@ -0,0 +1,63 @@
+---
+"@spectrum-css/floatingactionbutton": major
+"@spectrum-css/opacitycheckerboard": major
+"@spectrum-css/illustratedmessage": major
+"@spectrum-css/coachindicator": major
+"@spectrum-css/contextualhelp": major
+"@spectrum-css/progresscircle": major
+"@spectrum-css/dropindicator": major
+"@spectrum-css/alertdialog": major
+"@spectrum-css/buttongroup": major
+"@spectrum-css/colorhandle": major
+"@spectrum-css/colorslider": major
+"@spectrum-css/inlinealert": major
+"@spectrum-css/logicbutton": major
+"@spectrum-css/progressbar": major
+"@spectrum-css/statuslight": major
+"@spectrum-css/swatchgroup": major
+"@spectrum-css/breadcrumb": major
+"@spectrum-css/colorloupe": major
+"@spectrum-css/colorwheel": major
+"@spectrum-css/fieldgroup": major
+"@spectrum-css/fieldlabel": major
+"@spectrum-css/pagination": major
+"@spectrum-css/typography": major
+"@spectrum-css/accordion": major
+"@spectrum-css/actionbar": major
+"@spectrum-css/assetlist": major
+"@spectrum-css/coachmark": major
+"@spectrum-css/colorarea": major
+"@spectrum-css/splitview": major
+"@spectrum-css/thumbnail": major
+"@spectrum-css/calendar": major
+"@spectrum-css/dropzone": major
+"@spectrum-css/helptext": major
+"@spectrum-css/steplist": major
+"@spectrum-css/taggroup": major
+"@spectrum-css/treeview": major
+"@spectrum-css/underlay": major
+"@spectrum-css/divider": major
+"@spectrum-css/sidenav": major
+"@spectrum-css/avatar": major
+"@spectrum-css/dialog": major
+"@spectrum-css/miller": major
+"@spectrum-css/swatch": major
+"@spectrum-css/asset": major
+"@spectrum-css/badge": major
+"@spectrum-css/modal": major
+"@spectrum-css/table": major
+"@spectrum-css/card": major
+"@spectrum-css/dial": major
+"@spectrum-css/icon": major
+"@spectrum-css/link": major
+"@spectrum-css/menu": major
+"@spectrum-css/tray": major
+"@spectrum-css/well": major
+---
+
+Remove empty theme references to reduce complexity for components that don't need to define any mappings. This involves removing the source `themes` directories with the empty `spectrum.css` and `express.com` files as well as removing the following empty or unnecessary exports:
+
+- `index-base.css`
+- `index-theme.css`
+- `themes/spectrum.css`
+- `themes/express.css`

.changeset/sixty-cats-taste.md

@@ -0,0 +1,5 @@
+---
+"@spectrum-tools/postcss-rgb-mapping": major
+---
+
+Migrated the `postcss-rgb-mapping` package into the new `@spectrum-tools` namespace so updates may shipped and shared among other projects.

.changeset/tame-hairs-grow.md

@@ -0,0 +1,29 @@
+---
+"@spectrum-css/infieldbutton": minor
+"@spectrum-css/actionbutton": minor
+"@spectrum-css/pickerbutton": minor
+"@spectrum-css/actiongroup": minor
+"@spectrum-css/alertbanner": minor
+"@spectrum-css/clearbutton": minor
+"@spectrum-css/closebutton": minor
+"@spectrum-css/datepicker": minor
+"@spectrum-css/assetcard": minor
+"@spectrum-css/textfield": minor
+"@spectrum-css/checkbox": minor
+"@spectrum-css/combobox": minor
+"@spectrum-css/popover": minor
+"@spectrum-css/stepper": minor
+"@spectrum-css/tooltip": minor
+"@spectrum-css/button": minor
+"@spectrum-css/picker": minor
+"@spectrum-css/rating": minor
+"@spectrum-css/search": minor
+"@spectrum-css/slider": minor
+"@spectrum-css/switch": minor
+"@spectrum-css/radio": minor
+"@spectrum-css/toast": minor
+"@spectrum-css/tabs": minor
+"@spectrum-css/tag": minor
+---
+
+Simplify how the `--system` properties are mapped. By updating the logic in the `postcss-add-theming-layer`, we are now shipping cleaner, more readable `--system` property names. These custom properties are documented as _NOT_ a part of the component API so although these result in a change to the custom property names, it does not impact the properties that are in the API and so do not constitute a breaking change. Expect to see no change to how component theming works or any visual regressions as a result of this change.

.storybook/guides/develop.mdx

@@ -40,7 +40,7 @@ Each component has the following files:
 
 Each component outputs the following assets to `dist`:
 
-- `index.css`: This asset includes the base CSS and the `themes/spectrum-two.css` definitions (without the system mapping layer). This asset is meant to be used in a environment where only the current Spectrum theme is supported.
+- `index.css`: This asset includes the base CSS and the `themes/spectrum.css` definitions (without the system mapping layer). This asset is meant to be used in a environment where only the current Spectrum theme is supported.
 - `index-base.css`: This asset includes only the base CSS; that is, the CSS without any custom property definitions. This can be used in conjunction with `index-theme.css` and the desired `themes/*.css` file to render a themed component.
 - `index-theme.css`: This asset includes only the custom property definitions for the component as mapped to the system variables. This can be used in conjunction with `index-base.css` and the desired `themes/*.css` file to render a themed component.
 
@@ -54,7 +54,7 @@ Each component outputs theme-specific assets to `dist/themes`. These assets incl
 1. Generate a new component using the `yarn new component` command. The generator will prompt you to answer questions about your component.
 2. Edit the `dependencies` within the `package.json` file to use only the dependencies your component needs. All components rely on `@spectrum-css/tokens`, and most rely on `@spectrum-css/icon`.
 3. Once your folder has been generated, you can run `yarn start` in the root of the project to begin developing.
-4. The `index.css` file is where most of your styles will be added. Add any custom property mappings to the global token library in the `themes/spectrum-two.css` asset.
+4. The `index.css` file is where most of your styles will be added. Add any custom property mappings to the global token library in the `themes/spectrum.css` asset.
 5. Inside the `stories` directory you will find a `template.js`, `*.stories.js`, and `*.mdx` file.
    - In the `*.stories.js` file, define the available knobs and properties for your component, as well as any standard variations you want to surface in [Storybook](https://storybook.js.org/docs/react/writing-stories/introduction).
    - Update the `template.js` file with the markup, using [lit-html syntax](https://lit.dev/docs/templates/overview/) to adjust results based on the provided settings from the Storybook knobs.
@@ -175,28 +175,28 @@ To import shared types into your story, use the following syntax:
 
 ```js
 import {
-  isActive,
-  isDisabled,
-  isFocused,
-  isHovered,
-  isSelected,
+	isActive,
+	isDisabled,
+	isFocused,
+	isHovered,
+	isSelected,
 } from "@spectrum-css/preview/types";
 
 export default {
-  argTypes: {
-    isDisabled,
-    isSelected,
-    isHovered,
-    isFocused,
-    isActive,
-  },
-  args: {
-    isDisabled: false,
-    isSelected: false,
-    isHovered: false,
-    isFocused: false,
-    isActive: false,
-  },
+	argTypes: {
+		isDisabled,
+		isSelected,
+		isHovered,
+		isFocused,
+		isActive,
+	},
+	args: {
+		isDisabled: false,
+		isSelected: false,
+		isHovered: false,
+		isFocused: false,
+		isActive: false,
+	},
 };
 ```
 
@@ -348,80 +348,80 @@ import "../themes/express.css";
 import "../themes/spectrum.css";
 
 export const Template = (
-  {
-    rootClass = "spectrum-Tag",
-    size = "m",
-    iconName,
-    avatarUrl,
-    label,
-    isSelected = false,
-    isEmphasized = false,
-    isDisabled = false,
-    isInvalid = false,
-    hasClearButton = false,
-    id,
-    customClasses = [],
-    customStyles = {},
-  },
-  context,
+	{
+		rootClass = "spectrum-Tag",
+		size = "m",
+		iconName,
+		avatarUrl,
+		label,
+		isSelected = false,
+		isEmphasized = false,
+		isDisabled = false,
+		isInvalid = false,
+		hasClearButton = false,
+		id,
+		customClasses = [],
+		customStyles = {},
+	},
+	context,
 ) => {
-  return html`
-    <div
-      class=${classMap({
-        [rootClass]: true,
-        [`${rootClass}--size${size?.toUpperCase()}`]:
-          typeof size !== "undefined",
-        "is-emphasized": isEmphasized,
-        "is-disabled": isDisabled,
-        "is-invalid": isInvalid,
-        "is-selected": isSelected,
-        ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
-      })}
-      style=${styleMap(customStyles)}
-      id=${ifDefined(id)}
-      tabindex="0"
-    >
-      ${when(avatarUrl && !iconName, () =>
-        Avatar(
-          {
-            image: avatarUrl,
-            size: "50",
-          },
-          context,
-        ),
-      )}
-      ${when(iconName, () =>
-        Icon(
-          {
-            iconName,
-            customClasses: [`${rootClass}s-itemIcon`],
-          },
-          context,
-        ),
-      )}
-      <span
-        class=${classMap({
-          [`${rootClass}s-itemLabel`]: true,
-        })}
-        >${label}</span
-      >
-      ${when(hasClearButton, () =>
-        ClearButton(
-          {
-            customClasses: [`${rootClass}-clearButton`],
-            onclick: (evt) => {
-              const el = evt.target;
-              if (!el) return;
-
-              const wrapper = el.closest(rootClass);
-              wrapper.parentNode.removeChild(wrapper);
-            },
-          },
-          context,
-        ),
-      )}
-    </div>
-  `;
+	return html`
+		<div
+			class=${classMap({
+				[rootClass]: true,
+				[`${rootClass}--size${size?.toUpperCase()}`]:
+					typeof size !== "undefined",
+				"is-emphasized": isEmphasized,
+				"is-disabled": isDisabled,
+				"is-invalid": isInvalid,
+				"is-selected": isSelected,
+				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
+			})}
+			style=${styleMap(customStyles)}
+			id=${ifDefined(id)}
+			tabindex="0"
+		>
+			${when(avatarUrl && !iconName, () =>
+				Avatar(
+					{
+						image: avatarUrl,
+						size: "50",
+					},
+					context,
+				),
+			)}
+			${when(iconName, () =>
+				Icon(
+					{
+						iconName,
+						customClasses: [`${rootClass}s-itemIcon`],
+					},
+					context,
+				),
+			)}
+			<span
+				class=${classMap({
+					[`${rootClass}s-itemLabel`]: true,
+				})}
+				>${label}</span
+			>
+			${when(hasClearButton, () =>
+				ClearButton(
+					{
+						customClasses: [`${rootClass}-clearButton`],
+						onclick: (evt) => {
+							const el = evt.target;
+							if (!el) return;
+
+							const wrapper = el.closest(rootClass);
+							wrapper.parentNode.removeChild(wrapper);
+						},
+					},
+					context,
+				),
+			)}
+		</div>
+	`;
 };
 ```
 
@@ -438,24 +438,24 @@ import { Variants } from "@spectrum-css/preview/decorators";
 import { Template } from "./template.js";
 
 export const AccordionGroup = Variants({
-  Template,
-  testData: [
-    {
-      testHeading: "Standard",
-    },
-    {
-      testHeading: "Compact",
-      density: "compact",
-      collapseAll: true,
-      withStates: false,
-    },
-  ],
-  stateData: [
-    {
-      testHeading: "Disabled",
-      disableAll: true,
-    },
-  ],
+	Template,
+	testData: [
+		{
+			testHeading: "Standard",
+		},
+		{
+			testHeading: "Compact",
+			density: "compact",
+			collapseAll: true,
+			withStates: false,
+		},
+	],
+	stateData: [
+		{
+			testHeading: "Disabled",
+			disableAll: true,
+		},
+	],
 });
 ```
 
@@ -474,7 +474,7 @@ In the event that you don't want a story to be tested in Chromatic, you can use
 
 ```js
 Default.parameters = {
-  chromatic: { disableSnapshot: true },
+	chromatic: { disableSnapshot: true },
 };
 ```