chore: adds support to parse "transparent" token references

.changeset/curly-jokes-design.md

@@ -0,0 +1,26 @@
+---
+"@spectrum-tools/postcss-rgb-mapping": minor
+---
+
+Adds new functionality to better handle tokens that reference other transparent tokens.
+
+When a custom properties below is defined as another, specifically "transparent," variable, such as:
+
+```css
+--disabled-static-white-background-color: var(--spectrum-transparent-white-100);
+```
+
+...the plugin can now convert this single custom property into its `-rgb` and `-opacity` postfixed variables, that each correspond to the `-rgb` and `-opacity` variables of the definition's transparent token. It then reassembles the original, using and referencing these newly created variables.
+
+```css
+--disabled-static-white-background-color-rgb: var(
+	--spectrum-transparent-white-100-rgb
+);
+--disabled-static-white-background-color-opacity: var(
+	--spectrum-transparent-white-100-opacity
+);
+--disabled-static-white-background-color: rgba(
+	var(--disabled-static-white-background-color-rgb),
+	var(--disabled-static-white-background-color-opacity)
+);
+```

plugins/postcss-rgb-mapping/README.md

@@ -1,6 +1,7 @@
 # postcss-rgb-mapping
 
 > Remaps rgb(a) values to an `rgb` postfixed variable. If an opacity is found, creates a separate `opacity` postfixed variable.
+> Also remaps values that reference a transparent token (for example, `transparent-black-300`) to `rgb` and `opacity` postfixed variables.
 
 ## Installation
 
@@ -11,6 +12,8 @@ postcss -u postcss-rgb-mapping -o dist/index.css src/index.css
 
 ## Usage
 
