Repository: tailwindlabs/tailwindcss (TypeScript)

Issue:
3.1.0 "unbalanced brackets" error when using theme function with bracket notation
**What version of Tailwind CSS are you using?**

v3.1.0

**What build tool (or framework if it abstracts the build tool) are you using?**

- laravel-mix 6.0.49
- play.tailwindcss.com

**What version of Node.js are you using?**

v18.3.0

**What browser are you using?**

N/A

**What operating system are you using?**

macOS

**Reproduction URL**

https://play.tailwindcss.com/kLuW3Vrpv6?file=css

**Describe your issue**

In Tailwindcss `v3.1.0` this css
```css
.test-width {
  width: theme('width[1/12]');
}
```
give this error:
`Error: Path is invalid. Has unbalanced brackets: width['1`

while in Tailwindcss `v3.0.24` it compiles correctly to
```css
.test-width {
  width: 8.33333%;
}
```


Hints:

Patch:
diff --git a/src/lib/evaluateTailwindFunctions.js b/src/lib/evaluateTailwindFunctions.js
--- a/src/lib/evaluateTailwindFunctions.js
+++ b/src/lib/evaluateTailwindFunctions.js
@@ -162,7 +162,7 @@ let nodeTypePropertyMap = {
 export default function ({ tailwindConfig: config }) {
   let functions = {
     theme: (node, path, ...defaultValue) => {
-      let matches = path.match(/^([^\/\s]+)(?:\s*\/\s*([^\/\s]+))$/)
+      let matches = path.match(/^([^\s]+)(?![^\[]*\])(?:\s*\/\s*([^\/\s]+))$/)
       let alpha = undefined
 
       if (matches) {


Test patch:
diff --git a/tests/evaluateTailwindFunctions.test.js b/tests/evaluateTailwindFunctions.test.js
--- a/tests/evaluateTailwindFunctions.test.js
+++ b/tests/evaluateTailwindFunctions.test.js
@@ -1024,3 +1024,34 @@ test('Theme function can extract alpha values for colors (8)', () => {
     expect(result.warnings().length).toBe(0)
   })
 })
+
+test('Theme functions can reference values with slashes in brackets', () => {
+  let input = css`
+    .foo1 {
+      color: theme(colors[a/b]);
+    }
+    .foo2 {
+      color: theme(colors[a/b]/50%);
+    }
+  `
+
+  let output = css`
+    .foo1 {
+      color: #000000;
+    }
+    .foo2 {
+      color: rgb(0 0 0 / 50%);
+    }
+  `
+
+  return runFull(input, {
+    theme: {
+      colors: {
+        'a/b': '#000000',
+      },
+    },
+  }).then((result) => {
+    expect(result.css).toMatchCss(output)
+    expect(result.warnings().length).toBe(0)
+  })
+})
diff --git a/tests/opacity.test.js b/tests/opacity.test.js
--- a/tests/opacity.test.js
+++ b/tests/opacity.test.js
@@ -728,3 +728,36 @@ it('should be possible to use <alpha-value> inside arbitrary values', () => {
     `)
   })
 })
+
+it('Theme functions can reference values with slashes in brackets', () => {
+  let config = {
+    content: [
+      {
+        raw: html` <div class="bg-foo1 bg-foo2"></div> `,
+      },
+    ],
+    theme: {
+      colors: {
+        'a/b': '#000000',
+      },
+      extend: {
+        backgroundColor: ({ theme }) => ({
+          foo1: theme('colors[a/b]'),
+          foo2: theme('colors[a/b]/50%'),
+        }),
+      },
+    },
+  }
+
+  return run('@tailwind utilities', config).then((result) => {
+    expect(result.css).toMatchCss(css`
+      .bg-foo1 {
+        --tw-bg-opacity: 1;
+        background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+      }
+      .bg-foo2 {
+        background-color: rgb(0 0 0 / 50%);
+      }
+    `)
+  })
+})