-
Notifications
You must be signed in to change notification settings - Fork 4.1k
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
Improve normalisation of calc()
-like functions
#11686
Conversation
calc()
functionscalc()
-like functions
wanted to be sure this worked
* parse the `calc()`-like expressions and format them * update changelog * Add test case for double negatives wanted to be sure this worked --------- Co-authored-by: Jordan Pittman <jordan@cryptica.me>
3.3.4 caused the following line to break. Input: New output: Old output: |
Also having issues with 3.3.4. Seems to add spaces for 'min-content' within a minmax function which is invalid. Input: New output: Old output: |
Hey @RobinMalfait. I too have encountered the problems described above. Tailwind magic is great, but when it's clear and predictable. In this case, not only does this change add problems, it also diverges from regular CSS on an implicit level. Although adding |
Another data point where this breaks previously working classes: Input: Note the spacing around the |
This PR improves the normalisation of
calc()
functions.In CSS, functions such as
calc()
require spaces around the operators. However, when writing Tailwind CSS classes we can't really use spaces. There are 2 solutions to this problem:_
instead of a space, which we will convert to a space behind the scenes_
characters, and you let Tailwind inject the spaces for youTypically, you would let Tailwind inject the spaces, but we didn't catch all cases. This PR improves that by introducing a mini-parser for handling spaces around operators.
Looking at the examples given in #11682, then the updated result would look like this:
calc((7-32)/(1400-782))
calc((7-32) / (1400 - 782))
calc((7 - 32) / (1400 - 782))
calc((7-3)/(1400-782))
calc((7 - 3) / (1400 - 782))
calc((7 - 3) / (1400 - 782))
calc((7-32)/(1400-782))
calc((7-32) / (1400 - 782))
calc((7 - 32) / (1400 - 782))
calc((70-3)/(1400-782))
calc((70 - 3) / (1400 - 782))
calc((70 - 3) / (1400 - 782))
calc((70-32)/(1400-782))
calc((70-32) / (1400 - 782))
calc((70 - 32) / (1400 - 782))
calc((704-3)/(1400-782))
calc((704 - 3) / (1400 - 782))
calc((704 - 3) / (1400 - 782))
calc((704-320))
calc((704 - 320))
calc((704 - 320))
calc((704-320)/1)
calc((704-320) / 1)
calc((704 - 320) / 1)
calc((704-320)/(1400-782))
calc((704-320) / (1400 - 782))
calc((704 - 320) / (1400 - 782))
Fixes: #11682