Convert build tools to use dart-sass #1617

jonrohan · 2021-09-23T04:39:02Z

Similar to the work @koddsson did in dotcom, I wanted to update our internal build tools to use dart-sass since node-sass is now end-of-life.

I extracted this out into a file script/primer-css-compiler.js that I would like to build into a package we can publish and share across our codebases.

Things of note:

Something about the way dart-sass minifies it drops the [type="button"] quotes in this situation and outputs [type=button]. So we will see a huge diff in the release pr.
dotcom currently compiles css again, so this change wont have an effect there.
I dropped the .node-version file which was necessary because node-sass wouldn't compile on a version larger than 14.

/cc @primer/css-reviewers

Conflicts: package.json yarn.lock

changeset-bot · 2021-09-23T04:39:04Z

🦋 Changeset detected

Latest commit: 8d50080

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	Major

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

Conflicts: yarn.lock

simurai · 2021-09-23T04:49:27Z

src/markdown/markdown-body.scss

@@ -10,8 +10,6 @@
  line-height: $body-line-height;
  word-wrap: break-word;

-  @import "../base/kbd.scss"; // adds support for keyboard shortcuts


Is importing a file like that not possible in dart-sass? If so, we might need to just duplicate those styles?

Hello inspect the styles on me

yes, I meant to say. dart-sass didn't like this. but checking the .markdown-body kbd and the normal kbd that's included in base both apply in dotcom. So I'm unsure if this more specific import is needed?

If it is, we can try putting .markdown-body kbd, kbd {} in the base/kbd.scss file.

koddsson

I'm not super into how compiling primer CSS works but this looks pretty good too me.

What is the difference between the outputs? It might help with confidence in this change if we diff the outputs.

jonrohan · 2021-09-23T15:50:33Z

This is the selector diff between this branch and the 18 major release.

--- before.txt  2021-09-23 08:49:42.000000000 -0700
+++ after.txt   2021-09-23 08:49:42.000000000 -0700
@@ -228,3 +228,3 @@
 .Link--muted:hover
-.Link--muted:hover [class*="color-text"]
+.Link--muted:hover [class*=color-text]
 .Link--onHover:hover
@@ -232,6 +232,6 @@
 .Link--primary:hover
-.Link--primary:hover [class*="color-text"]
+.Link--primary:hover [class*=color-text]
 .Link--secondary
 .Link--secondary:hover
-.Link--secondary:hover [class*="color-text"]
+.Link--secondary:hover [class*=color-text]
 .Link:hover
@@ -306,4 +306,4 @@
 .SelectMenu-tab:hover
-.SelectMenu-tab:not([aria-selected="true"]):active
-.SelectMenu-tab[aria-selected="true"]
+.SelectMenu-tab:not([aria-selected=true]):active
+.SelectMenu-tab[aria-selected=true]
 .SelectMenu-tabs
@@ -323,4 +323,4 @@
 .SideNav-item[aria-current]:not([aria-current=false])::before
-.SideNav-item[aria-selected="true"]
-.SideNav-item[aria-selected="true"]::before
+.SideNav-item[aria-selected=true]
+.SideNav-item[aria-selected=true]::before
 .SideNav-subItem
@@ -329,3 +329,3 @@
 .SideNav-subItem[aria-current]:not([aria-current=false])
-.SideNav-subItem[aria-selected="true"]
+.SideNav-subItem[aria-selected=true]
 .State
@@ -972,3 +972,3 @@
 .dropdown-item:focus
-.dropdown-item:focus [class*="color-text-"]
+.dropdown-item:focus [class*=color-text-]
 .dropdown-item:focus>.Label
@@ -976,6 +976,6 @@
 .dropdown-item:hover
-.dropdown-item:hover [class*="color-text-"]
+.dropdown-item:hover [class*=color-text-]
 .dropdown-item:hover>.Label
 .dropdown-item:hover>.octicon
-.dropdown-item[aria-checked="false"] .octicon-check
+.dropdown-item[aria-checked=false] .octicon-check
 .dropdown-menu
@@ -1259,4 +1259,4 @@
 .form-checkbox-details
