Support opacity modifiers for colors in JIT #4348
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR adds a new syntax for specifying color opacity when using the JIT engine.
Instead of needing to use utilities like
bg-opacity-50
,text-opacity-25
, orplaceholder-opacity-40
, this PR makes it possible to just tack the opacity right on to the end of the color:The motivation for this is to remove the need to add new color opacity utilities any time we add other new utilities that are color based. For example, currently the gradient utilities do not support opacity at all:
People expect this to work (#3875) but in reality the better solution would be something like this:
The problem with this solution is it scales really poorly. Any time we add a new color utility, we need a new corresponding opacity utility, which means coming up with a new core plugin name, documenting it, etc.
This PR introduces an approach that allows you to apply opacity to any color by just adding
/{opacity}
to the end of the color, and it is handled at an earlier phase in the compiler so that no color related plugins even have to know that this syntax exists.The opacity values you add at the end of the color name are taken from your
opacity
scale in your theme, and the utility-specific opacity scales are ignored, the idea being that this feature effectively deprecates that stuff.This feature also supports arbitrary opacity values, in case you want to pull the opacity from a CSS variable or use some other one-off value, using this syntax:
This feature is only available in JIT mode, as making it work in the classic engine would introduce a tremendous amount of bloat due to the combinatoric explosion of classes.