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
tailwindlabs · Apr 30, 2021 · 44eddad · 44eddad
1 parent 3843700
commit 44eddad
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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>