-.form-checkbox-details-trigger:checked ~ * .form-checkbox-details
-.form-checkbox-details-trigger:checked ~ .form-checkbox-details
+.form-checkbox-details-trigger:checked~* .form-checkbox-details
+.form-checkbox-details-trigger:checked~.form-checkbox-details
 .form-control
@@ -1342,30 +1342,30 @@
 .gutter-condensed
-.gutter-condensed>[class*="col-"]
+.gutter-condensed>[class*=col-]
 .gutter-lg
 .gutter-lg-condensed
-.gutter-lg-condensed>[class*="col-"]
+.gutter-lg-condensed>[class*=col-]
 .gutter-lg-spacious
-.gutter-lg-spacious>[class*="col-"]
-.gutter-lg>[class*="col-"]
+.gutter-lg-spacious>[class*=col-]
+.gutter-lg>[class*=col-]
 .gutter-md
 .gutter-md-condensed
-.gutter-md-condensed>[class*="col-"]
+.gutter-md-condensed>[class*=col-]
 .gutter-md-spacious
-.gutter-md-spacious>[class*="col-"]
-.gutter-md>[class*="col-"]
+.gutter-md-spacious>[class*=col-]
+.gutter-md>[class*=col-]
 .gutter-sm
 .gutter-sm-condensed
-.gutter-sm-condensed>[class*="col-"]
+.gutter-sm-condensed>[class*=col-]
 .gutter-sm-spacious
-.gutter-sm-spacious>[class*="col-"]
-.gutter-sm>[class*="col-"]
+.gutter-sm-spacious>[class*=col-]
+.gutter-sm>[class*=col-]
 .gutter-spacious
-.gutter-spacious>[class*="col-"]
+.gutter-spacious>[class*=col-]
 .gutter-xl
 .gutter-xl-condensed
-.gutter-xl-condensed>[class*="col-"]
+.gutter-xl-condensed>[class*=col-]
 .gutter-xl-spacious
-.gutter-xl-spacious>[class*="col-"]
-.gutter-xl>[class*="col-"]
-.gutter>[class*="col-"]
+.gutter-xl-spacious>[class*=col-]
+.gutter-xl>[class*=col-]
+.gutter>[class*=col-]
 .h0-mktg
@@ -1646,3 +1646,2 @@
 .markdown-body img[align=right]
-.markdown-body kbd
 .markdown-body li+li
@@ -1654,4 +1653,4 @@
 .markdown-body ol[type="1"]
-.markdown-body ol[type="a"]
-.markdown-body ol[type="i"]
+.markdown-body ol[type=a]
+.markdown-body ol[type=i]
 .markdown-body p
@@ -3074,4 +3073,4 @@
 .suggester li:last-child
-.suggester li[aria-selected="true"]
-.suggester li[aria-selected="true"] small
+.suggester li[aria-selected=true]
+.suggester li[aria-selected=true] small
 .suggester-container
@@ -3288,38 +3287,38 @@
 :root
