Skip to content

Conversation

@philipp-spiess
Copy link
Member

This PR reverts #14278 to bring back support for using named opacity values in color opacity modifiers:

@theme {
  --opacity-myOpacity: 50%;
}
<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:

Screenshot 2024-11-15 at 11 15 05

@philipp-spiess philipp-spiess requested a review from a team as a code owner November 15, 2024 10:22
export function App() {
return (
<div className="m-3 p-3 border">
<div className="m-3 p-3 border bg-red-500/mymy">
Copy link
Member

Choose a reason for hiding this comment

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

Can remove these playground files from the diff 👍

Copy link
Member Author

Choose a reason for hiding this comment

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

ah, my bad.

Copy link
Member

@adamwathan adamwathan left a comment

Choose a reason for hiding this comment

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

Good to merge after undoing those playground changes 👍

Co-authored-by: Adam Wathan <[email protected]>
@philipp-spiess philipp-spiess force-pushed the feat/bring-back-named-opacity-support branch from 7e3f119 to 06609ce Compare November 15, 2024 14:36
@philipp-spiess philipp-spiess enabled auto-merge (squash) November 15, 2024 14:36
@philipp-spiess philipp-spiess merged commit 2a6cd94 into next Nov 15, 2024
1 check passed
@philipp-spiess philipp-spiess deleted the feat/bring-back-named-opacity-support branch November 15, 2024 14:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants