Error when dash is used as custom separator (#4704)

tailwindlabs · Jun 18, 2021 · 1d72dc2 · 1d72dc2 · harvanchik · Jun 19, 2021
1 parent ff14cb5
commit 1d72dc2
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 0 deletions.
diff --git a/src/jit/processTailwindFeatures.js b/src/jit/processTailwindFeatures.js
@@ -35,6 +35,12 @@ export default function processTailwindFeatures(setupContext) {
       },
     })(root, result)
 
+    if (context.tailwindConfig.separator === '-') {
+      throw new Error(
+        "The '-' character cannot be used as a custom separator in JIT mode due to parsing ambiguity. Please use another character like '_' instead."
+      )
+    }
+
     expandTailwindAtRules(context)(root, result)
     expandApplyAtRules(context)(root, result)
     evaluateTailwindFunctions(context)(root, result)

diff --git a/tests/jit/custom-separator.test.js b/tests/jit/custom-separator.test.js
@@ -29,3 +29,21 @@ test('custom separator', () => {
     expect(result.css).toMatchFormattedCss(expected)
   })
 })
+
+test('dash is not supported', () => {
+  let config = {
+    darkMode: 'class',
+    mode: 'jit',
+    purge: [{ raw: 'lg-hover-font-bold' }],
+    separator: '-',
+    corePlugins: {},
+    theme: {},
+    plugins: [],
+  }
+
+  let css = `@tailwind utilities`
+
+  return expect(run(css, config)).rejects.toThrowError(
+    "The '-' character cannot be used as a custom separator in JIT mode due to parsing ambiguity. Please use another character like '_' instead."
+  )
+})