Skip to content
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

[Bug] : broken declarations due to unitless 0 inside max() #900

Closed
hacknug opened this issue Apr 10, 2020 · 5 comments
Closed

[Bug] : broken declarations due to unitless 0 inside max() #900

hacknug opened this issue Apr 10, 2020 · 5 comments

Comments

@hacknug
Copy link

hacknug commented Apr 10, 2020

Describe the bug
cssnano is messing with 0-like values inside max() (most likely min() and clamp() too).

Note: Because <number-token>s are always interpreted as <number>s or <integer>s, "unitless 0" <length>s aren’t supported in math functions. That is, width: calc(0 + 5px); is invalid, because it’s trying to add a <number> to a <length>, even though both width: 0; and width: 5px; are valid.

To Reproduce
Steps to reproduce the behavior:

  1. Open the playground on a new tab https://cssnano.co/playground/
  2. Paste the following code
/* Your CSS here */
.invalid_pb-0-safe { padding-bottom: max(0, env(safe-area-inset-bottom)); }
.valid_broken_1_pb-0-safe { padding-bottom: max(0px, env(safe-area-inset-bottom)); }
.valid_broken_2_pb-0-safe { padding-bottom: max(calc(0 * 1px), env(safe-area-inset-bottom)); }
.valid_working_pb-0-safe { padding-bottom: max(0 * 1px, env(safe-area-inset-bottom)); }

Expected behavior

  • .invalid_pb-0-safe: invalid because it contains unitless values. Can be dropped
  • .valid_broken_1_pb-0-safe: valid because it doesn't contain unitless values. Should be kept untouched
  • .valid_broken_2_pb-0-safe: valid because it doesn't contain unitless values. Should be kept although it might be better to compute and keep as 0px
  • .valid_working_pb-0-safe: valid and currently the only way to prevent cssnano from messing with it (?). Should be kept as is (already working, no need to change anything for this one)

Screenshots
If applicable, add screenshots to help explain your problem. (from cssnano-playground)

Desktop (please complete the following information):

  • Whatever the playground is using.

Additional context
Revelant links to the spec:

Encountered the issue when testing for a patch for this other project here: desaintflorent/tailwindcss-padding-safe#1

@anikethsaha
Copy link
Member

This has been fixed here #894
it will be released soon.

Let me know if there is anything specific you are looking for !

@thecotne
Copy link

@anikethsaha still not published?

@anikethsaha
Copy link
Member

We are still looking for few bugs to fixed and then we will release a major.

In the meantime, use cssnano@nightly it is up to date with the master of this repo

@alexander-akait
Copy link
Member

Let's close

@hacknug
Copy link
Author

hacknug commented Jul 30, 2020

Missed this back in April but I still wanted to thank you all for the fix ❤️

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

No branches or pull requests

4 participants