From 96cb296795d8b5bbebb862007385bb0d0b842d70 Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt Date: Fri, 31 Jan 2025 12:22:16 -0500 Subject: [PATCH 1/8] feat: add transparent-mapping postcss plugin - postcss-transparent-mapping pluging created - test.js file and new fixtures/expected CSS files --- .../expected/basic.css | 14 ++++ .../fixtures/basic.css | 10 +++ plugins/postcss-transparent-mapping/index.js | 83 +++++++++++++++++++ .../postcss-transparent-mapping/package.json | 33 ++++++++ .../postcss-transparent-mapping/project.json | 16 ++++ plugins/postcss-transparent-mapping/test.js | 38 +++++++++ 6 files changed, 194 insertions(+) create mode 100644 plugins/postcss-transparent-mapping/expected/basic.css create mode 100644 plugins/postcss-transparent-mapping/fixtures/basic.css create mode 100644 plugins/postcss-transparent-mapping/index.js create mode 100644 plugins/postcss-transparent-mapping/package.json create mode 100644 plugins/postcss-transparent-mapping/project.json create mode 100644 plugins/postcss-transparent-mapping/test.js diff --git a/plugins/postcss-transparent-mapping/expected/basic.css b/plugins/postcss-transparent-mapping/expected/basic.css new file mode 100644 index 00000000000..754b699dab9 --- /dev/null +++ b/plugins/postcss-transparent-mapping/expected/basic.css @@ -0,0 +1,14 @@ +.elements { + --spectrum-transparent-white-100-rgb: 215, 134, 255; + --spectrum-transparent-white-100-opacity: 0.71; + --spectrum-transparent-white-100: rgba(var(--spectrum-transparent-white-100-rgb), var(--spectrum-transparent-white-100-opacity)); + --spectrum-disabled-static-white-content-color-rgb: 215, 134, 255; + --spectrum-disabled-static-white-content-color-opacity: 0.71; + --spectrum-disabled-static-white-content-color: rgba(var(--spectrum-disabled-static-white-content-color-rgb), var(--spectrum-disabled-static-white-content-color-opacity)); + --spectrum-transparent-black-400-rgb: 0, 1, 100; + --spectrum-transparent-black-400-opacity: 0.47; + --spectrum-transparent-black-400: rgba(var(--spectrum-transparent-black-400-rgb), var(--spectrum-transparent-black-400-opacity)); + --spectrum-disabled-static-black-content-color-rgb: 0, 1, 100; + --spectrum-disabled-static-black-content-color-opacity: 0.47; + --spectrum-disabled-static-black-content-color: rgba(var(--spectrum-disabled-static-black-content-color-rgb), var(--spectrum-disabled-static-black-content-color-opacity)); +} diff --git a/plugins/postcss-transparent-mapping/fixtures/basic.css b/plugins/postcss-transparent-mapping/fixtures/basic.css new file mode 100644 index 00000000000..df88c3e8dc3 --- /dev/null +++ b/plugins/postcss-transparent-mapping/fixtures/basic.css @@ -0,0 +1,10 @@ +.elements { + --spectrum-transparent-white-100-rgb: 215, 134, 255; + --spectrum-transparent-white-100-opacity: 0.71; + --spectrum-transparent-white-100: rgba(var(--spectrum-transparent-white-100-rgb), var(--spectrum-transparent-white-100-opacity)); + --spectrum-disabled-static-white-content-color: var(--spectrum-transparent-white-100); + --spectrum-transparent-black-400-rgb: 0, 1, 100; + --spectrum-transparent-black-400-opacity: 0.47; + --spectrum-transparent-black-400: rgba(var(--spectrum-transparent-black-400-rgb), var(--spectrum-transparent-black-400-opacity)); + --spectrum-disabled-static-black-content-color: var(--spectrum-transparent-black-400); +} diff --git a/plugins/postcss-transparent-mapping/index.js b/plugins/postcss-transparent-mapping/index.js new file mode 100644 index 00000000000..2ffeff4a9fa --- /dev/null +++ b/plugins/postcss-transparent-mapping/index.js @@ -0,0 +1,83 @@ +/*! + * Copyright 2025 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +/* eslint-disable no-console */ + +function transparentMappingFunction() { + return (cssRoot) => { + const tokens = {}; + + // Collect all custom properties + cssRoot.walkDecls(decl => { + const { prop, value } = decl; + + // Determine if this property is a custom property + const isCustomProp = prop.startsWith("--"); + + if (isCustomProp) { + tokens[prop] = value; + } + }); + + const newCustomProps = {}; + + // Determine if this property has already been processed + const isProcessed = (prop) => { + return prop.endsWith("rgb") || prop.endsWith("opacity"); + }; + + Object.entries(tokens).forEach(([prop, value]) => { + // Check if the value references a "transparent" token + const match = value.match(/var\((--spectrum-transparent-[^\s)]+)\)/); + if (match && !isProcessed(prop)) { + const referencedToken = match[1]; + + // Check if we have the required "-rgb" and "-opacity" tokens + const rgbToken = `${referencedToken}-rgb`; + const opacityToken = `${referencedToken}-opacity`; + + if (tokens[rgbToken] && tokens[opacityToken]) { + // Create the new custom properties + newCustomProps[prop] = { + rgbProp: `${prop}-rgb`, + rgbValue: tokens[rgbToken], + opacityProp: `${prop}-opacity`, + opacityValue: tokens[opacityToken], + newPropValue: `rgba(var(${prop}-rgb), var(${prop}-opacity))` + }; + } + else { + console.log(`Missing -rgb or -opacity tokens for ${referencedToken}`); + } + } + }); + + cssRoot.walkDecls(decl => { + const { prop } = decl; + + if (newCustomProps[prop]) { + const { rgbProp, rgbValue, opacityProp, opacityValue, newPropValue } = newCustomProps[prop]; + + // Insert derived tokens before the original declaration + decl.cloneBefore({ prop: rgbProp, value: rgbValue }); + decl.cloneBefore({ prop: opacityProp, value: opacityValue }); + + // Replace the old prop with the new values + decl.value = newPropValue; + } + }); + }; +} + +transparentMappingFunction.postcss = true; +module.exports = transparentMappingFunction; diff --git a/plugins/postcss-transparent-mapping/package.json b/plugins/postcss-transparent-mapping/package.json new file mode 100644 index 00000000000..dc69480081e --- /dev/null +++ b/plugins/postcss-transparent-mapping/package.json @@ -0,0 +1,33 @@ +{ + "name": "@spectrum-tools/postcss-transparent-mapping", + "version": "1.0.0", + "description": "Remaps token values referencing 'transparent' to rgb and opacity postfixed variables", + "license": "Apache-2.0", + "author": "Adobe", + "contributors": [ + "Marissa Huysentruyt " + ], + "main": "index.js", + "files": [ + "package.json", + "index.js", + "*.md" + ], + "dependencies": { + "postcss-values-parser": "^6.0.2" + }, + "peerDependencies": { + "postcss": ">=8" + }, + "devDependencies": { + "ava": "^6.2.0", + "c8": "^10.1.3", + "postcss": "^8.5.0" + }, + "keywords": [ + "css", + "rgb", + "plugin", + "postcss" + ] +} diff --git a/plugins/postcss-transparent-mapping/project.json b/plugins/postcss-transparent-mapping/project.json new file mode 100644 index 00000000000..11fb58bf6d4 --- /dev/null +++ b/plugins/postcss-transparent-mapping/project.json @@ -0,0 +1,16 @@ +{ + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "name": "postcss-transparent-mapping", + "tags": ["tooling", "postcss", "plugin"], + "targets": { + "format": { + "defaultConfiguration": "plugins" + }, + "lint": { + "defaultConfiguration": "plugins" + }, + "test": { + "defaultConfiguration": "plugins" + } + } +} diff --git a/plugins/postcss-transparent-mapping/test.js b/plugins/postcss-transparent-mapping/test.js new file mode 100644 index 00000000000..b2d01dd4e99 --- /dev/null +++ b/plugins/postcss-transparent-mapping/test.js @@ -0,0 +1,38 @@ +/*! + * Copyright 2025 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +const fs = require("fs"); +const test = require("ava"); +const postcss = require("postcss"); +const plugin = require("./index.js"); + +function compare(t, fixtureFilePath, expectedFilePath, options = {}) { + return postcss([plugin(options)]) + .process(readFile(`./fixtures/${fixtureFilePath}`), { + from: fixtureFilePath, + }) + .then((result) => { + const actual = result.css; + const expected = readFile(`./expected/${expectedFilePath}`); + t.is(actual, expected); + t.is(result.warnings().length, 0); + }); +} + +function readFile(filename) { + return fs.readFileSync(filename, "utf8"); +} + +test("create basic output", (t) => { + return compare(t, "basic.css", "basic.css"); +}); From 60e14988d68a1f0fe55b1a8361489521c0498f07 Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt Date: Fri, 31 Jan 2025 13:17:41 -0500 Subject: [PATCH 2/8] chore(tokens): add transparent-mapping plugin to tokens - adds transparent-mapping to tokens postcss config - adds transparent-mapping to tokens devDependencies --- plugins/postcss-transparent-mapping/README.md | 46 +++++++++++++++++++ tokens/package.json | 3 ++ tokens/postcss.config.js | 1 + 3 files changed, 50 insertions(+) create mode 100644 plugins/postcss-transparent-mapping/README.md diff --git a/plugins/postcss-transparent-mapping/README.md b/plugins/postcss-transparent-mapping/README.md new file mode 100644 index 00000000000..99782b3294e --- /dev/null +++ b/plugins/postcss-transparent-mapping/README.md @@ -0,0 +1,46 @@ +# postcss-transparent-mapping + +> Remaps values that reference a transparent token to `rgb` and `opacity` postfixed variables. + +## Installation + +```sh +yarn add -D @spectrum-tools/postcss-transparent-mapping +postcss -u postcss-transparent-mapping -o dist/index.css src/index.css +``` + +## Usage + +This plugin turns this: + +```css +.elements { + --spectrum-transparent-white-100-rgb: 215, 134, 255; + --spectrum-transparent-white-100-opacity: 0.71; + --spectrum-transparent-white-100: rgba(var(--spectrum-transparent-white-100-rgb), var(--spectrum-transparent-white-100-opacity)); + --spectrum-disabled-static-white-content-color: var(--spectrum-transparent-white-100); + --spectrum-transparent-black-400-rgb: 0, 1, 100; + --spectrum-transparent-black-400-opacity: 0.47; + --spectrum-transparent-black-400: rgba(var(--spectrum-transparent-black-400-rgb), var(--spectrum-transparent-black-400-opacity)); + --spectrum-disabled-static-black-content-color: var(--spectrum-transparent-black-400); +} +``` + +Into this: + +```css +.elements { + --spectrum-transparent-white-100-rgb: 215, 134, 255; + --spectrum-transparent-white-100-opacity: 0.71; + --spectrum-transparent-white-100: rgba(var(--spectrum-transparent-white-100-rgb), var(--spectrum-transparent-white-100-opacity)); + --spectrum-disabled-static-white-content-color-rgb: 215, 134, 255; + --spectrum-disabled-static-white-content-color-opacity: 0.71; + --spectrum-disabled-static-white-content-color: rgba(var(--spectrum-disabled-static-white-content-color-rgb), var(--spectrum-disabled-static-white-content-color-opacity)); + --spectrum-transparent-black-400-rgb: 0, 1, 100; + --spectrum-transparent-black-400-opacity: 0.47; + --spectrum-transparent-black-400: rgba(var(--spectrum-transparent-black-400-rgb), var(--spectrum-transparent-black-400-opacity)); + --spectrum-disabled-static-black-content-color-rgb: 0, 1, 100; + --spectrum-disabled-static-black-content-color-opacity: 0.47; + --spectrum-disabled-static-black-content-color: rgba(var(--spectrum-disabled-static-black-content-color-rgb), var(--spectrum-disabled-static-black-content-color-opacity)); +} +``` diff --git a/tokens/package.json b/tokens/package.json index 7488f81265e..42194a3ff62 100644 --- a/tokens/package.json +++ b/tokens/package.json @@ -31,6 +31,9 @@ "@adobe/token-diff-generator": "^1.3.0", "@nxkit/style-dictionary": "^6.0.0", "@spectrum-tools/postcss-rgb-mapping": "1.0.0", + "@spectrum-tools/postcss-transparent-mapping": "workspace:^", + "eslint": "^8.57.0", + "npm-run-all2": "^7.0.2", "postcss": "^8.5.3", "postcss-sorting": "^9.1.0", "style-dictionary": "^3.9.2", diff --git a/tokens/postcss.config.js b/tokens/postcss.config.js index e117b38812b..9bfb85c4574 100644 --- a/tokens/postcss.config.js +++ b/tokens/postcss.config.js @@ -23,6 +23,7 @@ module.exports = ({ "@spectrum-tools/postcss-rgb-mapping": { colorFunctionalNotation: false, }, + "@spectrum-tools/postcss-transparent-mapping": {}, "postcss-sorting": { order: ["custom-properties", "declarations", "at-rules", "rules"], "properties-order": "alphabetical", From 42a475502146df2b8ee6a162c67c46a378886fa0 Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt Date: Fri, 31 Jan 2025 13:19:18 -0500 Subject: [PATCH 3/8] chore: update yarn.lock with new plugin for workspace --- yarn.lock | 113 ++++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 109 insertions(+), 4 deletions(-) diff --git a/yarn.lock b/yarn.lock index f988b1af39a..3ca0197eeb3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5445,6 +5445,9 @@ __metadata: "@adobe/token-diff-generator": "npm:^1.3.0" "@nxkit/style-dictionary": "npm:^6.0.0" "@spectrum-tools/postcss-rgb-mapping": "npm:1.0.0" + "@spectrum-tools/postcss-transparent-mapping": "workspace:^" + eslint: "npm:^8.57.0" + npm-run-all2: "npm:^7.0.2" postcss: "npm:^8.5.3" postcss-sorting: "npm:^9.1.0" style-dictionary: "npm:^3.9.2" @@ -5627,6 +5630,45 @@ __metadata: languageName: unknown linkType: soft +"@spectrum-tools/postcss-transparent-mapping@workspace:^, @spectrum-tools/postcss-transparent-mapping@workspace:plugins/postcss-transparent-mapping": + version: 0.0.0-use.local + resolution: "@spectrum-tools/postcss-transparent-mapping@workspace:plugins/postcss-transparent-mapping" + dependencies: + ava: "npm:^6.2.0" + c8: "npm:^10.1.3" + postcss: "npm:^8.5.3" + postcss-values-parser: "npm:^6.0.2" + peerDependencies: + postcss: ">=8" + languageName: unknown + linkType: soft + +"@spectrum-tools/postcss-transparent-mapping@workspace:^, @spectrum-tools/postcss-transparent-mapping@workspace:plugins/postcss-transparent-mapping": + version: 0.0.0-use.local + resolution: "@spectrum-tools/postcss-transparent-mapping@workspace:plugins/postcss-transparent-mapping" + dependencies: + ava: "npm:^6.2.0" + c8: "npm:^10.1.3" + postcss: "npm:^8.5.2" + postcss-values-parser: "npm:^6.0.2" + peerDependencies: + postcss: ">=8" + languageName: unknown + linkType: soft + +"@spectrum-tools/postcss-transparent-mapping@workspace:^, @spectrum-tools/postcss-transparent-mapping@workspace:plugins/postcss-transparent-mapping": + version: 0.0.0-use.local + resolution: "@spectrum-tools/postcss-transparent-mapping@workspace:plugins/postcss-transparent-mapping" + dependencies: + ava: "npm:^6.2.0" + c8: "npm:^10.1.3" + postcss: "npm:^8.5.0" + postcss-values-parser: "npm:^6.0.2" + peerDependencies: + postcss: ">=8" + languageName: unknown + linkType: soft + "@spectrum-tools/stylelint-no-missing-var@workspace:plugins/stylelint-no-missing-var": version: 0.0.0-use.local resolution: "@spectrum-tools/stylelint-no-missing-var@workspace:plugins/stylelint-no-missing-var" @@ -8869,7 +8911,7 @@ __metadata: languageName: node linkType: hard -"cross-spawn@npm:^7.0.0, cross-spawn@npm:^7.0.1, cross-spawn@npm:^7.0.2, cross-spawn@npm:^7.0.3, cross-spawn@npm:^7.0.5": +"cross-spawn@npm:^7.0.0, cross-spawn@npm:^7.0.1, cross-spawn@npm:^7.0.2, cross-spawn@npm:^7.0.3, cross-spawn@npm:^7.0.5, cross-spawn@npm:^7.0.6": version: 7.0.6 resolution: "cross-spawn@npm:7.0.6" dependencies: @@ -13549,6 +13591,13 @@ __metadata: languageName: node linkType: hard +"json-parse-even-better-errors@npm:^4.0.0": + version: 4.0.0 + resolution: "json-parse-even-better-errors@npm:4.0.0" + checksum: 10c0/84cd9304a97e8fb2af3937bf53acb91c026aeb859703c332684e688ea60db27fc2242aa532a84e1883fdcbe1e5c1fb57c2bef38e312021aa1cd300defc63cf16 + languageName: node + linkType: hard + "json-schema-traverse@npm:^0.3.0": version: 0.3.1 resolution: "json-schema-traverse@npm:0.3.1" @@ -14450,6 +14499,13 @@ __metadata: languageName: node linkType: hard +"memorystream@npm:^0.3.1": + version: 0.3.1 + resolution: "memorystream@npm:0.3.1" + checksum: 10c0/4bd164657711d9747ff5edb0508b2944414da3464b7fe21ac5c67cf35bba975c4b446a0124bd0f9a8be54cfc18faf92e92bd77563a20328b1ccf2ff04e9f39b9 + languageName: node + linkType: hard + "meow@npm:^12.0.1": version: 12.1.1 resolution: "meow@npm:12.1.1" @@ -14906,7 +14962,7 @@ __metadata: languageName: node linkType: hard -"minimatch@npm:^9.0.4": +"minimatch@npm:^9.0.0, minimatch@npm:^9.0.4": version: 9.0.5 resolution: "minimatch@npm:9.0.5" dependencies: @@ -15348,6 +15404,13 @@ __metadata: languageName: node linkType: hard +"npm-normalize-package-bin@npm:^4.0.0": + version: 4.0.0 + resolution: "npm-normalize-package-bin@npm:4.0.0" + checksum: 10c0/1fa546fcae8eaab61ef9b9ec237b6c795008da50e1883eae030e9e38bb04ffa32c5aabcef9a0400eae3dc1f91809bcfa85e437ce80d677c69b419d1d9cacf0ab + languageName: node + linkType: hard + "npm-package-arg@npm:^12.0.0": version: 12.0.0 resolution: "npm-package-arg@npm:12.0.0" @@ -15376,6 +15439,27 @@ __metadata: languageName: node linkType: hard +"npm-run-all2@npm:^7.0.2": + version: 7.0.2 + resolution: "npm-run-all2@npm:7.0.2" + dependencies: + ansi-styles: "npm:^6.2.1" + cross-spawn: "npm:^7.0.6" + memorystream: "npm:^0.3.1" + minimatch: "npm:^9.0.0" + pidtree: "npm:^0.6.0" + read-package-json-fast: "npm:^4.0.0" + shell-quote: "npm:^1.7.3" + which: "npm:^5.0.0" + bin: + npm-run-all: bin/npm-run-all/index.js + npm-run-all2: bin/npm-run-all/index.js + run-p: bin/run-p/index.js + run-s: bin/run-s/index.js + checksum: 10c0/4606c0cdaad9dc7dbe5a6ae432b1aabea25e2ffd541f959307e5c34247d0658952f98352b8ce45f925241af304c6718b2198b425f234e0e9fbc30b342cedb121 + languageName: node + linkType: hard + "npm-run-path@npm:^4.0.1": version: 4.0.1 resolution: "npm-run-path@npm:4.0.1" @@ -16200,7 +16284,7 @@ __metadata: languageName: node linkType: hard -"pidtree@npm:~0.6.0": +"pidtree@npm:^0.6.0, pidtree@npm:~0.6.0": version: 0.6.0 resolution: "pidtree@npm:0.6.0" bin: @@ -17770,6 +17854,16 @@ __metadata: languageName: node linkType: hard +"read-package-json-fast@npm:^4.0.0": + version: 4.0.0 + resolution: "read-package-json-fast@npm:4.0.0" + dependencies: + json-parse-even-better-errors: "npm:^4.0.0" + npm-normalize-package-bin: "npm:^4.0.0" + checksum: 10c0/8a03509ae8e852f1abc4b109c1be571dd90ac9ea65d55433b2fe287e409113441a9b00df698288fe48aa786c1a2550569d47b5ab01ed83ada073d691d5aff582 + languageName: node + linkType: hard + "read-yaml-file@npm:^1.1.0": version: 1.1.0 resolution: "read-yaml-file@npm:1.1.0" @@ -18416,7 +18510,7 @@ __metadata: languageName: node linkType: hard -"shell-quote@npm:^1.4.1": +"shell-quote@npm:^1.4.1, shell-quote@npm:^1.7.3": version: 1.8.2 resolution: "shell-quote@npm:1.8.2" checksum: 10c0/85fdd44f2ad76e723d34eb72c753f04d847ab64e9f1f10677e3f518d0e5b0752a176fd805297b30bb8c3a1556ebe6e77d2288dbd7b7b0110c7e941e9e9c20ce1 @@ -20461,6 +20555,17 @@ __metadata: languageName: node linkType: hard +"which@npm:^5.0.0": + version: 5.0.0 + resolution: "which@npm:5.0.0" + dependencies: + isexe: "npm:^3.1.1" + bin: + node-which: bin/which.js + checksum: 10c0/e556e4cd8b7dbf5df52408c9a9dd5ac6518c8c5267c8953f5b0564073c66ed5bf9503b14d876d0e9c7844d4db9725fb0dcf45d6e911e17e26ab363dc3965ae7b + languageName: node + linkType: hard + "word-wrap@npm:^1.2.5": version: 1.2.5 resolution: "word-wrap@npm:1.2.5" From 675b275effee6191bf335a68d95d73dabdfd758d Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt Date: Wed, 26 Feb 2025 16:30:02 -0500 Subject: [PATCH 4/8] chore: remove transparent plugin --- plugins/postcss-transparent-mapping/README.md | 46 ---------- .../expected/basic.css | 14 ---- .../fixtures/basic.css | 10 --- plugins/postcss-transparent-mapping/index.js | 83 ------------------- .../postcss-transparent-mapping/package.json | 33 -------- .../postcss-transparent-mapping/project.json | 16 ---- plugins/postcss-transparent-mapping/test.js | 38 --------- tokens/package.json | 1 - tokens/postcss.config.js | 1 - yarn.lock | 40 --------- 10 files changed, 282 deletions(-) delete mode 100644 plugins/postcss-transparent-mapping/README.md delete mode 100644 plugins/postcss-transparent-mapping/expected/basic.css delete mode 100644 plugins/postcss-transparent-mapping/fixtures/basic.css delete mode 100644 plugins/postcss-transparent-mapping/index.js delete mode 100644 plugins/postcss-transparent-mapping/package.json delete mode 100644 plugins/postcss-transparent-mapping/project.json delete mode 100644 plugins/postcss-transparent-mapping/test.js diff --git a/plugins/postcss-transparent-mapping/README.md b/plugins/postcss-transparent-mapping/README.md deleted file mode 100644 index 99782b3294e..00000000000 --- a/plugins/postcss-transparent-mapping/README.md +++ /dev/null @@ -1,46 +0,0 @@ -# postcss-transparent-mapping - -> Remaps values that reference a transparent token to `rgb` and `opacity` postfixed variables. - -## Installation - -```sh -yarn add -D @spectrum-tools/postcss-transparent-mapping -postcss -u postcss-transparent-mapping -o dist/index.css src/index.css -``` - -## Usage - -This plugin turns this: - -```css -.elements { - --spectrum-transparent-white-100-rgb: 215, 134, 255; - --spectrum-transparent-white-100-opacity: 0.71; - --spectrum-transparent-white-100: rgba(var(--spectrum-transparent-white-100-rgb), var(--spectrum-transparent-white-100-opacity)); - --spectrum-disabled-static-white-content-color: var(--spectrum-transparent-white-100); - --spectrum-transparent-black-400-rgb: 0, 1, 100; - --spectrum-transparent-black-400-opacity: 0.47; - --spectrum-transparent-black-400: rgba(var(--spectrum-transparent-black-400-rgb), var(--spectrum-transparent-black-400-opacity)); - --spectrum-disabled-static-black-content-color: var(--spectrum-transparent-black-400); -} -``` - -Into this: - -```css -.elements { - --spectrum-transparent-white-100-rgb: 215, 134, 255; - --spectrum-transparent-white-100-opacity: 0.71; - --spectrum-transparent-white-100: rgba(var(--spectrum-transparent-white-100-rgb), var(--spectrum-transparent-white-100-opacity)); - --spectrum-disabled-static-white-content-color-rgb: 215, 134, 255; - --spectrum-disabled-static-white-content-color-opacity: 0.71; - --spectrum-disabled-static-white-content-color: rgba(var(--spectrum-disabled-static-white-content-color-rgb), var(--spectrum-disabled-static-white-content-color-opacity)); - --spectrum-transparent-black-400-rgb: 0, 1, 100; - --spectrum-transparent-black-400-opacity: 0.47; - --spectrum-transparent-black-400: rgba(var(--spectrum-transparent-black-400-rgb), var(--spectrum-transparent-black-400-opacity)); - --spectrum-disabled-static-black-content-color-rgb: 0, 1, 100; - --spectrum-disabled-static-black-content-color-opacity: 0.47; - --spectrum-disabled-static-black-content-color: rgba(var(--spectrum-disabled-static-black-content-color-rgb), var(--spectrum-disabled-static-black-content-color-opacity)); -} -``` diff --git a/plugins/postcss-transparent-mapping/expected/basic.css b/plugins/postcss-transparent-mapping/expected/basic.css deleted file mode 100644 index 754b699dab9..00000000000 --- a/plugins/postcss-transparent-mapping/expected/basic.css +++ /dev/null @@ -1,14 +0,0 @@ -.elements { - --spectrum-transparent-white-100-rgb: 215, 134, 255; - --spectrum-transparent-white-100-opacity: 0.71; - --spectrum-transparent-white-100: rgba(var(--spectrum-transparent-white-100-rgb), var(--spectrum-transparent-white-100-opacity)); - --spectrum-disabled-static-white-content-color-rgb: 215, 134, 255; - --spectrum-disabled-static-white-content-color-opacity: 0.71; - --spectrum-disabled-static-white-content-color: rgba(var(--spectrum-disabled-static-white-content-color-rgb), var(--spectrum-disabled-static-white-content-color-opacity)); - --spectrum-transparent-black-400-rgb: 0, 1, 100; - --spectrum-transparent-black-400-opacity: 0.47; - --spectrum-transparent-black-400: rgba(var(--spectrum-transparent-black-400-rgb), var(--spectrum-transparent-black-400-opacity)); - --spectrum-disabled-static-black-content-color-rgb: 0, 1, 100; - --spectrum-disabled-static-black-content-color-opacity: 0.47; - --spectrum-disabled-static-black-content-color: rgba(var(--spectrum-disabled-static-black-content-color-rgb), var(--spectrum-disabled-static-black-content-color-opacity)); -} diff --git a/plugins/postcss-transparent-mapping/fixtures/basic.css b/plugins/postcss-transparent-mapping/fixtures/basic.css deleted file mode 100644 index df88c3e8dc3..00000000000 --- a/plugins/postcss-transparent-mapping/fixtures/basic.css +++ /dev/null @@ -1,10 +0,0 @@ -.elements { - --spectrum-transparent-white-100-rgb: 215, 134, 255; - --spectrum-transparent-white-100-opacity: 0.71; - --spectrum-transparent-white-100: rgba(var(--spectrum-transparent-white-100-rgb), var(--spectrum-transparent-white-100-opacity)); - --spectrum-disabled-static-white-content-color: var(--spectrum-transparent-white-100); - --spectrum-transparent-black-400-rgb: 0, 1, 100; - --spectrum-transparent-black-400-opacity: 0.47; - --spectrum-transparent-black-400: rgba(var(--spectrum-transparent-black-400-rgb), var(--spectrum-transparent-black-400-opacity)); - --spectrum-disabled-static-black-content-color: var(--spectrum-transparent-black-400); -} diff --git a/plugins/postcss-transparent-mapping/index.js b/plugins/postcss-transparent-mapping/index.js deleted file mode 100644 index 2ffeff4a9fa..00000000000 --- a/plugins/postcss-transparent-mapping/index.js +++ /dev/null @@ -1,83 +0,0 @@ -/*! - * Copyright 2025 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* eslint-disable no-console */ - -function transparentMappingFunction() { - return (cssRoot) => { - const tokens = {}; - - // Collect all custom properties - cssRoot.walkDecls(decl => { - const { prop, value } = decl; - - // Determine if this property is a custom property - const isCustomProp = prop.startsWith("--"); - - if (isCustomProp) { - tokens[prop] = value; - } - }); - - const newCustomProps = {}; - - // Determine if this property has already been processed - const isProcessed = (prop) => { - return prop.endsWith("rgb") || prop.endsWith("opacity"); - }; - - Object.entries(tokens).forEach(([prop, value]) => { - // Check if the value references a "transparent" token - const match = value.match(/var\((--spectrum-transparent-[^\s)]+)\)/); - if (match && !isProcessed(prop)) { - const referencedToken = match[1]; - - // Check if we have the required "-rgb" and "-opacity" tokens - const rgbToken = `${referencedToken}-rgb`; - const opacityToken = `${referencedToken}-opacity`; - - if (tokens[rgbToken] && tokens[opacityToken]) { - // Create the new custom properties - newCustomProps[prop] = { - rgbProp: `${prop}-rgb`, - rgbValue: tokens[rgbToken], - opacityProp: `${prop}-opacity`, - opacityValue: tokens[opacityToken], - newPropValue: `rgba(var(${prop}-rgb), var(${prop}-opacity))` - }; - } - else { - console.log(`Missing -rgb or -opacity tokens for ${referencedToken}`); - } - } - }); - - cssRoot.walkDecls(decl => { - const { prop } = decl; - - if (newCustomProps[prop]) { - const { rgbProp, rgbValue, opacityProp, opacityValue, newPropValue } = newCustomProps[prop]; - - // Insert derived tokens before the original declaration - decl.cloneBefore({ prop: rgbProp, value: rgbValue }); - decl.cloneBefore({ prop: opacityProp, value: opacityValue }); - - // Replace the old prop with the new values - decl.value = newPropValue; - } - }); - }; -} - -transparentMappingFunction.postcss = true; -module.exports = transparentMappingFunction; diff --git a/plugins/postcss-transparent-mapping/package.json b/plugins/postcss-transparent-mapping/package.json deleted file mode 100644 index dc69480081e..00000000000 --- a/plugins/postcss-transparent-mapping/package.json +++ /dev/null @@ -1,33 +0,0 @@ -{ - "name": "@spectrum-tools/postcss-transparent-mapping", - "version": "1.0.0", - "description": "Remaps token values referencing 'transparent' to rgb and opacity postfixed variables", - "license": "Apache-2.0", - "author": "Adobe", - "contributors": [ - "Marissa Huysentruyt " - ], - "main": "index.js", - "files": [ - "package.json", - "index.js", - "*.md" - ], - "dependencies": { - "postcss-values-parser": "^6.0.2" - }, - "peerDependencies": { - "postcss": ">=8" - }, - "devDependencies": { - "ava": "^6.2.0", - "c8": "^10.1.3", - "postcss": "^8.5.0" - }, - "keywords": [ - "css", - "rgb", - "plugin", - "postcss" - ] -} diff --git a/plugins/postcss-transparent-mapping/project.json b/plugins/postcss-transparent-mapping/project.json deleted file mode 100644 index 11fb58bf6d4..00000000000 --- a/plugins/postcss-transparent-mapping/project.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "$schema": "../../node_modules/nx/schemas/project-schema.json", - "name": "postcss-transparent-mapping", - "tags": ["tooling", "postcss", "plugin"], - "targets": { - "format": { - "defaultConfiguration": "plugins" - }, - "lint": { - "defaultConfiguration": "plugins" - }, - "test": { - "defaultConfiguration": "plugins" - } - } -} diff --git a/plugins/postcss-transparent-mapping/test.js b/plugins/postcss-transparent-mapping/test.js deleted file mode 100644 index b2d01dd4e99..00000000000 --- a/plugins/postcss-transparent-mapping/test.js +++ /dev/null @@ -1,38 +0,0 @@ -/*! - * Copyright 2025 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -const fs = require("fs"); -const test = require("ava"); -const postcss = require("postcss"); -const plugin = require("./index.js"); - -function compare(t, fixtureFilePath, expectedFilePath, options = {}) { - return postcss([plugin(options)]) - .process(readFile(`./fixtures/${fixtureFilePath}`), { - from: fixtureFilePath, - }) - .then((result) => { - const actual = result.css; - const expected = readFile(`./expected/${expectedFilePath}`); - t.is(actual, expected); - t.is(result.warnings().length, 0); - }); -} - -function readFile(filename) { - return fs.readFileSync(filename, "utf8"); -} - -test("create basic output", (t) => { - return compare(t, "basic.css", "basic.css"); -}); diff --git a/tokens/package.json b/tokens/package.json index 42194a3ff62..95b6d096c1e 100644 --- a/tokens/package.json +++ b/tokens/package.json @@ -31,7 +31,6 @@ "@adobe/token-diff-generator": "^1.3.0", "@nxkit/style-dictionary": "^6.0.0", "@spectrum-tools/postcss-rgb-mapping": "1.0.0", - "@spectrum-tools/postcss-transparent-mapping": "workspace:^", "eslint": "^8.57.0", "npm-run-all2": "^7.0.2", "postcss": "^8.5.3", diff --git a/tokens/postcss.config.js b/tokens/postcss.config.js index 9bfb85c4574..e117b38812b 100644 --- a/tokens/postcss.config.js +++ b/tokens/postcss.config.js @@ -23,7 +23,6 @@ module.exports = ({ "@spectrum-tools/postcss-rgb-mapping": { colorFunctionalNotation: false, }, - "@spectrum-tools/postcss-transparent-mapping": {}, "postcss-sorting": { order: ["custom-properties", "declarations", "at-rules", "rules"], "properties-order": "alphabetical", diff --git a/yarn.lock b/yarn.lock index 3ca0197eeb3..823c2e6f893 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5445,7 +5445,6 @@ __metadata: "@adobe/token-diff-generator": "npm:^1.3.0" "@nxkit/style-dictionary": "npm:^6.0.0" "@spectrum-tools/postcss-rgb-mapping": "npm:1.0.0" - "@spectrum-tools/postcss-transparent-mapping": "workspace:^" eslint: "npm:^8.57.0" npm-run-all2: "npm:^7.0.2" postcss: "npm:^8.5.3" @@ -5630,45 +5629,6 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-tools/postcss-transparent-mapping@workspace:^, @spectrum-tools/postcss-transparent-mapping@workspace:plugins/postcss-transparent-mapping": - version: 0.0.0-use.local - resolution: "@spectrum-tools/postcss-transparent-mapping@workspace:plugins/postcss-transparent-mapping" - dependencies: - ava: "npm:^6.2.0" - c8: "npm:^10.1.3" - postcss: "npm:^8.5.3" - postcss-values-parser: "npm:^6.0.2" - peerDependencies: - postcss: ">=8" - languageName: unknown - linkType: soft - -"@spectrum-tools/postcss-transparent-mapping@workspace:^, @spectrum-tools/postcss-transparent-mapping@workspace:plugins/postcss-transparent-mapping": - version: 0.0.0-use.local - resolution: "@spectrum-tools/postcss-transparent-mapping@workspace:plugins/postcss-transparent-mapping" - dependencies: - ava: "npm:^6.2.0" - c8: "npm:^10.1.3" - postcss: "npm:^8.5.2" - postcss-values-parser: "npm:^6.0.2" - peerDependencies: - postcss: ">=8" - languageName: unknown - linkType: soft - -"@spectrum-tools/postcss-transparent-mapping@workspace:^, @spectrum-tools/postcss-transparent-mapping@workspace:plugins/postcss-transparent-mapping": - version: 0.0.0-use.local - resolution: "@spectrum-tools/postcss-transparent-mapping@workspace:plugins/postcss-transparent-mapping" - dependencies: - ava: "npm:^6.2.0" - c8: "npm:^10.1.3" - postcss: "npm:^8.5.0" - postcss-values-parser: "npm:^6.0.2" - peerDependencies: - postcss: ">=8" - languageName: unknown - linkType: soft - "@spectrum-tools/stylelint-no-missing-var@workspace:plugins/stylelint-no-missing-var": version: 0.0.0-use.local resolution: "@spectrum-tools/stylelint-no-missing-var@workspace:plugins/stylelint-no-missing-var" From c024845babbafe62118dd083763b138bbd38704a Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt Date: Wed, 26 Feb 2025 17:14:26 -0500 Subject: [PATCH 5/8] feat: refactor transparent mapping into rgb-mapping plugin --- plugins/postcss-rgb-mapping/index.js | 48 ++++++++++++++++++++++++++-- 1 file changed, 46 insertions(+), 2 deletions(-) diff --git a/plugins/postcss-rgb-mapping/index.js b/plugins/postcss-rgb-mapping/index.js index 155a1c68cfe..ce1df4515d1 100644 --- a/plugins/postcss-rgb-mapping/index.js +++ b/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; }, }; From eaca50bec867849d32895d1d0807596069c86616 Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt Date: Thu, 27 Feb 2025 09:16:43 -0500 Subject: [PATCH 6/8] chore(tokens): remove unnecessary package/dep updates --- tokens/package.json | 2 -- yarn.lock | 73 +++------------------------------------------ 2 files changed, 4 insertions(+), 71 deletions(-) diff --git a/tokens/package.json b/tokens/package.json index 95b6d096c1e..7488f81265e 100644 --- a/tokens/package.json +++ b/tokens/package.json @@ -31,8 +31,6 @@ "@adobe/token-diff-generator": "^1.3.0", "@nxkit/style-dictionary": "^6.0.0", "@spectrum-tools/postcss-rgb-mapping": "1.0.0", - "eslint": "^8.57.0", - "npm-run-all2": "^7.0.2", "postcss": "^8.5.3", "postcss-sorting": "^9.1.0", "style-dictionary": "^3.9.2", diff --git a/yarn.lock b/yarn.lock index 823c2e6f893..f988b1af39a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5445,8 +5445,6 @@ __metadata: "@adobe/token-diff-generator": "npm:^1.3.0" "@nxkit/style-dictionary": "npm:^6.0.0" "@spectrum-tools/postcss-rgb-mapping": "npm:1.0.0" - eslint: "npm:^8.57.0" - npm-run-all2: "npm:^7.0.2" postcss: "npm:^8.5.3" postcss-sorting: "npm:^9.1.0" style-dictionary: "npm:^3.9.2" @@ -8871,7 +8869,7 @@ __metadata: languageName: node linkType: hard -"cross-spawn@npm:^7.0.0, cross-spawn@npm:^7.0.1, cross-spawn@npm:^7.0.2, cross-spawn@npm:^7.0.3, cross-spawn@npm:^7.0.5, cross-spawn@npm:^7.0.6": +"cross-spawn@npm:^7.0.0, cross-spawn@npm:^7.0.1, cross-spawn@npm:^7.0.2, cross-spawn@npm:^7.0.3, cross-spawn@npm:^7.0.5": version: 7.0.6 resolution: "cross-spawn@npm:7.0.6" dependencies: @@ -13551,13 +13549,6 @@ __metadata: languageName: node linkType: hard -"json-parse-even-better-errors@npm:^4.0.0": - version: 4.0.0 - resolution: "json-parse-even-better-errors@npm:4.0.0" - checksum: 10c0/84cd9304a97e8fb2af3937bf53acb91c026aeb859703c332684e688ea60db27fc2242aa532a84e1883fdcbe1e5c1fb57c2bef38e312021aa1cd300defc63cf16 - languageName: node - linkType: hard - "json-schema-traverse@npm:^0.3.0": version: 0.3.1 resolution: "json-schema-traverse@npm:0.3.1" @@ -14459,13 +14450,6 @@ __metadata: languageName: node linkType: hard -"memorystream@npm:^0.3.1": - version: 0.3.1 - resolution: "memorystream@npm:0.3.1" - checksum: 10c0/4bd164657711d9747ff5edb0508b2944414da3464b7fe21ac5c67cf35bba975c4b446a0124bd0f9a8be54cfc18faf92e92bd77563a20328b1ccf2ff04e9f39b9 - languageName: node - linkType: hard - "meow@npm:^12.0.1": version: 12.1.1 resolution: "meow@npm:12.1.1" @@ -14922,7 +14906,7 @@ __metadata: languageName: node linkType: hard -"minimatch@npm:^9.0.0, minimatch@npm:^9.0.4": +"minimatch@npm:^9.0.4": version: 9.0.5 resolution: "minimatch@npm:9.0.5" dependencies: @@ -15364,13 +15348,6 @@ __metadata: languageName: node linkType: hard -"npm-normalize-package-bin@npm:^4.0.0": - version: 4.0.0 - resolution: "npm-normalize-package-bin@npm:4.0.0" - checksum: 10c0/1fa546fcae8eaab61ef9b9ec237b6c795008da50e1883eae030e9e38bb04ffa32c5aabcef9a0400eae3dc1f91809bcfa85e437ce80d677c69b419d1d9cacf0ab - languageName: node - linkType: hard - "npm-package-arg@npm:^12.0.0": version: 12.0.0 resolution: "npm-package-arg@npm:12.0.0" @@ -15399,27 +15376,6 @@ __metadata: languageName: node linkType: hard -"npm-run-all2@npm:^7.0.2": - version: 7.0.2 - resolution: "npm-run-all2@npm:7.0.2" - dependencies: - ansi-styles: "npm:^6.2.1" - cross-spawn: "npm:^7.0.6" - memorystream: "npm:^0.3.1" - minimatch: "npm:^9.0.0" - pidtree: "npm:^0.6.0" - read-package-json-fast: "npm:^4.0.0" - shell-quote: "npm:^1.7.3" - which: "npm:^5.0.0" - bin: - npm-run-all: bin/npm-run-all/index.js - npm-run-all2: bin/npm-run-all/index.js - run-p: bin/run-p/index.js - run-s: bin/run-s/index.js - checksum: 10c0/4606c0cdaad9dc7dbe5a6ae432b1aabea25e2ffd541f959307e5c34247d0658952f98352b8ce45f925241af304c6718b2198b425f234e0e9fbc30b342cedb121 - languageName: node - linkType: hard - "npm-run-path@npm:^4.0.1": version: 4.0.1 resolution: "npm-run-path@npm:4.0.1" @@ -16244,7 +16200,7 @@ __metadata: languageName: node linkType: hard -"pidtree@npm:^0.6.0, pidtree@npm:~0.6.0": +"pidtree@npm:~0.6.0": version: 0.6.0 resolution: "pidtree@npm:0.6.0" bin: @@ -17814,16 +17770,6 @@ __metadata: languageName: node linkType: hard -"read-package-json-fast@npm:^4.0.0": - version: 4.0.0 - resolution: "read-package-json-fast@npm:4.0.0" - dependencies: - json-parse-even-better-errors: "npm:^4.0.0" - npm-normalize-package-bin: "npm:^4.0.0" - checksum: 10c0/8a03509ae8e852f1abc4b109c1be571dd90ac9ea65d55433b2fe287e409113441a9b00df698288fe48aa786c1a2550569d47b5ab01ed83ada073d691d5aff582 - languageName: node - linkType: hard - "read-yaml-file@npm:^1.1.0": version: 1.1.0 resolution: "read-yaml-file@npm:1.1.0" @@ -18470,7 +18416,7 @@ __metadata: languageName: node linkType: hard -"shell-quote@npm:^1.4.1, shell-quote@npm:^1.7.3": +"shell-quote@npm:^1.4.1": version: 1.8.2 resolution: "shell-quote@npm:1.8.2" checksum: 10c0/85fdd44f2ad76e723d34eb72c753f04d847ab64e9f1f10677e3f518d0e5b0752a176fd805297b30bb8c3a1556ebe6e77d2288dbd7b7b0110c7e941e9e9c20ce1 @@ -20515,17 +20461,6 @@ __metadata: languageName: node linkType: hard -"which@npm:^5.0.0": - version: 5.0.0 - resolution: "which@npm:5.0.0" - dependencies: - isexe: "npm:^3.1.1" - bin: - node-which: bin/which.js - checksum: 10c0/e556e4cd8b7dbf5df52408c9a9dd5ac6518c8c5267c8953f5b0564073c66ed5bf9503b14d876d0e9c7844d4db9725fb0dcf45d6e911e17e26ab363dc3965ae7b - languageName: node - linkType: hard - "word-wrap@npm:^1.2.5": version: 1.2.5 resolution: "word-wrap@npm:1.2.5" From 6938024b9b79da9732ff17149abfcff5cb4227ed Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt Date: Thu, 27 Feb 2025 14:37:42 -0500 Subject: [PATCH 7/8] test: add plugin test cases --- plugins/postcss-rgb-mapping/expected/basic.css | 6 ++++++ plugins/postcss-rgb-mapping/expected/modern.css | 6 ++++++ plugins/postcss-rgb-mapping/fixtures/basic.css | 4 ++++ 3 files changed, 16 insertions(+) diff --git a/plugins/postcss-rgb-mapping/expected/basic.css b/plugins/postcss-rgb-mapping/expected/basic.css index 52ba4935e09..8a5d3f3f350 100644 --- a/plugins/postcss-rgb-mapping/expected/basic.css +++ b/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)); } diff --git a/plugins/postcss-rgb-mapping/expected/modern.css b/plugins/postcss-rgb-mapping/expected/modern.css index b9d0c06f3df..ed5f940769d 100644 --- a/plugins/postcss-rgb-mapping/expected/modern.css +++ b/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: 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)); } diff --git a/plugins/postcss-rgb-mapping/fixtures/basic.css b/plugins/postcss-rgb-mapping/fixtures/basic.css index 7fe19e1fed6..43a108d6c66 100644 --- a/plugins/postcss-rgb-mapping/fixtures/basic.css +++ b/plugins/postcss-rgb-mapping/fixtures/basic.css @@ -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); } From b4310e63bc11d9b071aa9371efe5bcb9979b53e4 Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt Date: Fri, 28 Feb 2025 11:58:50 -0500 Subject: [PATCH 8/8] docs: update README.md --- plugins/postcss-rgb-mapping/README.md | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/plugins/postcss-rgb-mapping/README.md b/plugins/postcss-rgb-mapping/README.md index 20036288b55..30e1f30c5d4 100644 --- a/plugins/postcss-rgb-mapping/README.md +++ b/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 @@ -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 + ); } ``` @@ -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) + ); } ```