Skip to content

Operator precedence is not preserved #115

@coreyworrell

Description

@coreyworrell

Source:

:root {
    --fluid-min-width: 320;
    --fluid-max-width: 1140;
    --fluid-screen: 100vw;
    --fluid-bp: calc(
        (var(--fluid-screen) - ((var(--fluid-min-width) / 16) * 1rem)) /
        ((var(--fluid-max-width) / 16) - (var(--fluid-min-width) / 16))
    );
}

7.0.4 outputs:

:root {
    --fluid-min-width: 320;
    --fluid-max-width: 1140;
    --fluid-screen: 100vw;
    --fluid-bp: calc(
        (var(--fluid-screen) - var(--fluid-min-width) / 16 * 1rem) / 
        (var(--fluid-max-width) - var(--fluid-min-width)) / 16
    );
}

The output should instead be:

:root {
    --fluid-min-width: 320;
    --fluid-max-width: 1140;
    --fluid-screen: 100vw;
    --fluid-bp: calc(
        (var(--fluid-screen) - (var(--fluid-min-width) / 16) * 1rem)) / 
        ((var(--fluid-max-width) - var(--fluid-min-width)) / 16
    );
}

postcss-calc is removing the necessary parentheses and affecting the operator precedence.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bad-outputpostcss-calc produces incorrect outputbug

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions