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

Author: bradlc

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) || []

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;

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>