From 941a723f3a49877d927986d3afe3be8bc359074c Mon Sep 17 00:00:00 2001
From: Liam Ma <liam.q.ma@gmail.com>
Date: Tue, 24 Oct 2023 16:40:24 +1100
Subject: [PATCH] fix for no-css-tagged-template linting rule (#1537)

* fix for no-css-tagged-template linting rule

* Add changeset
---
 .changeset/cold-chairs-float.md                 |  6 ++++++
 .../__tests__/rule.test.ts                      | 17 +++++++++++++++++
 .../to-arguments.ts                             |  6 +++++-
 3 files changed, 28 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/cold-chairs-float.md

diff --git a/.changeset/cold-chairs-float.md b/.changeset/cold-chairs-float.md
new file mode 100644
index 000000000..e2e3635b4
--- /dev/null
+++ b/.changeset/cold-chairs-float.md
@@ -0,0 +1,6 @@
+---
+'@compiled/eslint-plugin': patch
+'@compiled/webpack-loader': patch
+---
+
+Bugfix: no-css-tagged-template-expression ESLint rule truncates strings which include colons during autofixing.
diff --git a/packages/eslint-plugin/src/rules/no-css-tagged-template-expression/__tests__/rule.test.ts b/packages/eslint-plugin/src/rules/no-css-tagged-template-expression/__tests__/rule.test.ts
index 78a8bb785..16e726d4b 100644
--- a/packages/eslint-plugin/src/rules/no-css-tagged-template-expression/__tests__/rule.test.ts
+++ b/packages/eslint-plugin/src/rules/no-css-tagged-template-expression/__tests__/rule.test.ts
@@ -612,5 +612,22 @@ tester.run('no-css-tagged-template-expression', noCssTaggedTemplateExpressionRul
         \`;
       `,
     },
+    {
+      filename: 'colon-in-value.ts',
+      code: `
+        import { css } from '@compiled/react';
+
+        css\`
+          background-image: url('https://some-url-b');
+        \`;
+      `,
+      output: `
+        import { css } from '@compiled/react';
+
+        css({
+          backgroundImage: "url('https://some-url-b')"
+        });
+      `,
+    },
   ]),
 });
diff --git a/packages/eslint-plugin/src/utils/create-no-tagged-template-expression-rule/to-arguments.ts b/packages/eslint-plugin/src/utils/create-no-tagged-template-expression-rule/to-arguments.ts
index 327a35232..4cf7cf77b 100644
--- a/packages/eslint-plugin/src/utils/create-no-tagged-template-expression-rule/to-arguments.ts
+++ b/packages/eslint-plugin/src/utils/create-no-tagged-template-expression-rule/to-arguments.ts
@@ -25,7 +25,11 @@ const getArguments = (
     return args;
   }
 
-  const [property, value] = chars.split(':');
+  // Split the property and value
+  // e.g. `color: red` becomes ['color', 'red']
+  // also consider `background: url("https://some-url-b")`, which has a colon in the value.
+  const [property, ...v] = chars.split(':');
+  const value = v.join(':');
 
   // Extract any expressions listed before the property that were not delimited by a ;
   if (expressions.length) {