+### Example 1: RGB and opacity postfixed variables
+
 This plugin turns this:
 
 ```css
@@ -24,13 +27,63 @@ Into this:
 
 ```css
 .spectrum--lightest {
+	/* Both --spectrum-seafoam-100 and --spectrum-seafoam-200 get split into separate
+	"-rgb" and "-opacity" values when applicable. */
 	--spectrum-seafoam-100-rgb: 206, 247, 243;
 	--spectrum-seafoam-100: rgba(var(--spectrum-seafoam-100-rgb));
 	--spectrum-seafoam-200-rgb: 170, 241, 234;
 	--spectrum-seafoam-200-opacity: 0.5;
+	/* The plugin then redefines the original custom variable to use the newly created
+	"-rgb" and/or "-opacity" custom variables. */
 	--spectrum-seafoam-200: rgba(
 		var(--spectrum-seafoam-200-rgb),
 		var(--spectrum-seafoam-200-opacity)
 	);
 }
 ```
+
+### Example 2: Remapping of transparent tokens
+
+This plugin turns this:
+
+```css
+.spectrum--lightest {
+	--spectrum-transparent-white-100-rgb: 100, 100, 100;
+	--spectrum-transparent-white-100-opacity: 0.5;
+	--spectrum-transparent-white-100: rgba(
+		var(--spectrum-transparent-white-100-rgb),
+		var(--spectrum-transparent-white-100-opacity)
+	);
+	/* The custom properties below is defined as another, specifically "transparent," variable. */
+	--disabled-static-white-background-color: var(
+		--spectrum-transparent-white-100
+	);
+}
+```
+
+Into this:
+
+```css
+.spectrum--lightest {
+	--spectrum-transparent-white-100-rgb: 100, 100, 100;
+	--spectrum-transparent-white-100-opacity: 0.5;
+	--spectrum-transparent-white-100: rgba(
+		var(--spectrum-transparent-white-100-rgb),
+		var(--spectrum-transparent-white-100-opacity)
+	);
+	/* In a similar fashion, the plugin creates new "-rgb" and "-opacity" postfixed custom
+	variables, that correspond to the definition's transparent "-rgb" and "-opacity"
+	postfixed custom variables. */
+	--disabled-static-white-background-color-rgb: var(
+		--spectrum-transparent-white-100-rgb
+	);
+	--disabled-static-white-background-color-opacity: var(
+		--spectrum-transparent-white-100-opacity
+	);
+	/* Then reassembles the original to use and reference these newly created variables. */
+	--disabled-static-white-background-color: rgba(
+		var(--disabled-static-white-background-color-rgb),
+		var(--disabled-static-white-background-color-opacity)
+	);
+}
+```

plugins/postcss-rgb-mapping/expected/basic.css

@@ -6,4 +6,10 @@
   --seafoam-200: rgba(var(--seafoam-200-rgb), var(--seafoam-200-opacity));
   --seafoam-300-rgb: 206, 247, 243;
   --seafoam-300: rgba(var(--seafoam-300-rgb));
+  --spectrum-transparent-white-100-rgb: 100, 100, 100;
+  --spectrum-transparent-white-100-opacity: 0.5;
+  --spectrum-transparent-white-100: rgba(var(--spectrum-transparent-white-100-rgb), var(--spectrum-transparent-white-100-opacity));
+  --disabled-static-white-background-color-rgb: var(--spectrum-transparent-white-100-rgb);
+  --disabled-static-white-background-color-opacity: var(--spectrum-transparent-white-100-opacity);
+  --disabled-static-white-background-color: rgba(var(--disabled-static-white-background-color-rgb), var(--disabled-static-white-background-color-opacity));
 }

plugins/postcss-rgb-mapping/expected/modern.css

@@ -6,4 +6,10 @@
   --seafoam-200: rgba(var(--seafoam-200-rgb) / var(--seafoam-200-opacity));
   --seafoam-300-rgb: 206 247 243;
   --seafoam-300: rgba(var(--seafoam-300-rgb));
+  --spectrum-transparent-white-100-rgb: 100 100 100;
+  --spectrum-transparent-white-100-opacity: 50%;
+  --spectrum-transparent-white-100: rgba(var(--spectrum-transparent-white-100-rgb) / var(--spectrum-transparent-white-100-opacity));
+  --disabled-static-white-background-color-rgb: var(--spectrum-transparent-white-100-rgb);
+  --disabled-static-white-background-color-opacity: var(--spectrum-transparent-white-100-opacity);
+  --disabled-static-white-background-color: rgba(var(--disabled-static-white-background-color-rgb) / var(--disabled-static-white-background-color-opacity));
 }

plugins/postcss-rgb-mapping/fixtures/basic.css

@@ -2,4 +2,6 @@
   --seafoam-100: rgba(206, 247, 243);
   --seafoam-200: rgba(206, 247, 243, 0.5);
   --seafoam-300: rgb(206, 247, 243);
+  --spectrum-transparent-white-100: rgba(100, 100, 100, 0.5);
+  --disabled-static-white-background-color: var(--spectrum-transparent-white-100);
 }

plugins/postcss-rgb-mapping/index.js

@@ -23,18 +23,63 @@ const valuesParser = require("postcss-values-parser");
 function rgbMappingFunction ({
 	colorFunctionalNotation = false,
 }) {
+
 	return {
 		postcssPlugin: "postcss-rgb-mapping",
+		/** @type {import('postcss').RootProcessor} */
+		Root(root) {
+			/* Gather all the custom properties that reference "unprocessed" transparent tokens (i.e. transparent-white-200) */
+			const transparentTokens = new Set();
+			root.walkDecls(decl => {
+				if (decl.prop.startsWith('--spectrum-transparent-') && !decl.prop.endsWith('rgb') && !decl.prop.endsWith('opacity')) {
+					transparentTokens.add(decl.prop);
+				}
+			});
+
+			root.walkDecls(decl => {
+				const { prop, value } = decl;
+
+				/* Determine if this property is a custom property */
+				const isCustomProp = prop.startsWith("--");
+
+				/* Determine if this property has already been processed */
+				const isProcessed = prop.endsWith("rgb") || prop.endsWith("opacity");
+
+				/* Check for transparent token reference */
+				const transparentMatch = value.match(/var\((--spectrum-transparent-[^\s)]+)\)/);
+				if (isCustomProp && !isProcessed && transparentMatch) {
+					const referencedToken = transparentMatch[1];
+
+					if (transparentTokens.has(referencedToken)) {
+						/* Create the new RGB and opacity properties */
+						decl.cloneBefore({
+							prop: `${prop}-rgb`,
+							value: `var(${referencedToken}-rgb)`
+						});
+						decl.cloneBefore({
+							prop: `${prop}-opacity`,
+							value: `var(${referencedToken}-opacity)`
+						});
+
+						/* Update the original declaration */
+						decl.value = `rgba(var(${prop}-rgb)${colorFunctionalNotation ? " / " : ", "}var(${prop}-opacity))`;
+					}
+				}
+				return;
+			});
+		},
+
 		/** @type {import('postcss').DeclarationProcessor} */
 		Declaration(decl, { Warning }) {
 			const { prop, value } = decl;
 
 			/* Determine if this property is a custom property */
 			const isCustomProp = prop.startsWith("--");
+
 			/* Determine if this property has already been processed */
 			const isProcessed = prop.endsWith("rgb") || prop.endsWith("opacity");
 
-			/* Parse the value for it's parts */
+			/* Parse the value for its parts */
 			const parsedValue = valuesParser.parse(value) || [];
 
 			/* Determine if the value has an rgb or rgba value */
@@ -114,7 +159,6 @@ function rgbMappingFunction ({
 			decl.assign({
 				value: `rgba(var(${prop}-rgb)${a ? `${colorFunctionalNotation ? " /" : ","} var(${prop}-opacity)` : ""})`,
 			});
-
 			return;
 		},
 	};