This is a super simple Sass test to demonstrate if our maps are working as intended.
@import "../scss/functions";
$custom-color: #df711b;
$custom-theme-colors: (
"custom": $custom-color
);
@import "../scss/variables";
$theme-colors: map-merge($theme-colors, $custom-theme-colors);
@import "../scss/maps";
@debug "The following three maps should be the same, ending with the custom key.";
@debug map.keys($theme-colors);
@debug map.keys($theme-colors-rgb);
@debug map.keys($utilities-colors);
@debug "";
@debug "The following two maps should be the same: including custom and ending in black, white, and body.";
@debug map.keys($utilities-text-colors);
@debug map.keys($utilities-bg-colors);➜ ~/work/bootstrap (split-vars-maps-import) npm run css-test
> bootstrap@5.1.1 css-test /Users/mdo/work/bootstrap
> sass --style expanded --source-map --embed-sources --no-error-css test/index.scss:test/output.css
test/index.scss:35 Debug: The following three maps should be the same, ending with the custom key.
test/index.scss:36 Debug: "primary", "secondary", "success", "info", "warning", "danger", "light", "dark", "custom"
test/index.scss:37 Debug: "primary", "secondary", "success", "info", "warning", "danger", "light", "dark", "custom"
test/index.scss:38 Debug: "primary", "secondary", "success", "info", "warning", "danger", "light", "dark", "custom"
test/index.scss:40 Debug:
test/index.scss:41 Debug: The following two maps should be the same: including custom and ending in black, white, and body.
test/index.scss:42 Debug: "primary", "secondary", "success", "info", "warning", "danger", "light", "dark", "custom", "black", "white", "body"
test/index.scss:43 Debug: "primary", "secondary", "success", "info", "warning", "danger", "light", "dark", "custom", "black", "white", "body"