Discard invalid variants and utilities with modifiers (tailwindlabs#13977)

* ensure that static utilities do not take a `modifier`

* do not allow multiple segments for now

Right now, `bg-red-1/2/3` should not parse

* add tests for variants that don't accept a modifier

* ensure static variants do not accept a modifier

* do not accept a modifier for some variants

* add tests for utilities that don't accept a modifier

* do not accept a modifier for some utilities

* update changelog

* re-add sorting related test

Author: RobinMalfait

CHANGELOG.md

@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Discard invalid classes such as `bg-red-[#000]` ([#13970](https://github.com/tailwindlabs/tailwindcss/pull/13970))
 - Fix parsing body-less at-rule without terminating semicolon ([#13978](https://github.com/tailwindlabs/tailwindcss/pull/13978))
 - Ensure opacity modifier with variables work with `color-mix()` ([#13972](https://github.com/tailwindlabs/tailwindcss/pull/13972))
+- Discard invalid `variants` and `utilities` with modifiers ([#13977](https://github.com/tailwindlabs/tailwindcss/pull/13977))
 
 ## [4.0.0-alpha.17] - 2024-07-04
 

packages/tailwindcss/src/candidate.test.ts

@@ -445,6 +445,27 @@ it('should not parse a partial utility', () => {
   expect(run('bg-', { utilities })).toMatchInlineSnapshot(`null`)
 })
 
+it('should not parse static utilities with a modifier', () => {
+  let utilities = new Utilities()
+  utilities.static('flex', () => [])
+
+  expect(run('flex/foo', { utilities })).toMatchInlineSnapshot(`null`)
+})
+
+it('should not parse static utilities with multiple modifiers', () => {
+  let utilities = new Utilities()
+  utilities.static('flex', () => [])
+
+  expect(run('flex/foo/bar', { utilities })).toMatchInlineSnapshot(`null`)
+})
+
+it('should not parse functional utilities with multiple modifiers', () => {
+  let utilities = new Utilities()
+  utilities.functional('bg', () => [])
+
+  expect(run('bg-red-1/2/3', { utilities })).toMatchInlineSnapshot(`null`)
+})
+
 it('should parse a utility with an arbitrary value', () => {
   let utilities = new Utilities()
   utilities.functional('bg', () => [])

packages/tailwindcss/src/candidate.ts

@@ -258,7 +258,14 @@ export function parseCandidate(input: string, designSystem: DesignSystem): Candi
   // ^^^^^^^^^^    -> Base without modifier
   //            ^^ -> Modifier segment
   // ```
-  let [baseWithoutModifier, modifierSegment = null] = segment(base, '/')
+  let [baseWithoutModifier, modifierSegment = null, additionalModifier] = segment(base, '/')
+
+  // If there's more than one modifier, the utility is invalid.
+  //
+  // E.g.:
+  //
+  // - `bg-red-500/50/50`
+  if (additionalModifier) return null
 
   // Arbitrary properties
   if (baseWithoutModifier[0] === '[') {
@@ -373,8 +380,12 @@ export function parseCandidate(input: string, designSystem: DesignSystem): Candi
   let kind = designSystem.utilities.kind(root)
 
   if (kind === 'static') {
+    // Static utilities do not have a value
     if (value !== null) return null
 
+    // Static utilities do not have a modifier
+    if (modifierSegment !== null) return null
+
     return {
       kind: 'static',
       root,
@@ -557,8 +568,12 @@ export function parseVariant(variant: string, designSystem: DesignSystem): Varia
 
     switch (designSystem.variants.kind(root)) {
       case 'static': {
+        // Static variants do not have a value
         if (value !== null) return null
 
+        // Static variants do not have a modifier
+        if (modifier !== null) return null
+
         return {
           kind: 'static',
           root,