From 7aa2d4ddf3e755a24123a6d3157a32b7bffea7d8 Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Thu, 9 Jun 2022 14:09:57 -0400
Subject: [PATCH] =?UTF-8?q?Don=E2=80=99t=20clip=20slashes=20inside=20brack?=
 =?UTF-8?q?ets=20when=20using=20the=20theme=20function=20(#8563)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/evaluateTailwindFunctions.js    |  2 +-
 tests/evaluateTailwindFunctions.test.js | 31 +++++++++++++++++++++++
 tests/opacity.test.js                   | 33 +++++++++++++++++++++++++
 3 files changed, 65 insertions(+), 1 deletion(-)

diff --git a/src/lib/evaluateTailwindFunctions.js b/src/lib/evaluateTailwindFunctions.js
index 2b755394cbd0..4239d411cb17 100644
--- 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) {
diff --git a/tests/evaluateTailwindFunctions.test.js b/tests/evaluateTailwindFunctions.test.js
index d14e95e85ce3..657cb35b5849 100644
--- 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
index 38ea4ab44142..7215d14db332 100644
--- 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%);
+      }
+    `)
+  })
+})