-
Notifications
You must be signed in to change notification settings - Fork 33
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
Regression in v7.0.2 when combing calc with CSS Custom Properties #103
Comments
After transition from v7.0.0 to v7.0.[12], postcss-calc got a regression bug. Now I get the following error, though it has never been raised before: :root {
/* ... */
--main-gap-mobile: calc((100vw - var(--main-width-mobile)) / 2);
}
|
We're using Our CSS .event::before {
left: calc(
var(--icon-size) / 2 - var(--border-width) / 2
);
} used to compile to (v7.0.1) .event:before {
left: 11px;
left: calc(
var(--icon-size) / 2 - var(--border-width) / 2
);
} but with v7.0.2 it compiles to: .event:before {
left: 11px;
left: calc(
var(--icon-size) - var(--border-width)
);
} (the |
I experienced a similar issue. My It seems to be completely overlooking the subtraction and division operations. transform: translateZ(calc(0px - var(--thickness) / 2));
/* compiles to */
transform: translateZ(calc(var(--thickness) / 2));
/* Similarly, */
transform: translateX(calc(var(--width) / 2 - var(--thickness) / 2 - var(--pagesOffset)));
/* compiles to */
transform: translateX(calc(var(--width) - var(--thickness) - var(--pagesOffset))); As a workaround, I used multiplication which seems to work as intended. transform: translateZ(calc(0px - var(--thickness) / 2));
/* I rewritten this to */
transform: translateZ(calc((var(--thickness) / 2) * -1));
/* Also, I changed manually */
transform: translateX(calc(var(--width) / 2 - var(--thickness) / 2 - var(--pagesOffset)));
/* to */
transform: translateX(calc((0.5 * var(--width)) - (0.5 * var(--thickness)) - var(--pagesOffset))); |
All the examples produce the expected output in 8.2. This was probably a duplicate of #107 fixed in 7.0.4 |
Consider the following CSS:
With
postcss-calc
v7.0.1, the value of--a
will be unchanged which, sincevar(--b
is a dynamic value that may change.However, in v7.0.2, it will turn into:
This is untentional since it discards the
var(--b)
expressions entirely from the resulting property value.This error can be reproduced here when checking the
postcss-calc
checkbox in the left-hand menu.The text was updated successfully, but these errors were encountered: