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;
+ }
+}