Merge pull request #520 from oddbird/update-sass

Use sass pkg: importer

.sassdocrc

@@ -1,4 +1,5 @@
 theme: herman
+displayTheme: herman
 dest: _site/styleguide/
 
 package: ./package.json
@@ -49,6 +50,7 @@ herman:
     - name: Herman
       url: https://www.oddbird.net/herman/
   sass:
+    implementation: sass-embedded
     jsonFile: _built/css/json.css
     sassOptions:
       loadPaths:

package.json

@@ -61,15 +61,15 @@
     "@11ty/eleventy-plugin-rss": "^1.2.0",
     "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
     "@11ty/is-land": "^4.0.0",
-    "@babel/core": "^7.23.9",
-    "@babel/preset-env": "^7.23.9",
+    "@babel/core": "^7.24.0",
+    "@babel/preset-env": "^7.24.0",
     "@netlify/plugin-a11y": "^1.0.0-beta.1",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-terser": "^0.4.4",
     "@tommoor/remove-markdown": "^0.3.2",
-    "autoprefixer": "^10.4.17",
+    "autoprefixer": "^10.4.18",
     "chalk": "^5.3.0",
     "chokidar-cli": "^3.0.0",
     "core-js": "^3.36.0",
@@ -100,9 +100,9 @@
     "rimraf": "^5.0.5",
     "rollup": "^4.12.0",
     "sanitize-html": "^2.12.1",
-    "sass": "^1.71.1",
+    "sass-embedded": "^1.71.1",
     "sassdoc": "^2.7.4",
-    "sassdoc-theme-herman": "^5.0.1",
+    "sassdoc-theme-herman": "^6.0.0",
     "slugify": "^1.6.6",
     "striptags": "^3.2.0",
     "stylelint": "^16.2.1",
@@ -111,12 +111,5 @@
     "typescript": "^5.3.3",
     "typogr": "^0.6.8"
   },
-  "yarn-upgrade-all": {
-    "ignore": [
-      "#",
-      "@11ty/eleventy",
-      "date-fns"
-    ]
-  },
   "packageManager": "[email protected]"
 }

scripts/compile-sass.js

@@ -1,91 +1,39 @@
 /* eslint-disable no-console */
 
 import { join, resolve } from 'node:path';
-import { pathToFileURL } from 'node:url';
 
 import autoprefixer from 'autoprefixer';
 import chalk from 'chalk';
 import fs from 'fs-extra';
 import postcss from 'postcss';
-import { compile } from 'sass';
+import { initAsyncCompiler, NodePackageImporter } from 'sass-embedded';
 
 const __dirname = import.meta.dirname;
 const baseDir = resolve(__dirname, '..');
 const inDir = join(baseDir, 'src', 'scss');
 const outDir = join(baseDir, '_built', 'css');
 const destCssDir = join(baseDir, 'assets', 'css');
 
-let pnp;
+const compiler = await initAsyncCompiler();
 
