1px gap with breakpoints & media queries

@carbon/elements@10.34.0

I am mainly using the grid classes for responsive behavior. But for some elements, I am using media queries that listens to the grid breakpoints:

@media (max-width: $carbon--grid-breakpoint-large-width) {
   // ...
}
@media (min-width: $carbon--grid-breakpoint-large-width) {
   // ...
}

I extract the variables like so

@import '~@carbon/elements/scss/layout/_breakpoint.scss';
$carbon--grid-breakpoint-large: map-get($carbon--grid-breakpoints, 'lg');
$carbon--grid-breakpoint-large-width: map-get($carbon--grid-breakpoint-large, 'width');

The problem is, both media queries are applied on one exact witdh (1056px, which is for the large breakpoint).

I simply would like to have a -1px calculation on the max-width media query. But I am receiving a rem value from the variable. I’m also not sure if rem/px calculation is even possible, i did not found a concrete working example for this. When I do a calc($carbon--grid-breakpoint-large-width - 1px), the media query does not apply on any browser width. Tried also with calc(#{$carbon--grid-breakpoint-large-width} - 1px).

As a workaround I hardcoded the breakpoint px value in a new variable, and subtracted 1px, generating a new variable.

Can you maybe just serve an extractable px value from the breakpoint variable tree, instead of only a calculated rem value? Or serve a reverse calculator like carbon--px($remValue)?

// '~@carbon/elements/scss/layout/_breakpoint.scss';
$carbon--grid-breakpoints: (
// ...
  lg: (
    columns: 16,
    margin: carbon--rem(16px),
    width: carbon--rem(1056px),
  ),
// ...

Or have you other suggestions?

[fabpico]

Yes that worked indeed

@import '~@carbon/elements/scss/layout/_breakpoint.scss';
@import '~carbon-components/src/globals/scss/_typography.scss';
$carbon--grid-breakpoint-large: map-get($carbon--grid-breakpoints, 'lg');
$carbon--grid-breakpoint-large-width: map-get($carbon--grid-breakpoint-large, 'width');
$carbon--grid-breakpoint-large-width-px: (($base-font-size / 1px) * ($carbon--grid-breakpoint-large-width / 1rem)) * 1px;
$carbon--grid-breakpoint-medium-width-end-px: $carbon--grid-breakpoint-large-width-px - 1px;

$carbon--grid-breakpoint-medium-width-end-px then is compiled to 1055px as expected.

Are you considering to add a function for reuse, in a next release?

[fabpico]

@tay1orjones Unfortunately this didn’t work for me. How can I reopen the issue?

When I do

@import '~@carbon/elements/scss/layout/breakpoint';

@include carbon--breakpoint-between(md, lg, $carbon--grid-breakpoints) {
   // ..
}

it is compiled to

@media (min-width: null) and (max-width: null) {
   // ..
}

I debugged the calculations https://github.com/carbon-design-system/carbon/blob/d4512961a83cf1465fc4de536a3ce8e82be39ba5/packages/layout/scss/_breakpoint.scss#L201

https://github.com/carbon-design-system/carbon/blob/d4512961a83cf1465fc4de536a3ce8e82be39ba5/packages/layout/scss/_breakpoint.scss#L206

$min-width/$max-width are both null. When I remove the + 0.02 / - 0.02 calculations, the results are 42rem/66rem. For me this looks like a bug in the calculation. Or am I using the mixin wrong?