Specific breakpoints in padding CSS

[mdo]

https://github.com/primer/primer/blob/a09c6573bb0db052f37055cf82c49096f57e3087/modules/primer-utilities/lib/padding.scss#L69-L84

Can this chunk of CSS be moved to a separate file by chance? Customizing our breakpoints Sass map means we can eliminate breakpoint-specific CSS when it's not needed. For example, a project I'm working on only needs up to md. However, to use any of the padding utilities, this CSS requires there to be a lg breakpoint.

[broccolini]

I think that's reasonable, will add this to our next release.

[shawnbot]

One way we could handle this is to have the breakpoint() mixin check whether the provided breakpoint exists in $breakpoints (?). We'll try to get this into 10.5.0.

[shawnbot]

@mdo If I'm reading it right, this code should produce no output:

$breakpoints: ();

@include breakpoint(lg) {
  .foo { color: rebeccapurple; }
}

Can you confirm that customizing your $breakpoints variable removes those breakpoints from your build?

[shawnbot]

^^ bump @mdo

[mdo]

Haven't had the time to jump into code around this again, and I'm unsure when I'll step back into it either at this point. 😬

[github-actions]

Hi! This issue has been marked as stale because it has been open with no activity for 180 days. You can comment on the issue or remove the stale label to keep it open. If you do nothing, this issue will be closed in 7 days.