Skip to content

Fix var(…) as the opacity value inside the theme(…) function #14653

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
RobinMalfait merged 5 commits into from
Oct 14, 2024
+82 −1
Merged

Fix var(…) as the opacity value inside the theme(…) function #14653

Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
594ee5a
handle `theme(colors.red/var(--opacity))`
RobinMalfait Oct 11, 2024
94cbc5e
add test with fallback in `var(…)`
RobinMalfait Oct 11, 2024
01b1c43
update changelog
RobinMalfait Oct 11, 2024
c7de903
update changelog
RobinMalfait Oct 14, 2024
b0ed890
update changelog
RobinMalfait Oct 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
update changelog
  • Loading branch information
@RobinMalfait
RobinMalfait committed Oct 14, 2024
commit 01b1c43c348729a402c10531c588a2173cb43210
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Pass options when using `addComponents` and `matchComponents` ([#14590](https://github.com/tailwindlabs/tailwindcss/pull/14590))
- Ensure `boxShadow` and `animation` theme keys in JS config files are accessible under `--shadow-*` and `--animate-*` using the `theme()` function ([#14642](https://github.com/tailwindlabs/tailwindcss/pull/14642))
- Ensure all theme keys with new names are also accessible under their old names when using the `theme()` function with the legacy dot notation syntax ([#14642](https://github.com/tailwindlabs/tailwindcss/pull/14642))
- Fix `var(…)` as the opacity value inside the `theme(…)` function ([#14653](https://github.com/tailwindlabs/tailwindcss/pull/14653))
Copy link
Member

@philipp-spiess philipp-spiess Oct 14, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
- Fix `var(…)` as the opacity value inside the `theme(…)` function ([#14653](https://github.com/tailwindlabs/tailwindcss/pull/14653))
- Allow `var(…)` for the opacity modifier inside `theme([path] / [modifier])` function calls ([#14653](https://github.com/tailwindlabs/tailwindcss/pull/14653))

Maybe if we word it like this it's also an addition and not a fix? I’m not sure about the theme function arguments, maybe it's fine to abbreviate with … but I was wondering if this makes it clearer what the modifier position is in this case.

Copy link
Member Author

@RobinMalfait RobinMalfait Oct 14, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it should be a fix because without it we would generate invalid CSS

Copy link
Member Author

@RobinMalfait RobinMalfait Oct 14, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How about something like this?

Ensure `var(…)` can be used as the opacity value inside the `theme([path] / [modifier])` function

Copy link
Member

@philipp-spiess philipp-spiess Oct 14, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sounds good!

- _Upgrade (experimental)_: Ensure CSS before a layer stays unlayered when running codemods ([#14596](https://github.com/tailwindlabs/tailwindcss/pull/14596))
- _Upgrade (experimental)_: Resolve issues where some prefixed candidates were not properly migrated ([#14600](https://github.com/tailwindlabs/tailwindcss/pull/14600))

Expand Down