From 34e5bd35e462fc9139995bcd462a51056e6c62c6 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Mon, 29 Mar 2021 08:58:02 -0400
Subject: [PATCH] Support Svelte 'class:' syntax

---
 src/lib/expandTailwindAtRules.js | 19 ++++++++++++-------
 tests/svelte-syntax.test.css     | 15 +++++++++++++++
 tests/svelte-syntax.test.js      | 30 ++++++++++++++++++++++++++++++
 tests/svelte-syntax.test.svelte  |  5 +++++
 4 files changed, 62 insertions(+), 7 deletions(-)
 create mode 100644 tests/svelte-syntax.test.css
 create mode 100644 tests/svelte-syntax.test.js
 create mode 100644 tests/svelte-syntax.test.svelte

diff --git a/src/lib/expandTailwindAtRules.js b/src/lib/expandTailwindAtRules.js
index c03e05b..75e015a 100644
--- a/src/lib/expandTailwindAtRules.js
+++ b/src/lib/expandTailwindAtRules.js
@@ -12,21 +12,26 @@ let contentMatchCache = sharedState.contentMatchCache
 const BROAD_MATCH_GLOBAL_REGEXP = /[^<>"'`\s]*[^<>"'`\s:]/g
 const INNER_MATCH_GLOBAL_REGEXP = /[^<>"'`\s.(){}[\]#=%]*[^<>"'`\s.(){}[\]#=%:]/g
 
-function defaultJitExtractor(content) {
-  let broadMatches = content.match(BROAD_MATCH_GLOBAL_REGEXP) || []
-  let innerMatches = content.match(INNER_MATCH_GLOBAL_REGEXP) || []
+function getDefaultExtractor(fileExtension) {
+  return function (content) {
+    if (fileExtension === 'svelte') {
+      content = content.replace(/\sclass:/g, ' ')
+    }
+    let broadMatches = content.match(BROAD_MATCH_GLOBAL_REGEXP) || []
+    let innerMatches = content.match(INNER_MATCH_GLOBAL_REGEXP) || []
 
-  return [...broadMatches, ...innerMatches]
+    return [...broadMatches, ...innerMatches]
+  }
 }
 
 function getExtractor(fileName, tailwindConfig) {
   const purgeOptions = tailwindConfig && tailwindConfig.purge && tailwindConfig.purge.options
+  const fileExtension = path.extname(fileName).slice(1)
 
   if (!purgeOptions) {
-    return defaultJitExtractor
+    return getDefaultExtractor(fileExtension)
   }
 
-  const fileExtension = path.extname(fileName).slice(1)
   const fileSpecificExtractor = (purgeOptions.extractors || []).find((extractor) =>
     extractor.extensions.includes(fileExtension)
   )
@@ -35,7 +40,7 @@ function getExtractor(fileName, tailwindConfig) {
     return fileSpecificExtractor.extractor
   }
 
-  return purgeOptions.defaultExtractor || defaultJitExtractor
+  return purgeOptions.defaultExtractor || getDefaultExtractor(fileExtension)
 }
 
 // Scans template contents for possible classes. This is a hot path on initial build but
diff --git a/tests/svelte-syntax.test.css b/tests/svelte-syntax.test.css
new file mode 100644
index 0000000..d8a61ad
--- /dev/null
+++ b/tests/svelte-syntax.test.css
@@ -0,0 +1,15 @@
+* {
+  --tw-shadow: 0 0 #0000;
+  --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgba(59, 130, 246, 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+}
+@media (min-width: 1024px) {
+  .lg\:hover\:bg-blue-500:hover {
+    --tw-bg-opacity: 1;
+    background-color: rgba(59, 130, 246, var(--tw-bg-opacity));
+  }
+}
diff --git a/tests/svelte-syntax.test.js b/tests/svelte-syntax.test.js
new file mode 100644
index 0000000..2d4418e
--- /dev/null
+++ b/tests/svelte-syntax.test.js
@@ -0,0 +1,30 @@
+const postcss = require('postcss')
+const tailwind = require('../src/index.js')
+const fs = require('fs')
+const path = require('path')
+
+function run(input, config = {}) {
+  return postcss([tailwind(config)]).process(input, { from: path.resolve(__filename) })
+}
+
+test('basic usage', () => {
+  let config = {
+    purge: [path.resolve(__dirname, './svelte-syntax.test.svelte')],
+    corePlugins: { preflight: false },
+    theme: {},
+    plugins: [],
+  }
+
+  let css = `
+    @tailwind base;
+    @tailwind components;
+    @tailwind utilities;
+  `
+
+  return run(css, config).then((result) => {
+    let expectedPath = path.resolve(__dirname, './svelte-syntax.test.css')
+    let expected = fs.readFileSync(expectedPath, 'utf8')
+
+    expect(result.css).toMatchCss(expected)
+  })
+})
diff --git a/tests/svelte-syntax.test.svelte b/tests/svelte-syntax.test.svelte
new file mode 100644
index 0000000..a0d4e77
--- /dev/null
+++ b/tests/svelte-syntax.test.svelte
@@ -0,0 +1,5 @@
+<script>
+  let current = 'foo'
+</script>
+
+<button class:lg:hover:bg-blue-500={current === 'foo'}>Click me</button>