Repository: tailwindlabs/tailwindcss (TypeScript)

Issue:
3.1 version, theme function reports lint error
<!-- Please provide all of the information requested below. We're a small team and without all of this information it's not possible for us to help and your bug report will be closed. -->

**What version of Tailwind CSS are you using?**

v3.1.2

**What build tool (or framework if it abstracts the build tool) are you using?**



**What version of Node.js are you using?**

16.14

**What browser are you using?**



**What operating system are you using?**



**Reproduction URL**

**Describe your issue**

`theme('colors[primary] / 20%')` reports `'colors[primary] / 20%' does not exist in your theme config.`. 

It works well , but reports a lint error.  Do I need to add any config  or change the code below in `tailwind.config.js` ?

```css
...
primary: withOpacity('--color-primary-rgb'),
...

```

Describe the problem you're seeing, any important steps to reproduce and what behavior you expect instead.


Hints:

Patch:
diff --git a/src/lib/evaluateTailwindFunctions.js b/src/lib/evaluateTailwindFunctions.js
--- a/src/lib/evaluateTailwindFunctions.js
+++ b/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
 


Test patch:
diff --git a/tests/evaluateTailwindFunctions.test.js b/tests/evaluateTailwindFunctions.test.js
--- a/tests/evaluateTailwindFunctions.test.js
+++ b/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)
+  })
+})