-
Notifications
You must be signed in to change notification settings - Fork 4.4k
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.
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
Remove bare value support for translate
utilities
#13289
Conversation
These can be handled by bare values without issues.
- In case of `columns`, bare values can be used for the amount of columns - In case of `divide-width`, we can always look at `--border-width`
@@ -1901,14 +1878,12 @@ export function createUtilities(theme: Theme) { | |||
suggest('grid-cols', () => [ | |||
{ | |||
values: Array.from({ length: 12 }, (_, i) => `${i + 1}`), | |||
valueThemeKeys: ['--grid-template-columns'], |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We still need all of these theme keys for backwards compatibility, that's why these all exist right now 👍
@@ -3524,6 +3500,9 @@ export function createUtilities(theme: Theme) { | |||
}) | |||
|
|||
functionalUtility('backdrop-opacity', { | |||
// TODO: Do we want to remove this or not? Named opacity utilities (apart | |||
// form like `opacity-disabled` do not make a lot of sense). Just bare | |||
// values make more sense. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Motivation is backwards compatibility for anyone who had something like opacity-backdrop
defined in their config. I don't think we'd really document these theme keys going forward but we're going to have to re-introduce all this stuff for BC if we get rid of it I think.
translate
utilities
This PR removes bare value support for the
translate
utilities.For example,
translate-x-48
would pick48
from the theme, which maps to12rem
, buttranslate-x-50
doesn't exist in the theme, so it would just use bare values and in this case it would map to50%
.