fix for no-css-tagged-template linting rule (#1537)

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

* Add changeset

Author: liamqma

.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.

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')"
+        });
+      `,
+    },
   ]),
 });

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) {