Keep zero-length units inside all CSS math functions#496
Open
sarathfrancis90 wants to merge 1 commit into
Open
Keep zero-length units inside all CSS math functions#496sarathfrancis90 wants to merge 1 commit into
sarathfrancis90 wants to merge 1 commit into
Conversation
The zero-length unit optimization guards against calc(), min(), max() and clamp(), but strips the unit inside the other CSS math functions. For example round(0px, 3px) is rewritten to round(0, 3px). Inside a math function a unitless zero is a <number>, not a zero <length>, so the two arguments no longer share a type and the value becomes invalid, dropping the declaration. Add the remaining math functions (round, mod, rem, the trigonometric, exponential and sign-related functions) to the set so their zero-length arguments keep their unit.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
While minifying a stylesheet that uses
round()I noticed the output had broken values. csso strips the unit off a zero length inside most math functions:Inside a math function a unitless zero is a
<number>, not a zero<length>, so after the rewrite the two arguments no longer share a type. The value is invalid and the whole declaration is dropped by the browser, so the styling silently disappears.The zero-length optimization already guards against this for
calc(),min(),max()andclamp()(issue #222, #426), but theMATH_FUNCTIONSset was never extended to the newer math functions. This fills in the rest of them (round,mod,rem, the trigonometric, exponential and sign-related functions) so their zero-length arguments keep the unit.Tested with a new
fixtures/compress/units/5case;npm run lintandnpm testare green.