-[data-color-mode="auto"][data-dark-theme*="dark"]
-[data-color-mode="auto"][data-dark-theme*="dark"] .form-select
-[data-color-mode="auto"][data-dark-theme*="light"]
-[data-color-mode="auto"][data-dark-theme="dark"]
-[data-color-mode="auto"][data-dark-theme="dark_dimmed"]
-[data-color-mode="auto"][data-dark-theme="dark_high_contrast"]
-[data-color-mode="auto"][data-dark-theme="dark_protanopia"]
-[data-color-mode="auto"][data-dark-theme="light"]
-[data-color-mode="auto"][data-dark-theme="light_protanopia"]
-[data-color-mode="auto"][data-light-theme*="dark"]
-[data-color-mode="auto"][data-light-theme*="dark"] .form-select
-[data-color-mode="auto"][data-light-theme*="light"]
-[data-color-mode="auto"][data-light-theme="dark"]
-[data-color-mode="auto"][data-light-theme="dark_dimmed"]
-[data-color-mode="auto"][data-light-theme="dark_high_contrast"]
-[data-color-mode="auto"][data-light-theme="dark_protanopia"]
-[data-color-mode="auto"][data-light-theme="light"]
-[data-color-mode="auto"][data-light-theme="light_protanopia"]
-[data-color-mode="dark"][data-dark-theme*="dark"]
-[data-color-mode="dark"][data-dark-theme*="dark"] .form-select
-[data-color-mode="dark"][data-dark-theme*="light"]
-[data-color-mode="dark"][data-dark-theme="dark"]
-[data-color-mode="dark"][data-dark-theme="dark_dimmed"]
-[data-color-mode="dark"][data-dark-theme="dark_high_contrast"]
-[data-color-mode="dark"][data-dark-theme="dark_protanopia"]
-[data-color-mode="dark"][data-dark-theme="light"]
-[data-color-mode="dark"][data-dark-theme="light_protanopia"]
-[data-color-mode="light"][data-light-theme*="dark"]
-[data-color-mode="light"][data-light-theme*="dark"] .form-select
-[data-color-mode="light"][data-light-theme*="light"]
-[data-color-mode="light"][data-light-theme="dark"]
-[data-color-mode="light"][data-light-theme="dark_dimmed"]
-[data-color-mode="light"][data-light-theme="dark_high_contrast"]
-[data-color-mode="light"][data-light-theme="dark_protanopia"]
-[data-color-mode="light"][data-light-theme="light"]
-[data-color-mode="light"][data-light-theme="light_protanopia"]
+[data-color-mode=auto][data-dark-theme*=dark]
+[data-color-mode=auto][data-dark-theme*=dark] .form-select
+[data-color-mode=auto][data-dark-theme*=light]
+[data-color-mode=auto][data-dark-theme=dark]
+[data-color-mode=auto][data-dark-theme=dark_dimmed]
+[data-color-mode=auto][data-dark-theme=dark_high_contrast]
+[data-color-mode=auto][data-dark-theme=dark_protanopia]
+[data-color-mode=auto][data-dark-theme=light]
+[data-color-mode=auto][data-dark-theme=light_protanopia]
+[data-color-mode=auto][data-light-theme*=dark]
+[data-color-mode=auto][data-light-theme*=dark] .form-select
+[data-color-mode=auto][data-light-theme*=light]
+[data-color-mode=auto][data-light-theme=dark]
+[data-color-mode=auto][data-light-theme=dark_dimmed]
+[data-color-mode=auto][data-light-theme=dark_high_contrast]
+[data-color-mode=auto][data-light-theme=dark_protanopia]
+[data-color-mode=auto][data-light-theme=light]
+[data-color-mode=auto][data-light-theme=light_protanopia]
+[data-color-mode=dark][data-dark-theme*=dark]
+[data-color-mode=dark][data-dark-theme*=dark] .form-select
+[data-color-mode=dark][data-dark-theme*=light]
+[data-color-mode=dark][data-dark-theme=dark]
+[data-color-mode=dark][data-dark-theme=dark_dimmed]
+[data-color-mode=dark][data-dark-theme=dark_high_contrast]
+[data-color-mode=dark][data-dark-theme=dark_protanopia]
+[data-color-mode=dark][data-dark-theme=light]
+[data-color-mode=dark][data-dark-theme=light_protanopia]
+[data-color-mode=light][data-light-theme*=dark]
+[data-color-mode=light][data-light-theme*=dark] .form-select
+[data-color-mode=light][data-light-theme*=light]
+[data-color-mode=light][data-light-theme=dark]
+[data-color-mode=light][data-light-theme=dark_dimmed]
+[data-color-mode=light][data-light-theme=dark_high_contrast]
+[data-color-mode=light][data-light-theme=dark_protanopia]
+[data-color-mode=light][data-light-theme=light]
+[data-color-mode=light][data-light-theme=light_protanopia]
 [data-color-mode]
@@ -3340,17 +3339,17 @@
 [open]>.btn-transparent
