Fix multiple <alpha-value> in color definitions (#13740)

* Fix multiple <alpha-value> in color definitions

Fixes #13716

* Update CHANGELOG.md

* Use `replace` with global regex

---------

Co-authored-by: Jordan Pittman <jordan@cryptica.me>

CHANGELOG.md

@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+### Fixed
+
+- Make it possible to use multiple `<alpha-value>` placeholders in a single color definition ([#13740](https://github.com/tailwindlabs/tailwindcss/pull/13740))
 
 ## [3.4.3] - 2024-03-27
 

src/util/pluginUtils.js

@@ -124,7 +124,7 @@ export function parseColorFormat(value) {
  if (typeof value === 'string' && value.includes('<alpha-value>')) {
  let oldValue = value
 
- return ({ opacityValue = 1 }) => oldValue.replace('<alpha-value>', opacityValue)
+ return ({ opacityValue = 1 }) => oldValue.replace(/<alpha-value>/g, opacityValue)
  }
 
  return value

tests/opacity.test.js

@@ -673,6 +673,30 @@ it('should be possible to use an <alpha-value> as part of the color definition w
  })
 })
 
+it('should be possible to use multiple <alpha-value>s as part of the color definition with an opacity modifiers', () => {
+ let config = {
+ content: [
+ {
+ raw: html` <div class="bg-primary/50"></div> `,
+ },
+ ],
+ corePlugins: ['backgroundColor'],
+ theme: {
+ colors: {
+ primary: 'light-dark(rgb(0 0 0 / <alpha-value>), rgb(255 255 255 / <alpha-value>))',
+ },
+ },
+ }
+
+ return run('@tailwind utilities', config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ .bg-primary\/50 {
+ background-color: light-dark(rgb(0 0 0 / 0.5), rgb(255 255 255 / 0.5));
+ }
+ `)
+ })
+})
+
 it('should be possible to use an <alpha-value> as part of the color definition with an opacity modifiers', () => {
  let config = {
  content: [