Fix support for slashes in arbitrary modifiers

Author: thecrypticace

src/util/pluginUtils.js

@@ -88,6 +88,18 @@ function isArbitraryValue(input) {
 function splitUtilityModifier(modifier) {
   let slashIdx = modifier.lastIndexOf('/')
 
+  // If the `/` is inside an arbitrary, we want to find the previous one if any
+  // This logic probably isn't perfect but it should work for most cases
+  let arbitraryStartIdx = modifier.lastIndexOf('[', slashIdx)
+  let arbitraryEndIdx = modifier.indexOf(']', slashIdx)
+
+  // Backtrack to the previous `/` if the one we found was inside an arbitrary
+  if (arbitraryStartIdx !== -1 && arbitraryEndIdx !== -1) {
+    if (arbitraryStartIdx < slashIdx && slashIdx < arbitraryEndIdx) {
+      slashIdx = modifier.lastIndexOf('/', arbitraryStartIdx)
+    }
+  }
+
   if (slashIdx === -1 || slashIdx === modifier.length - 1) {
     return [modifier, undefined]
   }

tests/arbitrary-values.test.js

@@ -652,6 +652,21 @@ crosscheck(({ stable, oxide }) => {
       `)
     })
   })
+
+  it('should support slashes in arbitrary modifiers', () => {
+    let config = {
+      content: [{ raw: html`<div class="text-lg/[calc(50px/2)]"></div>` }],
+    }
+
+    return run('@tailwind utilities', config).then((result) => {
+      return expect(result.css).toMatchFormattedCss(css`
+        .text-lg\/\[calc\(50px\/2\)\] {
+          font-size: 1.125rem;
+          line-height: calc(50px / 2);
+        }
+      `)
+    })
+  })
 })
 
 it('should not insert spaces around operators inside `env()`', () => {