Provide default to <alpha-value> when using theme() (#8652)

* Ensure default alpha is 1.0 when using new `<alpha-value>` format with the theme function

* Update changelog

CHANGELOG.md

@@ -21,6 +21,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix "Maximum call stack size exceeded" bug ([#8636](https://github.com/tailwindlabs/tailwindcss/pull/8636))
 - Allow functions returning parallel variants to mutate the container ([#8622](https://github.com/tailwindlabs/tailwindcss/pull/8622))
 - Remove text opacity CSS variables from `::marker` ([#8622](https://github.com/tailwindlabs/tailwindcss/pull/8622))
+- Provide default to `<alpha-value>` when using `theme()` ([#8622](https://github.com/tailwindlabs/tailwindcss/pull/8622))
 
 ## [3.1.2] - 2022-06-10
 

src/lib/evaluateTailwindFunctions.js

@@ -183,9 +183,15 @@ export default function ({ tailwindConfig: config }) {
         throw node.error(error)
       }
 
-      if (alpha !== undefined) {
-        value = parseColorFormat(value)
-        value = withAlphaValue(value, alpha, value)
+      let maybeColor = parseColorFormat(value)
+      let isColorFunction = maybeColor !== undefined && typeof maybeColor === 'function'
+
+      if (alpha !== undefined || isColorFunction) {
+        if (alpha === undefined) {
+          alpha = 1.0
+        }
+
+        value = withAlphaValue(maybeColor, alpha, maybeColor)
       }
 
       return value

tests/evaluateTailwindFunctions.test.js

@@ -1025,6 +1025,36 @@ test('Theme function can extract alpha values for colors (8)', () => {
   })
 })
 
+test('Theme functions replace the alpha value placeholder even with no alpha provided', () => {
+  let input = css`
+    .foo {
+      background: theme(colors.blue.400);
+      color: theme(colors.blue.500);
+    }
+  `
+
+  let output = css`
+    .foo {
+      background: rgb(0 0 255 / 1);
+      color: rgb(var(--foo) / 1);
+    }
+  `
+
+  return runFull(input, {
+    theme: {
+      colors: {
+        blue: {
+          400: 'rgb(0 0 255 / <alpha-value>)',
+          500: 'rgb(var(--foo) / <alpha-value>)',
+        },
+      },
+    },
+  }).then((result) => {
+    expect(result.css).toMatchCss(output)
+    expect(result.warnings().length).toBe(0)
+  })
+})
+
 test('Theme functions can reference values with slashes in brackets', () => {
   let input = css`
     .foo1 {