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

Author: adamwathan

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)

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."
+  )
+})