Skip to content

Commit

Permalink
Add workarounds for postcss values parser error
Browse files Browse the repository at this point in the history
postcss-values-parser returns a syntax error when a negative value is
provided in a `calc` function after a CSS variable.

This is not an issue with Bootstrap itself, but a workaround to allow
projects using postcss-values-parser to keep upgrading and compiling
bootstrap

Ref: shellscape/postcss-values-parser#138, #35033

Fix: #36851
  • Loading branch information
tagliala authored and mdo committed Sep 4, 2022
1 parent 75e09b1 commit b8880e5
Show file tree
Hide file tree
Showing 7 changed files with 15 additions and 15 deletions.
2 changes: 1 addition & 1 deletion scss/_accordion.scss
Expand Up @@ -47,7 +47,7 @@
&:not(.collapsed) {
color: var(--#{$prefix}accordion-active-color);
background-color: var(--#{$prefix}accordion-active-bg);
box-shadow: inset 0 calc(var(--#{$prefix}accordion-border-width) * -1) 0 var(--#{$prefix}accordion-border-color); // stylelint-disable-line function-disallowed-list
box-shadow: inset 0 calc(-1 * var(--#{$prefix}accordion-border-width)) 0 var(--#{$prefix}accordion-border-color); // stylelint-disable-line function-disallowed-list

&::after {
background-image: var(--#{$prefix}accordion-btn-active-icon);
Expand Down
4 changes: 2 additions & 2 deletions scss/_list-group.scss
Expand Up @@ -109,7 +109,7 @@
border-top-width: 0;

&.active {
margin-top: calc(var(--#{$prefix}list-group-border-width) * -1); // stylelint-disable-line function-disallowed-list
margin-top: calc(-1 * var(--#{$prefix}list-group-border-width)); // stylelint-disable-line function-disallowed-list
border-top-width: var(--#{$prefix}list-group-border-width);
}
}
Expand Down Expand Up @@ -146,7 +146,7 @@
border-left-width: 0;

&.active {
margin-left: calc(var(--#{$prefix}list-group-border-width) * -1); // stylelint-disable-line function-disallowed-list
margin-left: calc(-1 * var(--#{$prefix}list-group-border-width)); // stylelint-disable-line function-disallowed-list
border-left-width: var(--#{$prefix}list-group-border-width);
}
}
Expand Down
2 changes: 1 addition & 1 deletion scss/_modal.scss
Expand Up @@ -133,7 +133,7 @@

.btn-close {
padding: calc(var(--#{$prefix}modal-header-padding-y) * .5) calc(var(--#{$prefix}modal-header-padding-x) * .5);
margin: calc(var(--#{$prefix}modal-header-padding-y) * -.5) calc(var(--#{$prefix}modal-header-padding-x) * -.5) calc(var(--#{$prefix}modal-header-padding-y) * -.5) auto;
margin: calc(-.5 * var(--#{$prefix}modal-header-padding-y)) calc(-.5 * var(--#{$prefix}modal-header-padding-x)) calc(-.5 * var(--#{$prefix}modal-header-padding-y)) auto;
}
}

Expand Down
4 changes: 2 additions & 2 deletions scss/_nav.scss
Expand Up @@ -62,7 +62,7 @@
border-bottom: var(--#{$prefix}nav-tabs-border-width) solid var(--#{$prefix}nav-tabs-border-color);

.nav-link {
margin-bottom: calc(var(--#{$prefix}nav-tabs-border-width) * -1); // stylelint-disable-line function-disallowed-list
margin-bottom: calc(-1 * var(--#{$prefix}nav-tabs-border-width)); // stylelint-disable-line function-disallowed-list
background: none;
border: var(--#{$prefix}nav-tabs-border-width) solid transparent;
@include border-top-radius(var(--#{$prefix}nav-tabs-border-radius));
Expand Down Expand Up @@ -91,7 +91,7 @@

.dropdown-menu {
// Make dropdown border overlap tab border
margin-top: calc(var(--#{$prefix}nav-tabs-border-width) * -1); // stylelint-disable-line function-disallowed-list
margin-top: calc(-1 * var(--#{$prefix}nav-tabs-border-width)); // stylelint-disable-line function-disallowed-list
// Remove the top rounded corners here since there is a hard edge above the menu
@include border-top-radius(0);
}
Expand Down
6 changes: 3 additions & 3 deletions scss/_offcanvas.scss
Expand Up @@ -126,9 +126,9 @@

.btn-close {
padding: calc(var(--#{$prefix}offcanvas-padding-y) * .5) calc(var(--#{$prefix}offcanvas-padding-x) * .5);
margin-top: calc(var(--#{$prefix}offcanvas-padding-y) * -.5);
margin-right: calc(var(--#{$prefix}offcanvas-padding-x) * -.5);
margin-bottom: calc(var(--#{$prefix}offcanvas-padding-y) * -.5);
margin-top: calc(-.5 * var(--#{$prefix}offcanvas-padding-y));
margin-right: calc(-.5 * var(--#{$prefix}offcanvas-padding-x));
margin-bottom: calc(-.5 * var(--#{$prefix}offcanvas-padding-y));
}
}

Expand Down
10 changes: 5 additions & 5 deletions scss/_popover.scss
Expand Up @@ -56,7 +56,7 @@

.bs-popover-top {
> .popover-arrow {
bottom: calc((var(--#{$prefix}popover-arrow-height) * -1) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
bottom: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list

&::before,
&::after {
Expand All @@ -78,7 +78,7 @@
/* rtl:begin:ignore */
.bs-popover-end {
> .popover-arrow {
left: calc((var(--#{$prefix}popover-arrow-height) * -1) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
left: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
width: var(--#{$prefix}popover-arrow-height);
height: var(--#{$prefix}popover-arrow-width);

Expand All @@ -103,7 +103,7 @@

.bs-popover-bottom {
> .popover-arrow {
top: calc((var(--#{$prefix}popover-arrow-height) * -1) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
top: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list

&::before,
&::after {
Expand All @@ -128,7 +128,7 @@
left: 50%;
display: block;
width: var(--#{$prefix}popover-arrow-width);
margin-left: calc(var(--#{$prefix}popover-arrow-width) * -.5); // stylelint-disable-line function-disallowed-list
margin-left: calc(-.5 * var(--#{$prefix}popover-arrow-width)); // stylelint-disable-line function-disallowed-list
content: "";
border-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-header-bg);
}
Expand All @@ -137,7 +137,7 @@
/* rtl:begin:ignore */
.bs-popover-start {
> .popover-arrow {
right: calc((var(--#{$prefix}popover-arrow-height) * -1) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
right: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
width: var(--#{$prefix}popover-arrow-height);
height: var(--#{$prefix}popover-arrow-width);

Expand Down
2 changes: 1 addition & 1 deletion scss/_toasts.scss
Expand Up @@ -60,7 +60,7 @@
@include border-top-radius(calc(var(--#{$prefix}toast-border-radius) - var(--#{$prefix}toast-border-width)));

.btn-close {
margin-right: calc(var(--#{$prefix}toast-padding-x) * -.5); // stylelint-disable-line function-disallowed-list
margin-right: calc(-.5 * var(--#{$prefix}toast-padding-x)); // stylelint-disable-line function-disallowed-list
margin-left: var(--#{$prefix}toast-padding-x);
}
}
Expand Down

0 comments on commit b8880e5

Please sign in to comment.