HDS-2367: Better SCSS tool to replace BEM util

[NikoHelle]

Description

Constructing scss files with the style that was introduced in the cookie-consent is very verbose and requires a tedious amount of @if $all or $xyz or $other blocks.

The "_bem.scss" helps to create selectors for all combinations of block + modifier + element, but is not very usable with the @if...syntax.

This tool makes creating scss and outputting css simpler.

Instead of (examples from button.scss)

@mixin button(
  $all: true,
  $base: false,
  $icon: false,
  $small: false,
  $fullwidth: false,
  $primary: false,
  $secondary: false,
  $supplementary: false,
  $clear: false,
  $success: false,
  $danger: false,
  $themeCoat: false,
  $themeBlack: false,
  $override: null,
  $react: false
)

 @if $all or $base {
    @include BemUtil.block($className, if($override, true, false), $react) {

You can use

@mixin button($modifiers: true, $elements: true, $extras: true, $config: null) {
  $void: init-multi-sass(
    $modifiers: $modifiers,
    $elements: $elements,
    $extras: $extras,
    $block: 'button',
    $config: $config,
  );

  @include block {
    @include if-content-allowed {
    

This new tool, named "multi-sass", stores the arguments passed to it, so there is no need for @if blocks. If outputs the selectors with correct prefixes and delimeters, so the old "_bem.scss" will be obsolete.

Didn't have time to do more conversions other than button-mixin. But added testing tool to verify the outputted css matches, which makes converting easier.

The tool also helps with using core with React, because it can output css directly to wrappers used in *.module.css and strip selectors used in core *.scss.

The code and logic is explained in detail in the README.md

Related Issue

Helps with HDS-2367

How Has This Been Tested?

Added scss testing tool.

Demos:

Links to demos are in the comments

Screenshots (if appropriate):

Add to changelog

• no need, internal tool.

[github-actions]

Test Results

  1 files   66 suites   12m 27s ⏱️
 65 tests  65 ✅ 0 💤 0 ❌
130 runs  130 ✅ 0 💤 0 ❌

Results for commit 2fb2804.

♻️ This comment has been updated with latest results.

[github-actions]

Preview found from hds-demo docs/preview_1457

Demos

Docs
Core Storybook
React Storybook

[timwessman]

This is huge PR, and excellent! Good work. packages/core/src/utils/README.md is really good documentation page how our scss system works!