Detect alpha value in CSS theme() function when using quotes (#8625)

* Allow alpha value inside quotes

* Optimize regex

* Add test

* Update changelog

Author: thecrypticace

CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix casing of import of `corePluginList` type definition ([#8587](https://github.com/tailwindlabs/tailwindcss/pull/8587))
 - Ignore PostCSS nodes returned by `addVariant` ([#8608](https://github.com/tailwindlabs/tailwindcss/pull/8608))
 - Fix missing spaces around arithmetic operators ([#8615](https://github.com/tailwindlabs/tailwindcss/pull/8615))
+- Detect alpha value in CSS `theme()` function when using quotes ([#8625](https://github.com/tailwindlabs/tailwindcss/pull/8625))
 
 ## [3.1.2] - 2022-06-10
 

src/lib/evaluateTailwindFunctions.js

@@ -40,9 +40,7 @@ function listKeys(obj) {
 }
 
 function validatePath(config, path, defaultValue, themeOpts = {}) {
-  const pathString = Array.isArray(path)
-    ? pathToString(path)
-    : path.replace(/^['"]+/g, '').replace(/['"]+$/g, '')
+  const pathString = Array.isArray(path) ? pathToString(path) : path.replace(/^['"]+|['"]+$/g, '')
   const pathSegments = Array.isArray(path) ? path : toPath(pathString)
   const value = dlv(config.theme, pathSegments, defaultValue)
 
@@ -162,6 +160,10 @@ let nodeTypePropertyMap = {
 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
 

tests/evaluateTailwindFunctions.test.js

@@ -1055,3 +1055,53 @@ test('Theme functions can reference values with slashes in brackets', () => {
     expect(result.warnings().length).toBe(0)
   })
 })
+
+test('Theme functions with alpha value inside quotes', () => {
+  let input = css`
+    .foo {
+      color: theme('colors.yellow / 50%');
+    }
+  `
+
+  let output = css`
+    .foo {
+      color: rgb(247 204 80 / 50%);
+    }
+  `
+
+  return runFull(input, {
+    theme: {
+      colors: {
+        yellow: '#f7cc50',
+      },
+    },
+  }).then((result) => {
+    expect(result.css).toMatchCss(output)
+    expect(result.warnings().length).toBe(0)
+  })
+})
+
+test('Theme functions with alpha with quotes value around color only', () => {
+  let input = css`
+    .foo {
+      color: theme('colors.yellow' / 50%);
+    }
+  `
+
+  let output = css`
+    .foo {
+      color: rgb(247 204 80 / 50%);
+    }
+  `
+
+  return runFull(input, {
+    theme: {
+      colors: {
+        yellow: '#f7cc50',
+      },
+    },
+  }).then((result) => {
+    expect(result.css).toMatchCss(output)
+    expect(result.warnings().length).toBe(0)
+  })
+})