Bootstrap color map utilities (?bug?)

[ahnlak]

I've encountered a problem using this library to build a custom Bootstrap (5.2.1) custom stylesheet.

To replicate: copying the example directly from https://getbootstrap.com/docs/5.2/customize/color/#generating-utilities will result in and error:

Error: $map2: ("blue-100": #cfe2ff, "blue-200": #9ec5fe, "blue-300": #6ea8fe, "blue-400": #3d8bfd, "blue-500": #0d6efd, "blue-600": #0a58ca, "blue-700": #084298, "blue-800": #052c65, "blue-900": #031633, "indigo-100": #e0cffc, "indigo-200": #c29ffa, "indigo-300": #a370f7, "indigo-400": #8540f5, "indigo-500": #6610f2, "indigo-600": #520dc2, "indigo-700": #3d0a91, "indigo-800": #290661, "indigo-900": #140330, "purple-100": #c5b3e6, "purple-200": #e2d9f3, "purple-300": #a98eda, "purple-400": #8c68cd, "purple-500": #6f42c1, "purple-600": #59359a, "purple-700": #432874, "purple-800": #2c1a4d, "purple-900": #160d27, "pink-100": #f7d6e6, "pink-200": #efadce, "pink-300": #e685b5, "pink-400": #de5c9d, "pink-500": #d63384, "pink-600": #ab296a, "pink-700": #801f4f, "pink-800": #561435, "pink-900": #2b0a1a, "red-100": #f8d7da, "red-200": #f1aeb5, "red-300": #ea868f, "red-400": #e35d6a, "red-500": #dc3545, "red-600": #b02a37, "red-700": #842029, "red-800": #58151c, "red-900": #2c0b0e, "orange-100": #ffe5d0, "orange-200": #fecba1, "orange-300": #feb272, "orange-400": #fd9843, "orange-500": #fd7e14, "orange-600": #ca6510, "orange-700": #984c0c, "orange-800": #653208, "orange-900": #331904, "yellow-100": #fff3cd, "yellow-200": #ffe69c, "yellow-300": #ffda6a, "yellow-400": #ffcd39, "yellow-500": #ffc107, "yellow-600": #cc9a06, "yellow-700": #997404, "yellow-800": #664d03, "yellow-900": #332701, "green-100": #d1e7dd, "green-200": #a3cfbb, "green-300": #75b798, "green-400": #479f76, "green-500": #198754, "green-600": #146c43, "green-700": #0f5132, "green-800": #0a3622, "green-900": #051b11, "teal-100": #d2f4ea, "teal-200": #a6e9d5, "teal-300": #79dfc1, "teal-400": #4dd4ac, "teal-500": #20c997, "teal-600": #1aa179, "teal-700": #13795b, "teal-800": #0d503c, "teal-900": #06281e, "cyan-100": #cff4fc, "cyan-200": #9eeaf9, "cyan-300": #6edff6, "cyan-400": #3dd5f3, "cyan-500": #0dcaf0, "cyan-600": #0aa2c0, "cyan-700": #087990, "cyan-800": #055160, "cyan-900": #032830) is not a map.: test.scss on line 9, at column 1

It looks like a problem with the format in map-get; specifically, if I modify:

         map-get(map-get($utilities, "color"), "values"),
          (
            $all-colors
          ),

and remove the enclosing brackets thusly:

         map-get(map-get($utilities, "color"), "values"),
            $all-colors

then the error disappears and everything is fine.

However, the original sample code from Bootstrap does compile without error using the Dart SASS that's installed on my system.

I don't know SCSS well enough to know whether the problem is with scssphp or if it's sticking to the spec properly and it's only working under Dart because of a bug in the way they handle things - if so, feel free to close this issue :-)

[stof]

scssphp 1.x does not fully stick to the spec (dart-sass does, as it is the reference implementation).

We have an in-progress rewrite of scssphp for 2.0 to become spec compliant.

[ahnlak]

Cheers; didn't want to declare it a bug without knowing for sure if it was you or Bootstrap doing it wrong :-)

[spizzo14]

can anybody urgently put a fix in on this? willing to pay, extremely urgent.

[stof]

This is essentially the same bug than #504. Our parsing turns those parenthesis into a list containing a single value instead of a parenthesized expression. This is why removing those (useless) parentheses fixes the issue.

I'm not sure fixing that in our 1.x codebase is even possible. The root cause of this is that our 1.x parsing is not spec compliant.