Convert build tools to use dart-sass (#1617)

* Installing dart-sass

* Moving css compiling to separate file

* Removing node version

* Create polite-mayflies-refuse.md

* Don't compile support files

* Fix test to not check support

* Create olive-ants-kick.md

Author: jonrohan

.changeset/olive-ants-kick.md

@@ -0,0 +1,5 @@
+---
+"@primer/css": major
+---
+
+Removing `<kbd>` import from markdown package. Going forward you'll need to include `@primer/css/base/kbd.scss` directly.

.changeset/polite-mayflies-refuse.md

@@ -0,0 +1,5 @@
+---
+"@primer/css": minor
+---
+
+Convert postcss build tool, from node-sass to dart-sass.

.node-version

@@ -22,6 +22,7 @@ describe('./dist/ folder', () => {
 
   it('contains source maps', () => {
     for (const file of distCSS) {
+      if (file.includes('support')) { continue }
       expect(distMap).toContain(`${file}.map`)
     }
   })

.nvmrc

@@ -78,3 +78,10 @@ See [color utility classes](/utilities/colors) for a list of all the functional
 | `.text-inherit`             | `.color-fg-inherit`            |
 
 A few more selectors and variables were removed. Please refer to [deprecations.json](https://github.com/primer/css/blob/main/src/deprecations.json) for a complete list.
+
+Note: The `<kbd>` styles also got removed from the markdown bundle. In case you import the `markdown` bundle **without** the `base` bundle, make sure to import the `<kbd>` styles as well:
+
+```diff
+@import "@primer/css/markdown/index.scss";
++ @import "@primer/css/base/kbd.scss";
+```

__tests__/build.test.js

@@ -40,6 +40,7 @@
     "@changesets/changelog-github": "0.4.1",
     "@changesets/cli": "2.17.0",
     "@github/prettier-config": "0.0.4",
+    "@koddsson/postcss-sass": "5.0.0",
     "autoprefixer": "10.3.4",
     "cssstats": "4.0.2",
     "eslint": "7.32.0",
@@ -56,7 +57,6 @@
     "postcss-calc": "8.0.0",
     "postcss-import": "14.0.2",
     "postcss-load-config": "3.1.0",
-    "postcss-node-sass": "3.1.1",
     "postcss-scss": "4.0.0",
     "postcss-simple-vars": "6.0.3",
     "prettier": "2.4.1",

docs/content/support/v18-migration.mdx

@@ -0,0 +1,27 @@
+import autoprefixer from 'autoprefixer'
+import sass from '@koddsson/postcss-sass'
+import scss from 'postcss-scss'
+import scssImport from 'postcss-import'
+import {fileURLToPath} from 'url'
+import {join, dirname} from 'path'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+
+const plugins = [
+  scssImport,
+  sass({
+    includePaths: [join(__dirname, 'node_modules')],
+    outputStyle: process.env.CSS_MINIFY === '0' ? 'expanded' : 'compressed'
+  }),
+  autoprefixer,
+];
+
+export default {
+  map: {
+    sourcesContent: false,
+    annotation: true
+  },
+  syntax: scss,
+  parser: scss,
+  plugins: plugins
+}

package.json

@@ -1,8 +1,7 @@
 #!/usr/bin/env node
 import {globby} from 'globby'
+import compiler from './primer-css-compiler.js'
 import cssstats from 'cssstats'
-import postcss from 'postcss'
-import loadConfig from 'postcss-load-config'
 import {dirname, join} from 'path'
 
 import analyzeVariables from './analyze-variables.js'
@@ -27,8 +26,6 @@ const bundleNames = {
 async function dist() {
   try {
     const bundles = {}
-    const {plugins, options} = await loadConfig()
-    const processor = postcss(plugins)
 
     await remove(outDir)
     await mkdirp(statsDir)
@@ -53,7 +50,8 @@ async function dist() {
 
       const scss = await readFile(from, encoding)
       meta.imports = getExternalImports(scss, path).map(getPathName)
-      const result = await processor.process(scss, Object.assign({from, to}, options))
+      const result = await compiler(scss, {from, to})
+
       await Promise.all([
         writeFile(to, result.css, encoding),
         writeFile(meta.stats, JSON.stringify(cssstats(result.css)), encoding),

postcss.config.cjs

@@ -0,0 +1,12 @@
+import postcss from 'postcss'
+import postCssConfig from '../postcss.config.js'
+
+export default async function compiler(css, options) {
+  const { plugins, ...config } = postCssConfig
+
+  const result = await postcss(plugins).process(css, {
+    ...config,
+    ...options
+  })
+  return result
+}

postcss.config.js

@@ -10,8 +10,6 @@
   line-height: $body-line-height;
   word-wrap: break-word;
 
-  @import "../base/kbd.scss"; // adds support for keyboard shortcuts
-
   // Clearfix on the markdown body
   &::before {
     display: table;