chore: migrate spellchecking from github action to npm task (#2185)

Migrate from the cspell GitHub Action to the npm package.

* Easier to run spellchecking locally.
* More consistent setup between projects on GitHub or other forges.

While I was doing this, I also amended the config to allow "compound
words", then dropped any terms that were already in built-in
dictionaries and that became redundant to add in our config after
enabling compound words.

Author: SethFalco

.github/workflows/main.yml

@@ -25,7 +25,6 @@ jobs:
           cache: yarn
       - run: yarn install
       - run: yarn lint
-      - run: yarn test:types
   types:
     name: Types
     runs-on: ubuntu-latest
@@ -38,6 +37,18 @@ jobs:
           cache: yarn
       - run: yarn install
       - run: yarn test:types
+  spellcheck:
+    name: Spell Check
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v5
+      - run: corepack enable
+      - uses: actions/setup-node@v5
+        with:
+          node-version: ${{ env.NODE }}
+          cache: yarn
+      - run: yarn install
+      - run: yarn spellcheck
   test:
     name: ${{ matrix.os }} Node.js ${{ matrix.node-version }}
     strategy:

.github/workflows/spellcheck.yml

@@ -1,27 +1,16 @@
 {
   "$schema": "https://raw.githubusercontent.com/streetsidesoftware/cspell/main/cspell.schema.json",
   "version": "0.2",
+  "allowCompoundWords": true,
   "words": [
-    "Bézier",
-    "crosspoint",
     "deoptimizations",
     "deoptimize",
     "deoptimized",
-    "fontawesome",
     "Fontello",
-    "Fonticons",
-    "frontends",
     "inlines",
-    "opencollective",
-    "subpoint",
-    "subselector",
-    "xast",
-    "Xlink",
     // Abbreviations
     "elems", // elements
     "unenc", // unencoded
-    // SVG Keywords
-    "currentcolor",
     // SVG Nodes / Attributes and CSS Properties, including plurals
     "bbox",
     "hkern",
@@ -38,31 +27,23 @@
     // Storage
     "kibibytes",
     // Software
-    "grunt-svgmin",
-    "Inkscape",
     "SVGOMG",
-    // NPM Packages
-    "csstree",
-    "csswhat",
     // Names
     "André",
     "Baranovskiy",
     "Dmitry",
     "Keerthi",
   ],
   "ignorePaths": [
-    ".github/workflows/",
-    ".gitignore",
-    ".yarnrc.yml",
     "*.svg.txt",
     "*.svg",
+    "coverage/",
     "cspell.jsonc",
+    "dist/",
     "LICENSE",
     "test/regression/lists/",
   ],
   "ignoreRegExpList": [
-    "-moz", // Mozilla Firefox CSS prefix
-    "'.+?.svg',", // path to file with .svg extension
     "(?:xlink|sodipodi)(?::[a-z]+)?", // Common SVG namespaces
     "[a-z]+: '#[a-f\\d]+',", // Color names in _collection.js
     "[a-z]+…", // Words that have been cut off by an ellipsis
@@ -71,21 +52,16 @@
     "\\*\\*SVG O\\*\\*ptimizer", // README
     "\\b[aprs]data\\b",
     "&.+?;", // HTML entity
-    "^svgo .+", // Command-line example of SVGO
     "<svg.+>", // Inline SVG in code
     "Atrule", // At-rule
     "data:image/.+", // Data URI
     "datauri", // Data URI
     "descs", // Abbreviation of "descriptions"
     "ENOCLS|ENOATTRS",
-    "id=([\"']).+?\\1", // ID attribute of inline SVG
     "import .+", // Import statements in Javascript
-    "newres",
-    "nums", // Abbreviation of "numbers"
     "onwarn", // Rollup API,
     "QRAB|QRCD",
     "rrggbb",
     "sax\\..+", // Any properties of the sax API
-    "shorthex", // Parameter of convertColors plugin
   ],
 }

cspell.jsonc

@@ -88,6 +88,7 @@
     "clean": "yarn clean:build && yarn clean:types",
     "clean:build": "rimraf dist",
     "clean:types": "rimraf types",
+    "spellcheck": "cspell -u .",
     "prepublishOnly": "yarn clean && yarn build"
   },
   "jest": {
@@ -123,6 +124,7 @@
     "@types/sax": "^1.2.7",
     "@types/tar-stream": "^3.1.3",
     "cross-env": "^7.0.3",
+    "cspell": "^9.2.2",
     "eslint": "^9.25.1",
     "globals": "^14.0.0",
     "jest": "^29.7.0",

package.json

@@ -44,8 +44,10 @@ export const fn = (_root, params) => {
     element: {
       enter: (node) => {
         if (node.attributes.viewBox != null) {
-          const nums = node.attributes.viewBox.trim().split(/(?:\s,?|,)\s*/g);
-          node.attributes.viewBox = nums
+          const numbers = node.attributes.viewBox
+            .trim()
+            .split(/(?:\s,?|,)\s*/g);
+          node.attributes.viewBox = numbers
             .map((value) => {
               const num = Number(value);
               return Number.isNaN(num)

plugins/cleanupNumericValues.js

@@ -123,7 +123,7 @@ export const fn = (_root, params) => {
             if (rgb2hex) {
               const match = val.match(regRGB);
               if (match != null) {
-                const nums = match.slice(1, 4).map((m) => {
+                const numbers = match.slice(1, 4).map((m) => {
                   let n;
                   if (m.indexOf('%') > -1) {
                     n = Math.round(parseFloat(m) * 2.55);
@@ -132,7 +132,7 @@ export const fn = (_root, params) => {
                   }
                   return Math.max(0, Math.min(n, 255));
                 });
-                val = convertRgbToHex(nums);
+                val = convertRgbToHex(numbers);
               }
             }
 

plugins/convertColors.js

@@ -31,12 +31,12 @@ export const fn = () => {
           if (node.name === 'svg' && parentNode.type !== 'root') {
             return;
           }
-          const nums = node.attributes.viewBox.split(/[ ,]+/g);
+          const numbers = node.attributes.viewBox.split(/[ ,]+/g);
           if (
-            nums[0] === '0' &&
-            nums[1] === '0' &&
-            node.attributes.width.replace(/px$/, '') === nums[2] && // could use parseFloat too
-            node.attributes.height.replace(/px$/, '') === nums[3]
+            numbers[0] === '0' &&
+            numbers[1] === '0' &&
+            node.attributes.width.replace(/px$/, '') === numbers[2] && // could use parseFloat too
+            node.attributes.height.replace(/px$/, '') === numbers[3]
           ) {
             delete node.attributes.viewBox;
           }