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
 

package-lock.json

@@ -93,7 +93,7 @@
       "name": "@tailwindcss/integrations-rollup",
       "version": "0.0.0",
       "devDependencies": {
-        "rollup": "4.13.0",
+        "rollup": "^4.13.0",
         "rollup-plugin-postcss": "^4.0.2"
       }
     },
@@ -101,7 +101,7 @@
       "name": "@tailwindcss/integrations-rollup-sass",
       "version": "0.0.0",
       "devDependencies": {
-        "rollup": "4.13.0",
+        "rollup": "^4.13.0",
         "rollup-plugin-postcss": "^4.0.2",
         "sass": "^1.72.0"
       }
@@ -182,7 +182,7 @@
       "version": "0.0.0",
       "devDependencies": {
         "isomorphic-fetch": "^3.0.0",
-        "vite": "5.1.6"
+        "vite": "^5.1.6"
       }
     },
     "integrations/webpack-4": {
@@ -13699,22 +13699,6 @@
         "inherits": "^2.0.1"
       }
     },
-    "node_modules/rollup": {
-      "version": "3.21.0",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.21.0.tgz",
-      "integrity": "sha512-ANPhVcyeHvYdQMUyCbczy33nbLzI7RzrBje4uvNiTDJGIMtlKoOStmympwr9OtS1LZxiDmE2wvxHyVhoLtf1KQ==",
-      "dev": true,
-      "bin": {
-        "rollup": "dist/bin/rollup"
-      },
-      "engines": {
-        "node": ">=14.18.0",
-        "npm": ">=8.0.0"
-      },
-      "optionalDependencies": {
-        "fsevents": "~2.3.2"
-      }
-    },
     "node_modules/rollup-plugin-postcss": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/rollup-plugin-postcss/-/rollup-plugin-postcss-4.0.2.tgz",
@@ -19922,7 +19906,7 @@
     "@tailwindcss/integrations-rollup": {
       "version": "file:integrations/rollup",
       "requires": {
-        "rollup": "4.13.0",
+        "rollup": "^4.13.0",
         "rollup-plugin-postcss": "^4.0.2"
       },
       "dependencies": {
@@ -19954,7 +19938,7 @@
     "@tailwindcss/integrations-rollup-sass": {
       "version": "file:integrations/rollup-sass",
       "requires": {
-        "rollup": "4.13.0",
+        "rollup": "^4.13.0",
         "rollup-plugin-postcss": "^4.0.2",
         "sass": "^1.72.0"
       },
@@ -19994,7 +19978,7 @@
       "version": "file:integrations/vite",
       "requires": {
         "isomorphic-fetch": "^3.0.0",
-        "vite": "5.1.6"
+        "vite": "^5.1.6"
       }
     },
     "@tailwindcss/integrations-webpack-4": {
@@ -27068,15 +27052,6 @@
         "inherits": "^2.0.1"
       }
     },
-    "rollup": {
-      "version": "3.21.0",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.21.0.tgz",
-      "integrity": "sha512-ANPhVcyeHvYdQMUyCbczy33nbLzI7RzrBje4uvNiTDJGIMtlKoOStmympwr9OtS1LZxiDmE2wvxHyVhoLtf1KQ==",
-      "dev": true,
-      "requires": {
-        "fsevents": "~2.3.2"
-      }
-    },
     "rollup-plugin-postcss": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/rollup-plugin-postcss/-/rollup-plugin-postcss-4.0.2.tgz",
@@ -30852,7 +30827,7 @@
         "@tailwindcss/integrations-rollup": {
           "version": "file:integrations/rollup",
           "requires": {
-            "rollup": "4.13.0",
+            "rollup": "^4.13.0",
             "rollup-plugin-postcss": "^4.0.2"
           },
           "dependencies": {
@@ -30884,7 +30859,7 @@
         "@tailwindcss/integrations-rollup-sass": {
           "version": "file:integrations/rollup-sass",
           "requires": {
-            "rollup": "4.13.0",
+            "rollup": "^4.13.0",
             "rollup-plugin-postcss": "^4.0.2",
             "sass": "^1.72.0"
           },
@@ -30924,7 +30899,7 @@
           "version": "file:integrations/vite",
           "requires": {
             "isomorphic-fetch": "^3.0.0",
-            "vite": "5.1.6"
+            "vite": "^5.1.6"
           }
         },
         "@tailwindcss/integrations-webpack-4": {
@@ -37998,15 +37973,6 @@
             "inherits": "^2.0.1"
           }
         },
-        "rollup": {
-          "version": "3.21.0",
-          "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.21.0.tgz",
-          "integrity": "sha512-ANPhVcyeHvYdQMUyCbczy33nbLzI7RzrBje4uvNiTDJGIMtlKoOStmympwr9OtS1LZxiDmE2wvxHyVhoLtf1KQ==",
-          "dev": true,
-          "requires": {
-            "fsevents": "~2.3.2"
-          }
-        },
         "rollup-plugin-postcss": {
           "version": "4.0.2",
           "resolved": "https://registry.npmjs.org/rollup-plugin-postcss/-/rollup-plugin-postcss-4.0.2.tgz",

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 () => {