v5: Drop node-sass, start reworking build and lint config

.browserslistrc

@@ -1,13 +1,13 @@
 # https://github.com/browserslist/browserslist#readme
 
->= 1%
-last 1 major version
+>= 0.5%
+last 2 major versions
 not dead
-Chrome >= 60
-Firefox >= 60
-Edge >= 15
-Explorer >= 11
-iOS >= 10
-Safari >= 10
-Android >= 6
-not ExplorerMobile <= 11
+Chrome >= 89
+Edge >= 89
+Firefox >= 89
+Firefox ESR
+iOS >= 15
+Safari >= 15
+not Explorer <= 11
+not OperaMini all

.editorconfig

@@ -5,7 +5,7 @@ root = true
 [*]
 charset = utf-8
 end_of_line = lf
-indent_size = 4
+indent_size = 2
 indent_style = space
 insert_final_newline = true
 trim_trailing_whitespace = true

.github/workflows/css.yml

@@ -9,7 +9,7 @@ on:
 
 env:
   FORCE_COLOR: 2
-  NODE: 18
+  NODE: 20
 
 permissions:
   contents: read
@@ -33,22 +33,9 @@ jobs:
       - name: Install npm dependencies
         run: npm ci
 
+      - name: CSS Dist
+        run: npm run css
+
       - name: CSS Lint
-        run: grunt test-css
+        run: npm run css-lint
 
-      - name: CSS Dist
-        run: grunt dist-css
-
-      # Check that there are no Sass variables (`$`)
-      - name: Check built CSS files
-        shell: bash
-        run: |
-          SASS_VARS_FOUND=$(find "dist/css/" -type f -name "*.css" ! -name '*.min.css' -print0 | xargs -0 --no-run-if-empty grep -F "\$" || true)
-          if [[ -z "$SASS_VARS_FOUND" ]]; then
-            echo "Pass: No Sass variables found."
-            exit 0
-          else
-            echo "Error: Found $(echo "$SASS_VARS_FOUND" | wc -l | bc) Sass variables:"
-            echo "$SASS_VARS_FOUND"
-            exit 1
-          fi

.github/workflows/js.yml

@@ -9,7 +9,7 @@ on:
 
 env:
   FORCE_COLOR: 2
-  NODE: 18
+  NODE: 20
 
 permissions:
   contents: read
@@ -33,8 +33,11 @@ jobs:
       - name: Install npm dependencies
         run: npm ci
 
-      - name: JS Lint and Karma headless
-        run: grunt test-js
+      - name: JS Lint
+        run: npm run js-lint
+
+      - name: JS Karma headless
+        run: npm run js-test-karma
 
       - name: JS Dist
-        run: grunt dist-js
+        run: npm run js

.github/workflows/saucelabs.yml

@@ -6,7 +6,7 @@ on:
 
 env:
   FORCE_COLOR: 2
-  NODE: 18
+  NODE: 20
 
 permissions:
   contents: read

.npmrc

@@ -1 +1 @@
-lockfile-version=2
+lockfile-version=3

.stylelintignore

@@ -0,0 +1,5 @@
+**/*.min.css
+**/dist/
+**/vendor/
+/_site/
+/node_modules/

.stylelintrc.json

@@ -0,0 +1,103 @@
+{
+  "extends": [
+    "stylelint-config-standard",
+    "stylelint-config-recess-order",
+    "@stylistic/stylelint-config"
+  ],
+  "reportInvalidScopeDisables": true,
+  "reportNeedlessDisables": true,
+  "rules": {
+    "at-rule-empty-line-before": null,
+    "color-function-notation": null,
+    "color-named": "never",
+    "custom-property-empty-line-before": null,
+    "declaration-block-no-redundant-longhand-properties": null,
+    "declaration-empty-line-before": null,
+    "declaration-no-important": true,
+    "declaration-property-value-disallowed-list": {
+      "border": "none",
+      "outline": "none"
+    },
+    "font-weight-notation": [
+      "numeric",
+      {
+        "ignore": [
+          "relative"
+        ]
+      }
+    ],
+    "function-disallowed-list": [
+      "calc",
+      "lighten",
+      "darken"
+    ],
+    "media-query-no-invalid": true,
+    "no-descending-specificity": null,
+    "property-disallowed-list": [
+      "border-radius",
+      "border-top-left-radius",
+      "border-top-right-radius",
+      "border-bottom-right-radius",
+      "border-bottom-left-radius",
+      "font-size",
+      "transition"
+    ],
+    "rule-empty-line-before": null,
+    "selector-max-attribute": 2,
+    "selector-max-class": 4,
+    "selector-max-combinators": 4,
+    "selector-max-compound-selectors": 4,
+    "selector-max-id": 0,
+    "selector-max-specificity": null,
+    "selector-max-type": 2,
+    "selector-max-universal": 1,
+    "selector-no-qualifying-type": true,
+    "selector-not-notation": "simple",
+    "@stylistic/block-closing-brace-empty-line-before": null,
+    "@stylistic/block-closing-brace-newline-after": null,
+    "@stylistic/block-opening-brace-space-before": null,
+    "@stylistic/max-empty-lines": 2,
+    "@stylistic/max-line-length": null,
+    "@stylistic/number-leading-zero": "never",
+    "@stylistic/unicode-bom": "never"
+  },
+  "overrides": [
+    {
+      "files": [
+        "**/*.scss"
+      ],
+      "extends": [
+        "stylelint-config-standard-scss"
+      ],
+      "rules": {
+        "scss/at-extend-no-missing-placeholder": null,
+        "scss/at-if-closing-brace-newline-after": null,
+        "scss/at-if-closing-brace-space-after": null,
+        "scss/at-if-no-null": null,
+        "scss/at-mixin-argumentless-call-parentheses": "always",
+        "scss/at-mixin-pattern": null,
+        "scss/at-rule-conditional-no-parentheses": null,
+        "scss/comment-no-empty": null,
+        "scss/dimension-no-non-numeric-values": true,
+        "scss/dollar-variable-colon-space-after": "at-least-one-space",
+        "scss/dollar-variable-default": [
+          true,
+          {
+            "ignore": "local"
+          }
+        ],
+        "scss/dollar-variable-empty-line-before": null,
+        "scss/double-slash-comment-empty-line-before": null,
+        "scss/double-slash-comment-whitespace-inside": null
+      }
+    },
+    {
+      "files": [
+        "scss/{functions,mixins,utilities}/*.scss"
+      ],
+      "rules": {
+        "scss/dollar-variable-default": null
+      }
+    }
+  ]
+}