From cfc0c3d0de9c06e2ea10c2484fd24961b216337d Mon Sep 17 00:00:00 2001 From: Joren Broekema Date: Tue, 16 Jan 2024 10:41:44 +0100 Subject: [PATCH] fix: alpha percentage values in rgba(hex, alpha) color format (#249) --- .changeset/old-steaks-move.md | 5 +++++ package-lock.json | 12 ++++++------ package.json | 2 +- src/css/transformHEXRGBa.ts | 2 +- test/integration/sd-transforms.test.ts | 4 ++-- test/integration/tokens/sd-transforms.tokens.json | 2 +- test/spec/css/transformHEXRGBa.spec.ts | 6 ++++++ 7 files changed, 22 insertions(+), 11 deletions(-) create mode 100644 .changeset/old-steaks-move.md diff --git a/.changeset/old-steaks-move.md b/.changeset/old-steaks-move.md new file mode 100644 index 0000000..cab4231 --- /dev/null +++ b/.changeset/old-steaks-move.md @@ -0,0 +1,5 @@ +--- +'@tokens-studio/sd-transforms': patch +--- + +Fix rgba(hex, alpha) regex to allow percentages, add more tests for different types of alpha values. diff --git a/package-lock.json b/package-lock.json index b504bbf..d3cbb0e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@tokens-studio/sd-transforms", - "version": "0.13.0", + "version": "0.13.2", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@tokens-studio/sd-transforms", - "version": "0.13.0", + "version": "0.13.2", "license": "MIT", "dependencies": { "@tokens-studio/types": "^0.2.4", @@ -16,7 +16,7 @@ "expr-eval-fork": "^2.0.2", "is-mergeable-object": "^1.1.1", "postcss-calc-ast-parser": "^0.1.4", - "style-dictionary": "4.0.0-prerelease.7" + "style-dictionary": "4.0.0-prerelease.8" }, "devDependencies": { "@changesets/cli": "^2.26.0", @@ -9654,9 +9654,9 @@ } }, "node_modules/style-dictionary": { - "version": "4.0.0-prerelease.7", - "resolved": "https://registry.npmjs.org/style-dictionary/-/style-dictionary-4.0.0-prerelease.7.tgz", - "integrity": "sha512-K5qpS1l/NUH1eV8+XCKVtXe5yrllHz0kbQZKnjcz0+5B8i+d4fhS+niuMJfKHjaE3v6WW1zfSKsXwU0Kr8AgZg==", + "version": "4.0.0-prerelease.8", + "resolved": "https://registry.npmjs.org/style-dictionary/-/style-dictionary-4.0.0-prerelease.8.tgz", + "integrity": "sha512-L+iLynBUAsIrNdT3nEvkuZlZ3ibZ+dT9CyPa6pfAf68hgnLErxFbmScbplt1suFnpiv6lLv2fmi3re2MnjqqqQ==", "hasInstallScript": true, "dependencies": { "@bundled-es-modules/deepmerge": "^4.3.1", diff --git a/package.json b/package.json index 50ce5a9..a88c839 100644 --- a/package.json +++ b/package.json @@ -46,7 +46,7 @@ "expr-eval-fork": "^2.0.2", "is-mergeable-object": "^1.1.1", "postcss-calc-ast-parser": "^0.1.4", - "style-dictionary": "4.0.0-prerelease.7" + "style-dictionary": "4.0.0-prerelease.8" }, "devDependencies": { "@changesets/cli": "^2.26.0", diff --git a/src/css/transformHEXRGBa.ts b/src/css/transformHEXRGBa.ts index 11bf511..eed99ad 100644 --- a/src/css/transformHEXRGBa.ts +++ b/src/css/transformHEXRGBa.ts @@ -10,7 +10,7 @@ export function transformHEXRGBaForCSS(value: string | undefined): string | unde return value; } - const regex = /rgba\(\s*(?#.+?)\s*,\s*(?[\d.]+)\s*\)/g; + const regex = /rgba\(\s*(?#.+?)\s*,\s*(?\d*(\.\d*|%)*)\s*\)/g; return value.replace(regex, (match, hex, alpha) => { try { diff --git a/test/integration/sd-transforms.test.ts b/test/integration/sd-transforms.test.ts index d324a9c..a834e11 100644 --- a/test/integration/sd-transforms.test.ts +++ b/test/integration/sd-transforms.test.ts @@ -54,7 +54,7 @@ describe('sd-transforms smoke tests', () => { --sdColorsBlack: #000000; --sdColorsWhite: #ffffff; --sdColorsBlue: #0000FF; - --sdColorsBlueAlpha: rgba(0, 0, 255, 0.5); + --sdColorsBlueAlpha: rgba(0, 0, 255, 50%); --sdColorsRed400: #f67474; --sdColorsRed500: #f56565; --sdColorsRed600: #dd5b5b; @@ -98,7 +98,7 @@ describe('sd-transforms smoke tests', () => { --sd-colors-black: #000000; --sd-colors-white: #ffffff; --sd-colors-blue: #0000FF; - --sd-colors-blue-alpha: rgba(0, 0, 255, 0.5); + --sd-colors-blue-alpha: rgba(0, 0, 255, 50%); --sd-colors-red-400: #f67474; --sd-colors-red-500: #f56565; --sd-colors-red-600: #dd5b5b; diff --git a/test/integration/tokens/sd-transforms.tokens.json b/test/integration/tokens/sd-transforms.tokens.json index 1fd644e..db3850f 100644 --- a/test/integration/tokens/sd-transforms.tokens.json +++ b/test/integration/tokens/sd-transforms.tokens.json @@ -58,7 +58,7 @@ "type": "color" }, "blue-alpha": { - "value": "rgba({colors.blue}, 0.5)", + "value": "rgba({colors.blue}, 50%)", "type": "color" }, "red": { diff --git a/test/spec/css/transformHEXRGBa.spec.ts b/test/spec/css/transformHEXRGBa.spec.ts index 65aa732..ed80758 100644 --- a/test/spec/css/transformHEXRGBa.spec.ts +++ b/test/spec/css/transformHEXRGBa.spec.ts @@ -7,6 +7,12 @@ runTransformSuite(transformHEXRGBaForCSS as (value: unknown) => unknown); describe('transform HEXRGBa', () => { it("transforms Figma's hex code RGBA to actual RGBA format", () => { expect(transformHEXRGBaForCSS('rgba(#ABC123, 0.5)')).to.equal('rgba(171, 193, 35, 0.5)'); + expect(transformHEXRGBaForCSS('rgba(#ABC123, 1)')).to.equal('rgba(171, 193, 35, 1)'); + expect(transformHEXRGBaForCSS('rgba(#ABC123, 50%)')).to.equal('rgba(171, 193, 35, 50%)'); + expect(transformHEXRGBaForCSS('rgba(#ABC123, 1%)')).to.equal('rgba(171, 193, 35, 1%)'); + expect(transformHEXRGBaForCSS('rgba(#ABC123, 0.75666)')).to.equal( + 'rgba(171, 193, 35, 0.75666)', + ); }); it("transforms Figma's hex code RGBA to actual RGBA format regardless of whitespacing", () => {