Refactor: SCSS

[32teeth]

Problem

• The SCSS loader module did not support the SCSS :export feature, requiring the use of @include and maps or arrays created at the root level.
• This limitation also necessitated creating arrays and maps across nested SCSS files, increasing complexity.
• There were multiple redundancies, such as excessive .token declarations, which undermined the benefits of using SCSS as a preprocessor.

Solution

• Added icss mode to both webpack.config.js files.
  • Tested in both /examples and root folders using npm run watch and build.
• Introduced new @mixins:
  • export-map for leveraging the :export feature of SCSS.
• Added @function flatten to avoid nested unnamed functions within @mixins.
• Reduced redundant style class declarations using @each and @for loops.
• Created several arrays and maps, including multi-dimensional ones, in _variables:
  • $mynah-color-text
  • $mynah-statuses
  • $mynah-status-colors
  • $mynah-font-sizes
  • $mynah-padding-sizes
  • $mynah-transitions
  • $mynah-syntax-colors
  • $mynah-token-styles
  • $mynah-syntax-token-styles

Notably, $mynah-syntax-token-styles helped eliminate 70 lines of .token declarations with the following code:

@each $style, $tokens in $mynah-syntax-token-styles {
  @each $token in $tokens {
    .token.#{$token} {
      @each $property, $value in map-get($mynah-token-styles, $style) {
        #{$property}: #{$value};
      }
    }
  }
}

Notes

• More about Interoperable CSS

License

By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.