Allow variants with slashes in the name (#10336)

* Check for full variant before checking for modifier

* Update changelog

CHANGELOG.md

@@ -38,6 +38,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix missing `blocklist` member in the `Config` type ([#10239](https://github.com/tailwindlabs/tailwindcss/pull/10239))
 - Escape group names in selectors ([#10276](https://github.com/tailwindlabs/tailwindcss/pull/10276))
 - Consider earlier variants before sorting functions ([#10288](https://github.com/tailwindlabs/tailwindcss/pull/10288))
+- Allow variants with slashes ([#10336](https://github.com/tailwindlabs/tailwindcss/pull/10336))
 
 ### Changed
 

src/lib/generateRules.js

@@ -153,7 +153,7 @@ function applyVariant(variant, matches, context) {
   // Retrieve "modifier"
   {
     let match = /(.*)\/(.*)$/g.exec(variant)
-    if (match) {
+    if (match && !context.variantMap.has(variant)) {
       variant = match[1]
       args.modifier = match[2]
 

tests/variants.test.js

@@ -1090,6 +1090,76 @@ test('variant functions returning arrays should output correct results when nest
   `)
 })
 
+test('variants with slashes in them work', () => {
+  let config = {
+    content: [
+      {
+        raw: html` <div class="ar-1/10:text-red-500">ar-1/10</div> `,
+      },
+    ],
+    theme: {
+      extend: {
+        screens: {
+          'ar-1/10': { raw: '(min-aspect-ratio: 1/10)' },
+        },
+      },
+    },
+    corePlugins: { preflight: false },
+  }
+
+  let input = css`
+    @tailwind utilities;
+  `
+
+  return run(input, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
+      @media (min-aspect-ratio: 1/10) {
+        .ar-1\/10\:text-red-500 {
+          --tw-text-opacity: 1;
+          color: rgb(239 68 68 / var(--tw-text-opacity));
+        }
+      }
+    `)
+  })
+})
+
+test('variants with slashes suspport modifiers', () => {
+  let config = {
+    content: [
+      {
+        raw: html` <div class="ar-1/10/20:text-red-500">ar-1/10</div> `,
+      },
+    ],
+    corePlugins: { preflight: false },
+    plugins: [
+      function ({ matchVariant }) {
+        matchVariant(
+          'ar',
+          (value, { modifier }) => {
+            return [`@media (min-aspect-ratio: ${value}) and (foo: ${modifier})`]
+          },
+          { values: { '1/10': '1/10' } }
+        )
+      },
+    ],
+  }
+
+  let input = css`
+    @tailwind utilities;
+  `
+
+  return run(input, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
+      @media (min-aspect-ratio: 1/10) and (foo: 20) {
+        .ar-1\/10\/20\:text-red-500 {
+          --tw-text-opacity: 1;
+          color: rgb(239 68 68 / var(--tw-text-opacity));
+        }
+      }
+    `)
+  })
+})
+
 test('arbitrary variant selectors should not re-order scrollbar pseudo classes', async () => {
   let config = {
     content: [