Use sass NodePackageImporter

.eslintrc.yml

@@ -28,7 +28,6 @@ settings:
             sassjson: 'sass-json-loader'
   import/external-module-folders:
     - 'node_modules'
-    - '.yarn'
 extends:
   - eslint:recommended
   - plugin:import/recommended

.github/dependabot.yml

@@ -23,3 +23,13 @@ updates:
         update-types:
           - 'minor'
           - 'patch'
+    ignore:
+      - dependency-name: 'chalk'
+        update-types:
+          - 'version-update:semver-major'
+      - dependency-name: 'del'
+        update-types:
+          - 'version-update:semver-major'
+      - dependency-name: 'strip-indent'
+        update-types:
+          - 'version-update:semver-major'

.husky/pre-commit

@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 yarn lint-staged

assets/js/base.js

@@ -1,4 +1,4 @@
-import sassConfig from '!json-loader!sassjson!sass-loader!../../scss/json.scss';
+import sassConfig from '../../scss/json.scss';
 
 export const initializeToggles = () => {
   const body = $('body');

lib/annotations/example.js

@@ -1,11 +1,11 @@
 'use strict';
 
 const beautify = require('html').prettyPrint;
+const { NodePackageImporter } = require('sass');
 const stripIndent = require('strip-indent');
 
 const renderIframe = require('../renderIframe');
 const getCustomNunjucksEnv = require('../utils/getCustomNunjucksEnv');
-const sassImporter = require('../utils/sassImporter');
 
 const beautifyOpts = {
   indent_size: 2,
@@ -75,7 +75,7 @@ module.exports = (env) => {
               }
             }
             let sassData = exampleItem.code;
-            let sassOptions = { importers: [sassImporter] };
+            let sassOptions = { importers: [new NodePackageImporter()] };
             /* istanbul ignore else */
             if (env.herman && env.herman.sass) {
               if (env.herman.sass.includes) {

package.json

@@ -53,9 +53,9 @@
     "test:js:src:ci": "nyc mocha -t 5000 -R dot -R mocha-junit-reporter test/js",
     "test:js:watch": "yarn test:js:client --watchAll",
     "test:sass": "mocha -R dot test/sass/test_sass.js",
-    "postinstall": "yarn husky install",
-    "prepack": "yarn pinst --disable && yarn build",
-    "postpack": "yarn pinst --enable"
+    "postinstall": "husky",
+    "prepack": "pinst --disable && yarn build",
+    "postpack": "pinst --enable"
   },
   "dependencies": {
     "cheerio": "1.0.0-rc.12",
@@ -70,7 +70,7 @@
     "nunjucks": "^3.2.4",
     "readable-stream": "^4.5.2",
     "sassdoc-extras": "^3.0.0",
-    "strip-indent": "^4.0.0",
+    "strip-indent": "^3.0.0",
     "typogr": "^0.6.8",
     "unixify": "^1.0.0",
     "vinyl-fs": "^4.0.0"
@@ -83,17 +83,16 @@
     "@babel/preset-env": "^7.23.9",
     "@testing-library/dom": "^9.3.4",
     "@testing-library/jest-dom": "^6.4.2",
-    "@yarnpkg/sdks": "^3.1.0",
     "accoutrement": "^4.0.4",
     "autoprefixer": "^10.4.17",
     "babel-jest": "^29.7.0",
     "babel-loader": "^9.1.3",
-    "chalk": "^5.3.0",
+    "chalk": "^4.1.2",
     "core-js": "^3.36.0",
     "css-loader": "^6.10.0",
     "css-minimizer-webpack-plugin": "^6.0.0",
     "cssremedy": "^0.1.0-beta.2",
-    "del": "^7.1.0",
+    "del": "^6.1.1",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-node": "^0.3.9",
@@ -143,15 +142,16 @@
     "cdocparser": "^0.15.0"
   },
   "lint-staged": {
-    "*.js": [
-      "prettier --write",
-      "eslint --fix"
+    "*.{js,cjs,ts,md}": [
+      "eslint --fix",
+      "prettier --write --ignore-unknown"
     ],
     "*.scss": [
-      "stylelint --fix"
+      "stylelint --fix --allow-empty-input",
+      "prettier --write --ignore-unknown"
     ],
     "*.{json,yml}": [
-      "prettier --write"
+      "prettier --write --ignore-unknown"
     ]
   },
   "packageManager": "[email protected]"

scss/component/_breadcrumb.scss

@@ -4,7 +4,7 @@
 /// So you always know where you are…
 /// @group component-breadcrumb
 
-@use '~accoutrement/sass/tools';
+@use 'pkg:accoutrement/sass/tools';
 
 // Breadcrumb
 // ----------

scss/component/_footer.scss

@@ -23,7 +23,7 @@
 ///     </span>
 ///   </aside>
 
-@use '~accoutrement/sass/tools';
+@use 'pkg:accoutrement/sass/tools';
 @use '../config';
 
 /// Layout for the footer credit.

scss/component/_item.scss

@@ -1,7 +1,7 @@
 // Item Styles
 // ===========
 
-@use '~accoutrement/sass/tools';
+@use 'pkg:accoutrement/sass/tools';
 
 .item {
   margin-bottom: tools.size('spacer');

scss/component/_nav.scss

@@ -3,7 +3,7 @@
 /// # Herman Navigation Components
 /// @group component-nav
 
-@use '~accoutrement/sass/tools';
+@use 'pkg:accoutrement/sass/tools';
 @use '../config';
 
 // Nav Lists

scss/component/_project-meta.scss

@@ -1,7 +1,7 @@
 // Project Meta Styles
 // ===================
 
-@use '~accoutrement/sass/tools';
+@use 'pkg:accoutrement/sass/tools';
 @use '../config';
 
 .project-links {

scss/component/_search.scss

@@ -1,7 +1,7 @@
 // Search
 // ======
 
-@use '~accoutrement/sass/tools';
+@use 'pkg:accoutrement/sass/tools';
 
 .search-heading {
   font-size: tools.size('h1');

scss/config/_abstracts.scss

@@ -1,7 +1,7 @@
 @use 'sass:list';
 @use 'sass:meta';
 @use '../utilities';
-@use '~accoutrement/sass/tools';
+@use 'pkg:accoutrement/sass/tools';
 
 // Accoutrement Utils
 // ==================

scss/config/_banner.scss

@@ -4,7 +4,7 @@
 /// Styles related to the top banner in generated Herman docs.
 /// @group style-banner
 
-@use '~accoutrement/sass/tools';
+@use 'pkg:accoutrement/sass/tools';
 
 // Banner Arrow
 // ------------

scss/config/_index.scss

@@ -1,4 +1,4 @@
-@use '~accoutrement/sass/tools' with (
+@use 'pkg:accoutrement/sass/tools' with (
   $color-var-prefix: 'herman-'
 );
 

scss/config/_type.scss

@@ -1,7 +1,7 @@
 // Typography Config
 // =================
 
-@use '~accoutrement/sass/tools';
+@use 'pkg:accoutrement/sass/tools';
 
 /// ## macro `link_if()`
 /// This Nunjucks utility macro returns either

scss/config/_z-index.scss

@@ -1,7 +1,7 @@
 // Z-Index
 // =======
 
-@use '~accoutrement/sass/tools';
+@use 'pkg:accoutrement/sass/tools';
 
 /// List of named z-index layers for Herman's layout.
 /// The order they are defined

scss/iframes/_base.scss

@@ -1,4 +1,4 @@
-@use '~accoutrement/sass/tools';
+@use 'pkg:accoutrement/sass/tools';
 
 :root {
   line-height: tools.ratio('line-height');

scss/iframes/_color.scss

@@ -1,7 +1,7 @@
 // Preview Layouts
 // ===============
 
-@use '~accoutrement/sass/tools';
+@use 'pkg:accoutrement/sass/tools';
 
 // Color Preview
 // -------------

scss/iframes/_font.scss

@@ -1,4 +1,4 @@
-@use '~accoutrement/sass/tools';
+@use 'pkg:accoutrement/sass/tools';
 
 [data-herman-preview='font'] {
   --herman-label-color: #{tools.color('slight')};

scss/iframes/_size.scss

@@ -1,4 +1,4 @@
-@use '~accoutrement/sass/tools';
+@use 'pkg:accoutrement/sass/tools';
 
 [data-herman-size='overflow'] {
   max-width: 100%;

scss/initial/_icons.scss

@@ -1,7 +1,7 @@
 // Icons
 // =====
 
-@use '~accoutrement/sass/tools';
+@use 'pkg:accoutrement/sass/tools';
 
 /// # Herman Icons
 /// Herman doesn't use very many icons internally…

scss/initial/_root.scss

@@ -1,7 +1,7 @@
 // Root Typography
 // ===============
 
-@use '~accoutrement/sass/tools';
+@use 'pkg:accoutrement/sass/tools';
 @use '../config';
 
 /// # Herman Typography

scss/initial/_sample-previews.scss

@@ -1,8 +1,8 @@
 // Sample Previews
 // ===============
 
-@use '~accoutrement/sass/tools';
-@use 'samples/colors';
+@use 'pkg:accoutrement/sass/tools';
+@use '../samples/colors';
 
 // Add color sample CSS custom properties
 :root {

scss/layout/_banner.scss

@@ -1,7 +1,7 @@
 // Banner Styles
 // =============
 
-@use '~accoutrement/sass/tools';
+@use 'pkg:accoutrement/sass/tools';
 @use '../config';
 
 // Banner Region

scss/layout/_main.scss

@@ -4,7 +4,7 @@
 /// Styles related to the main content area in generated Herman docs.
 /// @group style-main
 
-@use '~accoutrement/sass/tools';
+@use 'pkg:accoutrement/sass/tools';
 
 // Main Region
 // -----------

scss/layout/_nav.scss

@@ -4,7 +4,7 @@
 /// Styles related to the navigation sidebar in generated Herman docs.
 /// @group style-nav
 
-@use '~accoutrement/sass/tools';
+@use 'pkg:accoutrement/sass/tools';
 @use '../config';
 
 // Nav Region

scss/layout/_regions.scss

@@ -6,7 +6,7 @@
 /// as well as the `app` and `container` wrapping regions.
 /// @group style-regions
 
-@use '~accoutrement/sass/tools';
+@use 'pkg:accoutrement/sass/tools';
 
 // General
 // -------

scss/main.scss

@@ -3,7 +3,7 @@
 
 @use 'utilities';
 @use 'config';
-@use '~cssremedy/css/remedy';
+@use 'pkg:cssremedy/css/remedy';
 @use 'initial';
 @use 'layout';
 @use 'patterns';

scss/patterns/_forms.scss

@@ -1,7 +1,7 @@
 // Forms
 // =====
 
-@use '~accoutrement/sass/tools';
+@use 'pkg:accoutrement/sass/tools';
 
 ::placeholder {
   color: currentcolor;

scss/patterns/_type.scss

@@ -1,7 +1,7 @@
 // Typography Patterns
 // ===================
 
-@use '~accoutrement/sass/tools';
+@use 'pkg:accoutrement/sass/tools';
 @use '../config';
 
 // Text Blocks