Handle theme keys with slashes when using theme() in CSS (#8831)

* Fix lookup of `theme(…)` paths with slashes in them

* Update changelog

src/lib/evaluateTailwindFunctions.js

@@ -157,26 +157,52 @@ let nodeTypePropertyMap = {
   decl: 'value',
 }
 
+/**
+ * @param {string} path
+ * @returns {Iterable<[path: string, alpha: string|undefined]>}
+ */
+function* toPaths(path) {
+  // Strip quotes from beginning and end of string
+  // This allows the alpha value to be present inside of quotes
+  path = path.replace(/^['"]+|['"]+$/g, '')
+
+  let matches = path.match(/^([^\s]+)(?![^\[]*\])(?:\s*\/\s*([^\/\s]+))$/)
+  let alpha = undefined
+
+  yield [path, undefined]
+
+  if (matches) {
+    path = matches[1]
+    alpha = matches[2]
+
+    yield [path, alpha]
+  }
+}
+
+/**
+ *
+ * @param {any} config
+ * @param {string} path
+ * @param {any} defaultValue
+ */
+function resolvePath(config, path, defaultValue) {
+  const results = Array.from(toPaths(path)).map(([path, alpha]) => {
+    return Object.assign(validatePath(config, path, defaultValue, { opacityValue: alpha }), {
+      resolvedPath: path,
+      alpha,
+    })
+  })
+
+  return results.find((result) => result.isValid) ?? results[0]
+}
+
 export default function ({ tailwindConfig: config }) {
   let functions = {
     theme: (node, path, ...defaultValue) => {
-      // Strip quotes from beginning and end of string
-      // This allows the alpha value to be present inside of quotes
-      path = path.replace(/^['"]+|['"]+$/g, '')
-
-      let matches = path.match(/^([^\s]+)(?![^\[]*\])(?:\s*\/\s*([^\/\s]+))$/)
-      let alpha = undefined
-
-      if (matches) {
-        path = matches[1]
-        alpha = matches[2]
-      }
-
-      let { isValid, value, error } = validatePath(
+      let { isValid, value, error, alpha } = resolvePath(
         config,
         path,
-        defaultValue.length ? defaultValue : undefined,
-        { opacityValue: alpha }
+        defaultValue.length ? defaultValue : undefined
       )
 
       if (!isValid) {