From b8880e5eec6bb4f33578578ba2413f0d91424382 Mon Sep 17 00:00:00 2001 From: Geremia Taglialatela Date: Sat, 3 Sep 2022 09:09:07 +0200 Subject: [PATCH] Add workarounds for postcss values parser error 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, twbs/bootstrap#35033 Fix: #36851 --- scss/_accordion.scss | 2 +- scss/_list-group.scss | 4 ++-- scss/_modal.scss | 2 +- scss/_nav.scss | 4 ++-- scss/_offcanvas.scss | 6 +++--- scss/_popover.scss | 10 +++++----- scss/_toasts.scss | 2 +- 7 files changed, 15 insertions(+), 15 deletions(-) diff --git a/scss/_accordion.scss b/scss/_accordion.scss index 07e082f967ba..2bd4eefef6fe 100644 --- a/scss/_accordion.scss +++ b/scss/_accordion.scss @@ -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); diff --git a/scss/_list-group.scss b/scss/_list-group.scss index 581d714b2480..c0ec16468d37 100644 --- a/scss/_list-group.scss +++ b/scss/_list-group.scss @@ -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); } } @@ -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); } } diff --git a/scss/_modal.scss b/scss/_modal.scss index a25af574148d..5f1429fe4bfc 100644 --- a/scss/_modal.scss +++ b/scss/_modal.scss @@ -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; } } diff --git a/scss/_nav.scss b/scss/_nav.scss index e96b273fb90d..9efc03bc8ff8 100644 --- a/scss/_nav.scss +++ b/scss/_nav.scss @@ -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)); @@ -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); } diff --git a/scss/_offcanvas.scss b/scss/_offcanvas.scss index 766e6c15a945..23fc357f2bb6 100644 --- a/scss/_offcanvas.scss +++ b/scss/_offcanvas.scss @@ -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)); } } diff --git a/scss/_popover.scss b/scss/_popover.scss index b00c02959d59..7b69f62328f2 100644 --- a/scss/_popover.scss +++ b/scss/_popover.scss @@ -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 { @@ -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); @@ -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 { @@ -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); } @@ -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); diff --git a/scss/_toasts.scss b/scss/_toasts.scss index a5e481c45ad9..c34e49b2418b 100644 --- a/scss/_toasts.scss +++ b/scss/_toasts.scss @@ -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); } }