Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: adds support to parse "transparent" token references #3452

Open
wants to merge 8 commits into
base: main
Choose a base branch
from
26 changes: 26 additions & 0 deletions plugins/postcss-rgb-mapping/README.md
Original file line number Diff line number Diff line change
@@ -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

Expand All @@ -17,6 +18,15 @@ This plugin turns this:
.spectrum--lightest {
--spectrum-seafoam-100: rgba(206, 247, 243);
--spectrum-seafoam-200: rgba(170, 241, 234, 0.5);
--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: var(
--spectrum-transparent-white-100
);
}
```

Expand All @@ -32,5 +42,21 @@ Into this:
var(--spectrum-seafoam-200-rgb),
var(--spectrum-seafoam-200-opacity)
);
--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)
);
}
```
6 changes: 6 additions & 0 deletions plugins/postcss-rgb-mapping/expected/basic.css
Original file line number Diff line number Diff line change
Expand Up @@ -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));
}
6 changes: 6 additions & 0 deletions plugins/postcss-rgb-mapping/expected/modern.css
Original file line number Diff line number Diff line change
Expand Up @@ -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));
}
4 changes: 4 additions & 0 deletions plugins/postcss-rgb-mapping/fixtures/basic.css
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,8 @@
--seafoam-100: rgba(206, 247, 243);
--seafoam-200: rgba(206, 247, 243, 0.5);
--seafoam-300: rgb(206, 247, 243);
--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: var(--spectrum-transparent-white-100);
}
48 changes: 46 additions & 2 deletions plugins/postcss-rgb-mapping/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand Down Expand Up @@ -114,7 +159,6 @@ function rgbMappingFunction ({
decl.assign({
value: `rgba(var(${prop}-rgb)${a ? `${colorFunctionalNotation ? " /" : ","} var(${prop}-opacity)` : ""})`,
});

return;
},
};
Expand Down
Loading