From 44eddadf1861c01e00347b3652c5c099d9461a38 Mon Sep 17 00:00:00 2001
From: Brad Cornes <bradlc41@gmail.com>
Date: Fri, 30 Apr 2021 13:59:04 +0100
Subject: [PATCH] Account for Svelte class bindings at the start of a line
 (#4187)

* add failing svelte syntax test case

* account for svelte class bindings at the start of a line
---
 jit/lib/expandTailwindAtRules.js    | 2 +-
 jit/tests/svelte-syntax.test.css    | 4 ++++
 jit/tests/svelte-syntax.test.svelte | 6 ++++++
 3 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/jit/lib/expandTailwindAtRules.js b/jit/lib/expandTailwindAtRules.js
index 75e015accde9..5ed97751c4f3 100644
--- a/jit/lib/expandTailwindAtRules.js
+++ b/jit/lib/expandTailwindAtRules.js
@@ -15,7 +15,7 @@ const INNER_MATCH_GLOBAL_REGEXP = /[^<>"'`\s.(){}[\]#=%]*[^<>"'`\s.(){}[\]#=%:]/
 function getDefaultExtractor(fileExtension) {
   return function (content) {
     if (fileExtension === 'svelte') {
-      content = content.replace(/\sclass:/g, ' ')
+      content = content.replace(/(?:^|\s)class:/g, ' ')
     }
     let broadMatches = content.match(BROAD_MATCH_GLOBAL_REGEXP) || []
     let innerMatches = content.match(INNER_MATCH_GLOBAL_REGEXP) || []
diff --git a/jit/tests/svelte-syntax.test.css b/jit/tests/svelte-syntax.test.css
index d8a61adfba75..c95fe681432e 100644
--- a/jit/tests/svelte-syntax.test.css
+++ b/jit/tests/svelte-syntax.test.css
@@ -7,6 +7,10 @@
   --tw-ring-offset-shadow: 0 0 #0000;
   --tw-ring-shadow: 0 0 #0000;
 }
+.bg-red-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(239, 68, 68, var(--tw-bg-opacity));
+}
 @media (min-width: 1024px) {
   .lg\:hover\:bg-blue-500:hover {
     --tw-bg-opacity: 1;
diff --git a/jit/tests/svelte-syntax.test.svelte b/jit/tests/svelte-syntax.test.svelte
index a0d4e776c8b5..5a6ea3135061 100644
--- a/jit/tests/svelte-syntax.test.svelte
+++ b/jit/tests/svelte-syntax.test.svelte
@@ -3,3 +3,9 @@
 </script>
 
 <button class:lg:hover:bg-blue-500={current === 'foo'}>Click me</button>
+
+<button
+  class:bg-red-500={current === 'foo'}
+>
+  Click me
+</button>