Fix resolution of alpha values inside color functions (#9008)

* Fix resolution of alpha values inside color functions * Update changelog
tailwindlabs · Aug 2, 2022 · 89b960d · 89b960d
1 parent 0b5bfc8
commit 89b960d
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Don’t prefix classes within reused arbitrary variants ([#8992](https://github.com/tailwindlabs/tailwindcss/pull/8992))
+- Fix usage of alpha values inside single-named colors that are functions ([#9008](https://github.com/tailwindlabs/tailwindcss/pull/9008))
 
 ## [3.1.7] - 2022-07-29
 

diff --git a/src/util/resolveConfig.js b/src/util/resolveConfig.js
@@ -180,7 +180,7 @@ function resolveFunctionKeys(object) {
         val = val[path[index++]]
 
         let shouldResolveAsFn =
-          isFunction(val) && (path.alpha === undefined || index < path.length - 1)
+          isFunction(val) && (path.alpha === undefined || index <= path.length - 1)
 
         val = shouldResolveAsFn ? val(resolvePath, configUtils) : val
       }

diff --git a/tests/opacity.test.js b/tests/opacity.test.js
@@ -761,3 +761,70 @@ it('Theme functions can reference values with slashes in brackets', () => {
     `)
   })
 })
+
+it('works with opacity values defined as a placeholder or a function in when colors is a function', () => {
+  let config = {
+    content: [
+      {
+        raw: html`
+          <div
+            class="bg-foo10 bg-foo20 bg-foo30 bg-foo40 bg-foo11 bg-foo21 bg-foo31 bg-foo41"
+          ></div>
+        `,
+      },
+    ],
+    theme: {
+      colors: () => ({
+        foobar1: ({ opacityValue }) => `rgb(255 100 0 / ${opacityValue ?? '100%'})`,
+        foobar2: `rgb(255 100 0 / <alpha-value>)`,
+        foobar3: {
+          100: ({ opacityValue }) => `rgb(255 100 0 / ${opacityValue ?? '100%'})`,
+          200: `rgb(255 100 0 / <alpha-value>)`,
+        },
+      }),
+      extend: {
+        backgroundColor: ({ theme }) => ({
+          foo10: theme('colors.foobar1'),
+          foo20: theme('colors.foobar2'),
+          foo30: theme('colors.foobar3.100'),
+          foo40: theme('colors.foobar3.200'),
+          foo11: theme('colors.foobar1 / 50%'),
+          foo21: theme('colors.foobar2 / 50%'),
+          foo31: theme('colors.foobar3.100 / 50%'),
+          foo41: theme('colors.foobar3.200 / 50%'),
+        }),
+      },
+    },
+  }
+
+  return run('@tailwind utilities', config).then((result) => {
+    expect(result.css).toMatchCss(css`
+      .bg-foo10 {
+        background-color: rgb(255 100 0 / 100%);
+      }
+      .bg-foo20 {
+        --tw-bg-opacity: 1;
+        background-color: rgb(255 100 0 / var(--tw-bg-opacity));
+      }
+      .bg-foo30 {
+        background-color: rgb(255 100 0 / 100%);
+      }
+      .bg-foo40 {
+        --tw-bg-opacity: 1;
+        background-color: rgb(255 100 0 / var(--tw-bg-opacity));
+      }
+      .bg-foo11 {
+        background-color: rgb(255 100 0 / 50%);
+      }
+      .bg-foo21 {
+        background-color: rgb(255 100 0 / 50%);
+      }
+      .bg-foo31 {
+        background-color: rgb(255 100 0 / 50%);
+      }
+      .bg-foo41 {
+        background-color: rgb(255 100 0 / 50%);
+      }
+    `)
+  })
+})