Skip to content

Keep zero-length units inside all CSS math functions#496

Open
sarathfrancis90 wants to merge 1 commit into
css:masterfrom
sarathfrancis90:fix/math-function-zero-unit
Open

Keep zero-length units inside all CSS math functions#496
sarathfrancis90 wants to merge 1 commit into
css:masterfrom
sarathfrancis90:fix/math-function-zero-unit

Conversation

@sarathfrancis90

Copy link
Copy Markdown

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:

round(0px, 3px)  ->  round(0, 3px)
mod(0px, 3px)    ->  mod(0, 3px)
hypot(0px, 3px)  ->  hypot(0, 3px)
calc(1px + round(0px, 3px))  ->  calc(1px + round(0, 3px))

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() and clamp() (issue #222, #426), but the MATH_FUNCTIONS set 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/5 case; npm run lint and npm test are green.

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.
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

Successfully merging this pull request may close these issues.

1 participant