-[type="button"]:-moz-focusring
-[type="button"]::-moz-focus-inner
-[type="checkbox"]
-[type="number"]::-webkit-inner-spin-button
-[type="number"]::-webkit-outer-spin-button
-[type="radio"]
-[type="reset"]
-[type="reset"]:-moz-focusring
-[type="reset"]::-moz-focus-inner
-[type="search"]
-[type="search"]::-webkit-search-cancel-button
-[type="search"]::-webkit-search-decoration
-[type="submit"]
-[type="submit"]:-moz-focusring
-[type="submit"]::-moz-focus-inner
+[type=button]:-moz-focusring
+[type=button]::-moz-focus-inner
+[type=checkbox]
+[type=number]::-webkit-inner-spin-button
+[type=number]::-webkit-outer-spin-button
+[type=radio]
+[type=reset]
+[type=reset]:-moz-focusring
+[type=reset]::-moz-focus-inner
+[type=search]
+[type=search]::-webkit-search-cancel-button
+[type=search]::-webkit-search-decoration
+[type=submit]
+[type=submit]:-moz-focusring
+[type=submit]::-moz-focus-inner
 a
@@ -3402,3 +3401,3 @@
 html
-html [type="button"]
+html [type=button]
 img

jonrohan added 4 commits August 11, 2021 16:20

Installing dart-sass

570bb76

Merge branch 'main' into dart-sass

e8f0320

Conflicts: package.json yarn.lock

Moving css compiling to separate file

f6ba168

Removing node version

2d9981d

jonrohan requested a review from a team as a code owner September 23, 2021 04:39

jonrohan requested a review from simurai September 23, 2021 04:39

Merge branch 'main' into dart-sass

a4d67d8

Conflicts: yarn.lock

github-actions bot had a problem deploying to Preview September 23, 2021 04:40 Failure

jonrohan requested a review from koddsson September 23, 2021 04:41

Create polite-mayflies-refuse.md

103aa1e

github-actions bot added the minor release label Sep 23, 2021

simurai reviewed Sep 23, 2021

View reviewed changes

jonrohan added 2 commits September 22, 2021 21:52

Don't compile support files

d8053a9

Fix test to not check support

48eed27

koddsson approved these changes Sep 23, 2021

View reviewed changes

Create olive-ants-kick.md

362b345

github-actions bot added major release and removed minor release labels Sep 24, 2021

jonrohan enabled auto-merge (squash) September 24, 2021 00:42

Merge branch 'main' into dart-sass

91064fc

github-actions bot had a problem deploying to Preview September 24, 2021 00:43 Failure

Add note about removing <kbd> from markdown

8d50080

github-actions bot had a problem deploying to Preview September 24, 2021 00:48 Failure

simurai approved these changes Sep 24, 2021

View reviewed changes

jonrohan merged commit e47324f into main Sep 24, 2021

jonrohan deleted the dart-sass branch September 24, 2021 00:49

primer-css mentioned this pull request Sep 24, 2021

Release Tracking #1600

Merged

simurai mentioned this pull request Oct 1, 2021

Docs stopped working #1632

Closed

simurai mentioned this pull request Oct 22, 2021

ActionList Component: Primer CSS Implementation #1657

Merged

5 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Convert build tools to use dart-sass #1617

Convert build tools to use dart-sass #1617

jonrohan commented Sep 23, 2021 •

edited

Loading

changeset-bot bot commented Sep 23, 2021 •

edited

Loading

simurai Sep 23, 2021

jonrohan Sep 23, 2021

koddsson left a comment

jonrohan commented Sep 23, 2021

Convert build tools to use dart-sass #1617

Convert build tools to use dart-sass #1617

Conversation

jonrohan commented Sep 23, 2021 • edited Loading

Things of note:

changeset-bot bot commented Sep 23, 2021 • edited Loading

🦋 Changeset detected

simurai Sep 23, 2021

Choose a reason for hiding this comment

jonrohan Sep 23, 2021

Choose a reason for hiding this comment

koddsson left a comment

Choose a reason for hiding this comment

jonrohan commented Sep 23, 2021

jonrohan commented Sep 23, 2021 •

edited

Loading

changeset-bot bot commented Sep 23, 2021 •

edited

Loading