-try {
-  // eslint-disable-next-line global-require
-  pnp = require('pnpapi');
-} catch (error) {
-  // not in PnP; not a problem
-}
-
-const resolved = new Map();
-
-const nodeImporter = {
-  findFileUrl(url) {
-    if (url.startsWith('~')) {
-      if (pnp) {
-        // We need to resolve the imported path to a node module path. Instead of
-        // re-creating the Sass import rules (where, for example,
-        // ``@import 'foo'`` can be shorthand for ``@import 'foo/_index.scss'``),
-        // we extract the module name from the full path, resolve that, then
-        // re-add the rest of the path.
-        const components = url.substring(1).split('/');
-        // Adjust for scoped packages (e.g. ``@foo/bar``)...
-        if (components[0].startsWith('@') && components.length > 1) {
-          components[0] = components.slice(0, 2).join('/');
-          components.splice(1, 1);
-        }
-        let res;
-        if (resolved.has(components[0])) {
-          res = resolved.get(components[0]);
-        } else {
-          res = pnp.resolveToUnqualified(components[0], `${baseDir}/`);
-          resolved.set(components[0], res);
-        }
-        if (res === null) {
-          // No resolved module found... fall back to default Sass importer
-          return null;
-        }
-        components[0] = res;
-        return new URL(pathToFileURL(components.join('/')));
-      }
-      // Try loading file from "node_modules" dir
-      return new URL(
-        pathToFileURL(join(baseDir, 'node_modules', url.substring(1))),
-      );
-    }
-    // Fall back to default Sass importer
-    return null;
-  },
+const outputFile = async (file, inputName, contents) => {
+  await fs.outputFile(file, contents.toString().trim());
+  console.log(chalk.green.bold(`Compiled Sass: ${inputName} => ${file}`));
 };
 
-const outputFile = (file, inputName, contents) =>
-  fs.outputFile(file, contents.toString().trim(), (writeErr) => {
-    console.log(chalk.green.bold(`Compiled Sass: ${inputName} => ${file}`));
-    if (writeErr) {
-      throw writeErr;
-    }
-  });
-
-const compileSass = ({ name, usePostCSS }) => {
+const compileSass = async ({ name, usePostCSS }) => {
   const inFilename = `${name}.scss`;
   const inFile = join(inDir, inFilename);
   const outFilename = `${name}.css`;
   const outFile = join(outDir, outFilename);
   const outMap = join(outDir, `${outFilename}.map`);
   const destCssFile = join(destCssDir, outFilename);
   try {
-    const result = compile(inFile, {
+    const result = await compiler.compileAsync(inFile, {
       style: 'compressed',
       sourceMap: usePostCSS,
       sourceMapIncludeSources: true,
-      importers: [nodeImporter],
+      importers: [new NodePackageImporter()],
     });
     if (usePostCSS) {
       return postcss([autoprefixer])
@@ -113,13 +61,16 @@ const compileSass = ({ name, usePostCSS }) => {
     }
     return outputFile(outFile, inFilename, result.css);
   } catch (error) {
-    throw error.message;
+    console.error(chalk.red(error));
+    return null;
   }
 };
 
-compileSass({ name: 'screen', usePostCSS: true });
-compileSass({ name: 'styleguide', usePostCSS: true });
-compileSass({ name: 'json' });
+Promise.all([
+  compileSass({ name: 'screen', usePostCSS: true }),
+  compileSass({ name: 'styleguide', usePostCSS: true }),
+  compileSass({ name: 'json' }),
 
-// page-specific CSS; this should maybe not be hardcoded?
-compileSass({ name: 'page/support-unknown', usePostCSS: true });
+  // page-specific CSS; this should maybe not be hardcoded?
+  compileSass({ name: 'page/support-unknown', usePostCSS: true }),
+]).finally(() => compiler.dispose());

src/scss/components/_search.scss

@@ -3,7 +3,7 @@
 
 @layer search {
   @include meta.load-css(
-    '~@algolia/algoliasearch-netlify-frontend/dist/algoliasearchNetlify.css'
+    'pkg:@algolia/algoliasearch-netlify-frontend/dist/algoliasearchNetlify.css'
   );
 }
 

src/scss/config/_fonts.scss

@@ -1,5 +1,5 @@
 @use 'tools';
-@use '~sassdoc-theme-herman/scss/utilities' as herman;
+@use 'pkg:sassdoc-theme-herman' as herman;
 @use 'sass:meta';
 
 /// # Fonts Config

src/scss/config/_index.scss

@@ -19,7 +19,7 @@
 @use 'scale/page-sizes';
 @use 'scale/spacing-sizes';
 @use 'scale/theme-sizes';
-@use '~lite-youtube-embed/src/lite-yt-embed.css';
+@use 'pkg:lite-youtube-embed/src/lite-yt-embed.css';
 @include tools.add-colors(meta.module-variables('brand'));
 @include tools.add-colors(meta.module-variables('background'));
 @include tools.add-colors(meta.module-variables('ccs-defaults'));

src/scss/config/_tools.scss

@@ -1,4 +1,4 @@
-@forward '~accoutrement/sass/tools' with (
+@forward 'pkg:accoutrement' with (
   $color-var-prefix: '',
   $size-var-prefix: '',
   $ratio-var-prefix: '',

src/scss/config/animation/_index.scss

@@ -1,4 +1,4 @@
-@use '~sassdoc-theme-herman/scss/utilities' as herman;
+@use 'pkg:sassdoc-theme-herman' as herman;
 @use '../tools';
 @use 'changes';
 @use 'times';

src/scss/config/color/_index.scss

@@ -1,4 +1,4 @@
-@use '~sassdoc-theme-herman/scss/utilities' as herman;
+@use 'pkg:sassdoc-theme-herman' as herman;
 @use '../tools';
 @use 'sass:meta';
 @use 'brand';

src/scss/config/scale/_index.scss

@@ -1,4 +1,4 @@
-@use '~sassdoc-theme-herman/scss/utilities' as herman;
+@use 'pkg:sassdoc-theme-herman' as herman;
 @use '../tools';
 @use 'sass:meta';
 @use 'ratios';

src/scss/initial/_colors.scss

@@ -1,6 +1,6 @@
 @use 'sass:meta';
 @use '../config';
-@use '~cascading-color-systems' as ccs with (
+@use 'pkg:cascading-color-systems' as ccs with (
   $hues: config.ccs('hues'),
   $saturation: config.ccs('saturation'),
   $contrast: config.ccs('contrast'),

src/scss/initial/_themes.scss

@@ -1,5 +1,5 @@
 @use '../config/color' as config;
-@use '~cascading-color-systems' as ccs;
+@use 'pkg:cascading-color-systems' as ccs;
 
 /// # Preset Color Themes
 /// We define several custom color themes to choose from.

src/scss/json.scss

@@ -1,3 +1,3 @@
 @use 'config';
-@use '~sassdoc-theme-herman/scss/utilities' as herman;
+@use 'pkg:sassdoc-theme-herman' as herman;
 @include herman.export(herman.$herman);

src/scss/layout/_alert.scss

@@ -1,4 +1,4 @@
-@use '~cascading-color-systems' as ccs;
+@use 'pkg:cascading-color-systems' as ccs;
 
 // change how much we fade the background color based on overall page mode
 html {

src/scss/layout/_anchor-link.scss

@@ -1,4 +1,4 @@
-@use '~accoutrement/sass/tools';
+@use 'pkg:accoutrement' as tools;
 
 .anchor-link-wrapper {
   display: inline-block;

src/scss/screen.scss

@@ -1,7 +1,7 @@
 // Screen
 // ======
 
-@use '~cssremedy/css/remedy';
+@use 'pkg:cssremedy/css/remedy';
 @use 'config';
 @use 'initial';
 @use 'forms';