Add SCSS testing of the utilities API

.github/workflows/css.yml

@@ -33,5 +33,8 @@ jobs:
       - name: Install npm dependencies
         run: npm ci
 
+      - name: Run CSS tests
+        run: npm run css-test
+
       - name: Build CSS
         run: npm run css

.stylelintrc

@@ -27,5 +27,14 @@
       }
     ],
     "scss/selector-no-union-class-name": true
-  }
+  },
+  "overrides": [
+    {
+      "files": "scss/**/*.{test,spec}.scss",
+      "rules": {
+        "scss/dollar-variable-default": null,
+        "declaration-no-important": null
+      }
+    }
+  ]
 }

package.json

@@ -54,6 +54,7 @@
     "css-prefix-main": "postcss --config build/postcss.config.js --replace \"dist/css/*.css\" \"!dist/css/*.rtl*.css\" \"!dist/css/*.min.css\"",
     "css-prefix-examples": "postcss --config build/postcss.config.js --replace \"site/content/**/*.css\"",
     "css-prefix-examples-rtl": "cross-env-shell NODE_ENV=RTL postcss --config build/postcss.config.js --dir \"site/content/docs/$npm_package_config_version_short/examples/\" --ext \".rtl.css\" --base \"site/content/docs/$npm_package_config_version_short/examples/\" \"site/content/docs/$npm_package_config_version_short/examples/{blog,carousel,dashboard,cheatsheet}/*.css\" \"!site/content/docs/$npm_package_config_version_short/examples/{blog,carousel,dashboard,cheatsheet}/*.rtl.css\"",
+    "css-test": "jasmine --config=scss/tests/jasmine.js",
     "js": "npm-run-all js-compile js-minify",
     "js-compile": "npm-run-all --aggregate-output --parallel js-compile-*",
     "js-compile-standalone": "rollup --environment BUNDLE:false --config build/rollup.config.js --sourcemap",
@@ -94,6 +95,7 @@
     "watch-css-main": "nodemon --watch scss/ --ext scss --exec \"npm-run-all css-lint css-compile css-prefix\"",
     "watch-css-dist": "nodemon --watch dist/css/ --ext css --ignore \"dist/css/*.rtl.*\" --exec \"npm run css-rtl\"",
     "watch-css-docs": "nodemon --watch site/assets/scss/ --ext scss --exec \"npm run css-lint\"",
+    "watch-css-test": "nodemon --watch scss/ --ext scss,js --exec \"npm run css-test\"",
     "watch-js-main": "nodemon --watch js/src/ --ext js --exec \"npm-run-all js-lint js-compile\"",
     "watch-js-docs": "nodemon --watch site/assets/js/ --ext js --exec \"npm run js-lint\""
   },
@@ -124,6 +126,7 @@
     "hammer-simulator": "0.0.1",
     "hugo-bin": "^0.96.0",
     "ip": "^2.0.0",
+    "jasmine": "^4.0.2",
     "jquery": "^3.6.2",
     "karma": "^6.4.1",
     "karma-browserstack-launcher": "1.4.0",
@@ -143,6 +146,7 @@
     "rollup-plugin-istanbul": "^4.0.0",
     "rtlcss": "^4.0.0",
     "sass": "^1.57.1",
+    "sass-true": "^6.1.0",
     "shelljs": "^0.8.5",
     "stylelint": "^14.16.0",
     "stylelint-config-twbs-bootstrap": "^7.0.0",

scss/mixins/_utilities.scss

@@ -1,6 +1,6 @@
 // Utility generator
 // Used to generate utilities & print utilities
-@mixin generate-utility($utility, $infix, $is-rfs-media-query: false) {
+@mixin generate-utility($utility, $infix: "", $is-rfs-media-query: false) {
   $values: map-get($utility, values);
 
   // If the values are a list or string, convert it into a map

scss/tests/jasmine.js

@@ -0,0 +1,17 @@
+/* eslint-env node */
+
+const path = require('node:path')
+
+module.exports = {
+  spec_dir: 'scss' /* eslint-disable-line camelcase */,
+
+  // Make Mocha look for `.test.scss` files
+  spec_files: ['**/*.{test,spec}.scss'] /* eslint-disable-line camelcase */,
+
+  // Compile them into JS scripts running `sass-true`
+  requires: [path.join(__dirname, 'sass-true/register')],
+
+  // Ensure we use `require` so that the require.extensions works
+  // as `import` completely bypasses it
+  jsLoader: 'require'
+}

scss/tests/mixins/_color-modes.test.scss

@@ -0,0 +1,69 @@
+// stylelint-disable selector-attribute-quotes
+
+@import "../../functions";
+@import "../../variables";
+@import "../../variables-dark";
+@import "../../maps";
+@import "../../mixins";
+
+@include describe("global $color-mode-type: data") {
+  @include it("generates data attribute selectors for dark mode") {
+    @include assert() {
+      @include output() {
+        @include color-mode(dark) {
+          .element {
+            color: var(--bs-primary-text);
+            background-color: var(--bs-primary-bg-subtle);
+          }
+        }
+        @include color-mode(dark, true) {
+          --custom-color: #{mix($indigo, $blue, 50%)};
+        }
+      }
+      @include expect() {
+        [data-bs-theme=dark] .element {
+          color: var(--bs-primary-text);
+          background-color: var(--bs-primary-bg-subtle);
+        }
+        [data-bs-theme=dark] {
+          --custom-color: #3a3ff8;
+        }
+      }
+    }
+  }
+}
+
+@include describe("global $color-mode-type: media-query") {
+  @include it("generates media queries for dark mode") {
+    $color-mode-type: media-query !global;
+
+    @include assert() {
+      @include output() {
+        @include color-mode(dark) {
+          .element {
+            color: var(--bs-primary-text);
+            background-color: var(--bs-primary-bg-subtle);
+          }
+        }
+        @include color-mode(dark, true) {
+          --custom-color: #{mix($indigo, $blue, 50%)};
+        }
+      }
+      @include expect() {
+        @media (prefers-color-scheme: dark) {
+          .element {
+            color: var(--bs-primary-text);
+            background-color: var(--bs-primary-bg-subtle);
+          }
+        }
+        @media (prefers-color-scheme: dark) {
+          :root {
+            --custom-color: #3a3ff8;
+          }
+        }
+      }
+    }
+
+    $color-mode-type: data !global;
+  }
+}