Skip to content

Commit

Permalink
Bring back named opacity support for color opacity modifiers (#15009)
Browse files Browse the repository at this point in the history 
This PR reverts #14278
to bring back support for using named opacity values in color opacity
modifiers:

```css
@theme {
  --opacity-myOpacity: 50%;
}
```

```html
<div class="bg-red-500/myOpacity"></div>
```

We briefly discuss to restructure the code so that we avoid adding a
`theme` argument to the call sites but I do still prefer the current
approach for the following reasons: The way to avoid this is to a) put
something in either the `Theme` class scope, where it feels grossly out
of place, or b) put it into the shared closure in the utilities file
which is already very large and hard to reason. Furthermore, there's a
second call site in the compile function where we would need to
duplicate the namespace lookup.

Every caller of the current `asColor` value already has access to the
`Theme` so passing that as an argument seems like the least intrusive
way.

## Test Plan

Brought back the unit tests but I also tested it with the Vite
extension:

<img width="744" alt="Screenshot 2024-11-15 at 11 15 05"
src="https://github.com/user-attachments/assets/63923b80-767e-4104-b7eb-f71fc815b51e">

---------

Co-authored-by: Adam Wathan <adam.wathan@gmail.com>
  • Loading branch information
@philipp-spiess @adamwathan
philipp-spiess and adamwathan authored Nov 15, 2024
1 parent 953ecd2 commit 2a6cd94
Show file tree
Hide file tree
Showing 4 changed files with 44 additions and 19 deletions.
4 changes: 3 additions & 1 deletion CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

## [Unreleased]

- Nothing yet!
### Changed

