Ensure dashes are allowed in variant modifiers (#13303)

* sync package-lock.json

* ensure dashes are allowed in variant modifiers

* update changelog

CHANGELOG.md

@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Split `:has` rules when using `experimental.optimizeUniversalDefaults` ([#12736](https://github.com/tailwindlabs/tailwindcss/pull/12736))
 - Sort arbitrary properties alphabetically across multiple class lists ([#12911](https://github.com/tailwindlabs/tailwindcss/pull/12911))
 - Add `mix-blend-plus-darker` utility ([#12923](https://github.com/tailwindlabs/tailwindcss/pull/12923))
+- Ensure dashes are allowed in variant modifiers ([#13303](https://github.com/tailwindlabs/tailwindcss/pull/13303))
 
 ## [3.4.1] - 2024-01-05
 

src/lib/defaultExtractor.js

@@ -96,7 +96,7 @@ function* buildRegExps(context) {
       regex.pattern([/@\[[^\s"'`]+\](\/[^\s"'`]+)?/, separator]),
 
       // With variant modifier (e.g.: group-[..]/modifier)
-      regex.pattern([/([^\s"'`\[\\]+-)?\[[^\s"'`]+\]\/\w+/, separator]),
+      regex.pattern([/([^\s"'`\[\\]+-)?\[[^\s"'`]+\]\/[\w_-]+/, separator]),
 
       regex.pattern([/([^\s"'`\[\\]+-)?\[[^\s"'`]+\]/, separator]),
       regex.pattern([/[^\s"'`\[\\]+/, separator]),
@@ -105,7 +105,7 @@ function* buildRegExps(context) {
     // With quotes allowed
     regex.any([
       // With variant modifier (e.g.: group-[..]/modifier)
-      regex.pattern([/([^\s"'`\[\\]+-)?\[[^\s`]+\]\/\w+/, separator]),
+      regex.pattern([/([^\s"'`\[\\]+-)?\[[^\s`]+\]\/[\w_-]+/, separator]),
 
       regex.pattern([/([^\s"'`\[\\]+-)?\[[^\s`]+\]/, separator]),
       regex.pattern([/[^\s`\[\\]+/, separator]),

tests/variants.test.js

@@ -283,6 +283,26 @@ crosscheck(({ stable, oxide }) => {
         "Your custom variant `wtf-bbq` has an invalid format string. Make sure it's an at-rule or contains a `&` placeholder."
       )
     })
+
+    it('should allow modifiers with dashes', () => {
+      let config = {
+        content: [
+          {
+            raw: html`<div class="group-has-[[data-test=test]]/test-modifier:block"></div>`,
+          },
+        ],
+        plugins: [],
+      }
+
+      return run('@tailwind utilities', config).then((result) => {
+        return expect(result.css).toMatchFormattedCss(css`
+          .group\/test-modifier:has([data-test='test'])
+            .group-has-\[\[data-test\=test\]\]\/test-modifier\:block {
+            display: block;
+          }
+        `)
+      })
+    })
   })
 
   test('stacked peer variants', async () => {