Replace breakpoint width sass variables with css variables

[koddsson]

What are you trying to accomplish?

I want to start migrating away from using SASS and start to use the native CSS features where we can.

What approach did you choose and why?

This PR starts by exposing breakpoints variables as CSS variables. If we do this for all SASS variables, we can start deprecating SASS variables, consuming applications can start migrating and we then remove all SASS variables in a breaking change once we've done all the migrations.

Diff

Diff of the changes

koddsson@Kristjans-MBP css % colordiff old.css new.css
66a67,74
> :root {
>   --width-xs: 0;
>   --width-sm: 544px;
>   --width-md: 768px;
>   --width-lg: 1012px;
>   --width-xl: 1280px;
> }
>
120c128
<   max-width: 544px;
---
>   max-width: var(--width-sm);
127c135
<   max-width: 768px;
---
>   max-width: var(--width-md);
134c142
<   max-width: 1012px;
---
>   max-width: var(--width-lg);
141c149
<   max-width: 1280px;
---
>   max-width: var(--width-xl);
199c207
< @media (min-width: 544px) {
---
> @media (min-width: var(--width-sm)) {
251c259
< @media (min-width: 768px) {
---
> @media (min-width: var(--width-md)) {
303c311
< @media (min-width: 1012px) {
---
> @media (min-width: var(--width-lg)) {
355c363
< @media (min-width: 1280px) {
---
> @media (min-width: var(--width-xl)) {
437c445
< @media (min-width: 544px) {
---
> @media (min-width: var(--width-sm)) {
468c476
< @media (min-width: 768px) {
---
> @media (min-width: var(--width-md)) {
499c507
< @media (min-width: 1012px) {
---
> @media (min-width: var(--width-lg)) {
530c538
< @media (min-width: 1280px) {
---
> @media (min-width: var(--width-xl)) {
608c616
< @media (min-width: 544px) {
---
> @media (min-width: var(--width-sm)) {
656c664
< @media (min-width: 768px) {
---
> @media (min-width: var(--width-md)) {
704c712
< @media (min-width: 1012px) {
---
> @media (min-width: var(--width-lg)) {
752c760
< @media (min-width: 1280px) {
---
> @media (min-width: var(--width-xl)) {
824c832
< @media (max-width: calc(544px - 0.02px)) {
---
> @media (max-width: calc(var(--width-sm) - 0.02px)) {
878c886
< @media (max-width: calc(768px - 0.02px)) {
---
> @media (max-width: calc(var(--width-md) - 0.02px)) {
932c940
< @media (max-width: calc(1012px - 0.02px)) {
---
> @media (max-width: calc(var(--width-lg) - 0.02px)) {
995c1003
< @media (min-width: 1012px) {
---
> @media (min-width: var(--width-lg)) {
1015c1023
< @media (min-width: 1012px) {
---
> @media (min-width: var(--width-lg)) {
1020c1028
< @media (min-width: 1280px) {
---
> @media (min-width: var(--width-xl)) {
1025c1033
< @media (min-width: 544px) {
---
> @media (min-width: var(--width-sm)) {
1030c1038
< @media (min-width: 768px) {
---
> @media (min-width: var(--width-md)) {
1035c1043
< @media (min-width: 1012px) {
---
> @media (min-width: var(--width-lg)) {
1048c1056
< @media (min-width: 768px) {
---
> @media (min-width: var(--width-md)) {
1053c1061
< @media (min-width: 1012px) {
---
> @media (min-width: var(--width-lg)) {
1066c1074
< @media (min-width: 1012px) {
---
> @media (min-width: var(--width-lg)) {
1071c1079
< @media (min-width: 1280px) {
---
> @media (min-width: var(--width-xl)) {
1141c1149
<   max-width: calc(768px + var(--Layout-sidebar-width) + var(--Layout-gutter));
---
>   max-width: calc(var(--width-md) + var(--Layout-sidebar-width) + var(--Layout-gutter));
1144c1152
<   max-width: calc(1012px + var(--Layout-sidebar-width) + var(--Layout-gutter));
---
>   max-width: calc(var(--width-lg) + var(--Layout-sidebar-width) + var(--Layout-gutter));
1147c1155
<   max-width: calc(1280px + var(--Layout-sidebar-width) + var(--Layout-gutter));
---
>   max-width: calc(var(--width-xl) + var(--Layout-sidebar-width) + var(--Layout-gutter));
1182c1190
< @media (min-width: 768px) {
---
> @media (min-width: var(--width-md)) {
1271c1279
<     --Layout-content-width: 544px;
---
>     --Layout-content-width: var(--width-sm);
1274c1282
<     --Layout-content-width: 768px;
---
>     --Layout-content-width: var(--width-md);
1277c1285
<     --Layout-content-width: 1012px;
---
>     --Layout-content-width: var(--width-lg);
1280c1288
<     --Layout-content-width: 1280px;
---
>     --Layout-content-width: var(--width-xl);
1283c1291
< @media (min-width: 768px) and (min-width: 544px) {
---
> @media (min-width: var(--width-md)) and (min-width: var(--width-sm)) {
1288c1296
< @media (min-width: 768px) and (min-width: 768px) {
---
> @media (min-width: var(--width-md)) and (min-width: var(--width-md)) {
1293c1301
< @media (min-width: 768px) and (min-width: 1012px) {
---
> @media (min-width: var(--width-md)) and (min-width: var(--width-lg)) {
1298c1306
< @media (min-width: 768px) {
---
> @media (min-width: var(--width-md)) {
1308c1316
< @media (min-width: 768px) and (min-width: 768px) {
---
> @media (min-width: var(--width-md)) and (min-width: var(--width-md)) {
1313c1321
< @media (min-width: 768px) and (min-width: 1012px) {
---
> @media (min-width: var(--width-md)) and (min-width: var(--width-lg)) {
1318c1326
< @media (min-width: 768px) {
---
> @media (min-width: var(--width-md)) {
1328c1336
< @media (min-width: 768px) and (min-width: 1012px) {
---
> @media (min-width: var(--width-md)) and (min-width: var(--width-lg)) {
1333c1341
< @media (min-width: 768px) and (min-width: 1280px) {
---
> @media (min-width: var(--width-md)) and (min-width: var(--width-xl)) {
1338c1346
< @media (max-width: 767.98px) {
---
> @media (max-width: calc(var(--width-md) - 0.02px)) {
1460c1468
< @media (min-width: 1012px) {
---
> @media (min-width: var(--width-lg)) {
1480c1488
< @media (min-width: 1012px) {
---
> @media (min-width: var(--width-lg)) {
1498c1506
< @media (min-width: 1012px) {
---
> @media (min-width: var(--width-lg)) {
1521c1529
< @media (min-width: 1012px) {
---
> @media (min-width: var(--width-lg)) {

Are additional changes needed?

• No, this PR should be ok to ship as is. 🚢

[changeset-bot]

🦋 Changeset detected

Latest commit: 73efb89

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/css	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[koddsson]

This needs to be a calc call since we are now using CSS variables and not the SASS compiler to add up these values.

[langermank]

Hey @koddsson! This is a great idea. We're actually working on this right now, but in primer-primitives https://github.com/github/primer/issues/709. Do you need CSS vars urgently, or would you be willing to wait for us to roll this into primitives?

Further, CSS vars can't be used within @media queries out of the box. There's a PostCSS plugin we will likely implement with the primitives work 😄

[koddsson]

Do you need CSS vars urgently, or would you be willing to wait for us to roll this into primitives?

No rush! The overarching task is to replace any SASS compiler in our toolchain with PostCSS plugins. This looked like a good place to start and kickstart a dialogue on if this is the right approach.

I'll close this as being worked on somewhere else.

Further, CSS vars can't be used within @media queries out of the box.

Thanks! I did not know this 😬