From bee59a76d7dd3312e046caabe97659f2fa495cca Mon Sep 17 00:00:00 2001
From: Tom Pietrosanti <tom.pietrosanti@gmail.com>
Date: Wed, 8 May 2024 21:33:44 -0400
Subject: [PATCH] fix: color filter now skips invalid colors (#995)

---
 .changeset/rude-falcons-dream.md    |  5 +++
 __tests__/common/transforms.test.js | 55 ++++++++++++++++++++++++++++-
 lib/common/transforms.js            |  4 +--
 3 files changed, 61 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/rude-falcons-dream.md

diff --git a/.changeset/rude-falcons-dream.md b/.changeset/rude-falcons-dream.md
new file mode 100644
index 000000000..e5ae52e1a
--- /dev/null
+++ b/.changeset/rude-falcons-dream.md
@@ -0,0 +1,5 @@
+---
+'style-dictionary': patch
+---
+
+Colors that are not recognized by tinycolor2 as valid color formats (e.g. `linear-gradient(...)`) are now ignored by the builtin color transforms filter functions.
diff --git a/__tests__/common/transforms.test.js b/__tests__/common/transforms.test.js
index dd1802b0a..354fd99b9 100644
--- a/__tests__/common/transforms.test.js
+++ b/__tests__/common/transforms.test.js
@@ -13,7 +13,7 @@
 import { expect } from 'chai';
 import { join } from 'path-unified';
 import Color from 'tinycolor2';
-import transforms from '../../lib/common/transforms.js';
+import transforms, { isColor } from '../../lib/common/transforms.js';
 
 describe('common', () => {
   describe('transforms', () => {
@@ -1064,4 +1064,57 @@ describe('common', () => {
       });
     });
   });
+
+  describe('transform filters', () => {
+    describe('isColor', () => {
+      it('should match short hex colors', () => {
+        expect(isColor({ type: 'color', value: '369' })).to.be.true;
+        expect(isColor({ type: 'color', value: '#369' })).to.be.true;
+      });
+
+      it('should match standard hex colors', () => {
+        expect(isColor({ type: 'color', value: 'e66465' })).to.be.true;
+        expect(isColor({ type: 'color', value: '#e66465' })).to.be.true;
+      });
+
+      it('should match 8-digit hex colors', () => {
+        expect(isColor({ type: 'color', value: 'e66465FF' })).to.be.true;
+        expect(isColor({ type: 'color', value: '#e66465FF' })).to.be.true;
+      });
+
+      it('should match legacy rgb/rgba colors', () => {
+        expect(isColor({ type: 'color', value: 'rgb(132, 99, 255)' })).to.be.true;
+        expect(isColor({ type: 'color', value: 'rgb(132, 99, 255, 0.5)' })).to.be.true;
+        expect(isColor({ type: 'color', value: 'rgba(132, 99, 255, 0.5)' })).to.be.true;
+      });
+
+      it('should match rgb colors', () => {
+        expect(isColor({ type: 'color', value: 'rgb(132 99 255)' })).to.be.true;
+        expect(isColor({ type: 'color', value: 'rgb(132 99 255 / .5)' })).to.be.true;
+        expect(isColor({ type: 'color', value: 'rgb(132 99 255 / 50%)' })).to.be.true;
+      });
+
+      it('should match legacy hsl/hsla colors', () => {
+        expect(isColor({ type: 'color', value: 'hsl(30, 100%, 50%, 0.6)' })).to.be.true;
+        expect(isColor({ type: 'color', value: 'hsla(30, 100%, 50%, 0.6)' })).to.be.true;
+      });
+
+      it('should match hsl colors', () => {
+        expect(isColor({ type: 'color', value: 'hsl(30 100% 50% / .6)' })).to.be.true;
+        expect(isColor({ type: 'color', value: 'hsl(30.2 100% 50% / 60%)' })).to.be.true;
+      });
+
+      it('should match named colors', () => {
+        expect(isColor({ type: 'color', value: 'red' })).to.be.true;
+      });
+
+      it('should ignore gradients', () => {
+        expect(isColor({ type: 'color', value: 'linear-gradient(#e66465, #9198e5)' })).to.be.false;
+      });
+
+      it('should ignore values that cannot convert to a color', () => {
+        expect(isColor({ type: 'color', value: 'currentColor' })).to.be.false;
+      });
+    });
+  });
 });
diff --git a/lib/common/transforms.js b/lib/common/transforms.js
index 51ac18822..ecf19e7f0 100644
--- a/lib/common/transforms.js
+++ b/lib/common/transforms.js
@@ -37,8 +37,8 @@ const camelOpts = {
  * @param {Token} token
  * @returns {boolean}
  */
-function isColor(token) {
-  return token.type === 'color';
+export function isColor(token) {
+  return token.type === 'color' && Color(token.$value ?? token.value).isValid();
 }
 
 /**