Add custom Sass debug testsbasic-sass-tests

3 files changed, 134 insertions, 0 deletions

diff --git a/.gitignore b/.gitignore
index 9817c71118..d1b460e881 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,8 @@
 # Ignore docs files
 /_site/
+# Ignore Sass tests
+/test/output.css
+/test/output.css.map
 # Hugo resources folder
 /resources/
 
diff --git a/package.json b/package.json
index b412f65c2c..9a57b67461 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,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": "sass --style expanded --source-map --embed-sources --no-error-css test/index.scss:test/output.css",
     "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",
diff --git a/test/index.scss b/test/index.scss
new file mode 100644
index 0000000000..dcbfa342a5
--- /dev/null
+++ b/test/index.scss
@@ -0,0 +1,130 @@
+// stylelint-disable scss/dollar-variable-default
+
+@use "sass:map";
+
+// Configuration
+@import "../scss/functions";
+
+$primary: #800080;
+$spacer: 2rem;
+
+$custom-color: #df711b;
+
+$custom-theme-colors: (
+  "custom": $custom-color
+);
+
+// Rest of the required Bootstrap imports
+@import "../scss/variables";
+
+$theme-colors: map-merge($theme-colors, $custom-theme-colors);
+
+$spacers: map-merge(
+  $spacers,
+  (
+    6: $spacer * 4
+  )
+);
+
+// Test
+//
+// Primary should be purple instead of #0d6efd (blue).
+
+@if map.get($theme-colors, "primary") != purple {
+  @warn "The primary variable and key in $theme-colors should be purple.";
+  @debug "Output:";
+  @debug "Primary is " + map.get($theme-colors, "primary");
+}
+
+// Test
+//
+// `custom` should be in all three specified maps.
+
+$expected-theme-colors: (
+  "primary": "",
+  "secondary": "",
+  "success": "",
+  "info": "",
+  "warning": "",
+  "danger": "",
+  "light": "",
+  "dark": "",
+  "custom": ""
+);
+
+@if map.keys($theme-colors) != map.keys($expected-theme-colors) {
+  @if $debug == true {
+    @debug "Expected: " + map.keys($expected-theme-colors);
+    @debug "Actual:   " + map.keys($theme-colors);
+  }
+  @warn "Keys in $theme-colors don't match expected output.";
+}
+@if map.keys($theme-colors-rgb) != map.keys($expected-theme-colors) {
+  @debug "Expected: " + map.keys($expected-theme-colors);
+  @debug "Actual:   " + map.keys($theme-colors-rgb);
+  @warn "Keys in $theme-colors-rgb don't match expected output.";
+}
+@if map.keys($utilities-colors) != map.keys($expected-theme-colors) {
+  @debug "Expected: " + map.keys($expected-theme-colors);
+  @debug "Actual:   " + map.keys($utilities-colors);
+  @warn "Keys in $utilities-colors don't match expected output.";
+}
+
+
+// Test
+//
+// Utilities maps should include custom, black, white, and body.
+
+$expected-utility-colors: (
+  "primary": "",
+  "secondary": "",
+  "success": "",
+  "info": "",
+  "warning": "",
+  "danger": "",
+  "light": "",
+  "dark": "",
+  "custom": "",
+  "custom2": "",
+  "black": "",
+  "white": "",
+  "body": ""
+);
+
+@if map.keys($utilities-text-colors) != map.keys($expected-utility-colors) {
+  @debug "Expected: " + map.keys($expected-utility-colors);
+  @debug "Actual:   " + map.keys($utilities-text-colors);
+  @warn "Keys in $utilities-text-colors don't match expected output.";
+}
+@if map.keys($utilities-bg-colors) != map.keys($expected-utility-colors) {
+  @debug "Expected: " + map.keys($expected-utility-colors);
+  @debug "Actual:   " + map.keys($utilities-bg-colors);
+  @warn "Keys in $utilities-bg-colors don't match expected output.";
+}
+
+
+// Test
+//
+// Spacers should be doubled and include a 6th spacer. $spacers should also match $gutters.
+
+$expected-spacers: (
+  0: 0,
+  1: .5rem,
+  2: 1rem,
+  3: 2rem,
+  4: 3rem,
+  5: 6rem,
+  6: 8rem
+);
+
+@if map.keys($spacers) != map.keys($expected-spacers) {
+  @debug "Expected: " + map.values($expected-spacers);
+  @debug "Actual:   " + map.values($spacers);
+  @warn "Values in $spacers don't match expected output.";
+}
+
+@if map.keys($spacers) != map.keys($gutters) {
+  @debug "Spacers: " + map.values($spacers);
+  @debug "Gutters: " + map.values($gutters);
+  @warn "Keys in $spacers and $gutters don't match.";
+}