- Bring back support for color opacity modifiers to read from `--opacity-*` theme values ([#14278](https://github.com/tailwindlabs/tailwindcss/pull/14278))

## [4.0.0-alpha.34] - 2024-11-14

Expand Down
2 changes: 1 addition & 1 deletion packages/tailwindcss/src/compile.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -263,7 +263,7 @@ function compileBaseUtility(candidate: Candidate, designSystem: DesignSystem) {
// Assumption: If an arbitrary property has a modifier, then we assume it
// is an opacity modifier.
if (candidate.modifier) {
value = asColor(value, candidate.modifier)
value = asColor(value, candidate.modifier, designSystem.theme)
}

if (value === null) return []
Expand Down
14 changes: 13 additions & 1 deletion packages/tailwindcss/src/utilities.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10998,7 +10998,19 @@ test('bg', async () => {
`,
['bg-current/half', 'bg-current/custom', '[color:red]/half'],
),
).toEqual('')
).toMatchInlineSnapshot(`
".bg-current\\/custom {
background-color: color-mix(in oklch, currentColor var(--opacity-custom), transparent);
}
.bg-current\\/half {
background-color: color-mix(in oklch, currentColor var(--opacity-half), transparent);
}
.\\[color\\:red\\]\\/half {
color: color-mix(in oklch, red var(--opacity-half), transparent);
}"
`)
})

test('from', async () => {
Expand Down
43 changes: 27 additions & 16 deletions packages/tailwindcss/src/utilities.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,13 +124,24 @@ export function withAlpha(value: string, alpha: string): string {
/**
* Resolve a color value + optional opacity modifier to a final color.
*/
export function asColor(value: string, modifier: CandidateModifier | null): string | null {
export function asColor(
value: string,
modifier: CandidateModifier | null,
theme: Theme,
): string | null {
if (!modifier) return value

if (modifier.kind === 'arbitrary') {
return withAlpha(value, modifier.value)
}

// Check if the modifier exists in the `opacity` theme configuration and use
// that value if so.
let alpha = theme.resolve(modifier.value, ['--opacity'])
if (alpha) {
return withAlpha(value, alpha)
}

if (!isValidOpacityValue(modifier.value)) {
return null
}
Expand Down Expand Up @@ -182,7 +193,7 @@ function resolveThemeColor<T extends ThemeKey>(
}
}

return value ? asColor(value, candidate.modifier) : null
return value ? asColor(value, candidate.modifier, theme) : null
}

export function createUtilities(theme: Theme) {
Expand Down Expand Up @@ -340,7 +351,7 @@ export function createUtilities(theme: Theme) {
value = candidate.value.value

// Apply an opacity modifier to the value if appropriate.
value = asColor(value, candidate.modifier)
value = asColor(value, candidate.modifier, theme)
} else {
value = resolveThemeColor(candidate, theme, desc.themeKeys)
}
Expand Down Expand Up @@ -2048,7 +2059,7 @@ export function createUtilities(theme: Theme) {
return [borderProperties(), ...decls]
}
default: {
value = asColor(value, candidate.modifier)
value = asColor(value, candidate.modifier, theme)
if (value === null) return

return desc.color(value)
Expand Down Expand Up @@ -2510,7 +2521,7 @@ export function createUtilities(theme: Theme) {
return [decl('background-image', value)]
}
default: {
value = asColor(value, candidate.modifier)
value = asColor(value, candidate.modifier, theme)
if (value === null) return

return [decl('background-color', value)]
Expand Down Expand Up @@ -2584,7 +2595,7 @@ export function createUtilities(theme: Theme) {
return desc.position(value)
}
default: {
value = asColor(value, candidate.modifier)
value = asColor(value, candidate.modifier, theme)
if (value === null) return

return desc.color(value)
Expand Down Expand Up @@ -2721,7 +2732,7 @@ export function createUtilities(theme: Theme) {
if (!candidate.value) return

if (candidate.value.kind === 'arbitrary') {
let value = asColor(candidate.value.value, candidate.modifier)
let value = asColor(candidate.value.value, candidate.modifier, theme)
if (value === null) return
return [decl('fill', value)]
}
Expand Down Expand Up @@ -2758,7 +2769,7 @@ export function createUtilities(theme: Theme) {
return [decl('stroke-width', value)]
}
default: {
value = asColor(candidate.value.value, candidate.modifier)
value = asColor(candidate.value.value, candidate.modifier, theme)
if (value === null) return

return [decl('stroke', value)]
Expand Down Expand Up @@ -3002,7 +3013,7 @@ export function createUtilities(theme: Theme) {
return [decl('text-decoration-thickness', value)]
}
default: {
value = asColor(value, candidate.modifier)
value = asColor(value, candidate.modifier, theme)
if (value === null) return

return [decl('text-decoration-color', value)]
Expand Down Expand Up @@ -3880,7 +3891,7 @@ export function createUtilities(theme: Theme) {
]
}
default: {
value = asColor(value, candidate.modifier)
value = asColor(value, candidate.modifier, theme)
if (value === null) return

return [decl('outline-color', value)]
Expand Down Expand Up @@ -4017,7 +4028,7 @@ export function createUtilities(theme: Theme) {
return [decl('font-size', value)]
}
default: {
value = asColor(value, candidate.modifier)
value = asColor(value, candidate.modifier, theme)
if (value === null) return

return [decl('color', value)]
Expand Down Expand Up @@ -4151,7 +4162,7 @@ export function createUtilities(theme: Theme) {

switch (type) {
case 'color': {
value = asColor(value, candidate.modifier)
value = asColor(value, candidate.modifier, theme)
if (value === null) return

return [boxShadowProperties(), decl('--tw-shadow-color', value)]
Expand Down Expand Up @@ -4243,7 +4254,7 @@ export function createUtilities(theme: Theme) {

switch (type) {
case 'color': {
value = asColor(value, candidate.modifier)
value = asColor(value, candidate.modifier, theme)
if (value === null) return

return [boxShadowProperties(), decl('--tw-inset-shadow-color', value)]
Expand Down Expand Up @@ -4341,7 +4352,7 @@ export function createUtilities(theme: Theme) {
]
}
default: {
value = asColor(value, candidate.modifier)
value = asColor(value, candidate.modifier, theme)
if (value === null) return

return [decl('--tw-ring-color', value)]
Expand Down Expand Up @@ -4414,7 +4425,7 @@ export function createUtilities(theme: Theme) {
]
}
default: {
value = asColor(value, candidate.modifier)
value = asColor(value, candidate.modifier, theme)
if (value === null) return

return [decl('--tw-inset-ring-color', value)]
Expand Down Expand Up @@ -4478,7 +4489,7 @@ export function createUtilities(theme: Theme) {
]
}
default: {
value = asColor(value, candidate.modifier)
value = asColor(value, candidate.modifier, theme)
if (value === null) return

return [decl('--tw-ring-offset-color', value)]
Expand Down

0 comments on commit 2a6cd94

Please sign in to comment.