@jorilindell/hds-core 4.10.1

package/lib/utils/multi-sass/__tests__/_exports.in.css.test.scss

@@ -0,0 +1,265 @@
+/* stylelint-disable scss/function-no-unknown */
+@use 'sass-true' as *;
+@use '../exports' as *;
+@use "sass:meta";
+
+@mixin testSCSS($elements: true, $modifiers: true, $extras: true, $config: null) {
+  $void: init-multi-sass(
+    $modifiers: $modifiers,
+    $elements: $elements,
+    $extras: $extras,
+    $block: 'test',
+    $config: $config,
+  );
+
+  @include block {
+    --hds-test: var(--var-base);
+
+    @include modifier('first-mod') {
+      --hds-first-mod: var(--var-first-mod);
+    }
+
+    div.class {
+      @include element('elem') {
+        --hds-div-elem: var(--var-div);
+      }
+    }
+
+    span.class {
+      @include modifier('mod') {
+        --hds-span-mod: var(--var-span-mod);
+      }
+    }
+
+    a {
+      @include content('content') {
+        --hds-a-content: var(--var-a-content);
+      }
+    }
+
+    nav {
+      @include extra('section') {
+        section {
+          @include extra('inner-section') {
+            --hds-inner-section: var(--var-inner-section);
+          }
+        }
+      }
+    }
+
+    ul {
+      @include descendant('li') {
+        --hds-li-descendant: var(--var-li-descendant);
+      }
+    }
+
+    header.class {
+      @include selector-list((('modifier': 'hello'), ('element': 'elem'), ('custom': ' div'))) {
+        --hds-header-selector-list: var(--var-header-selector-list);
+      }
+    }
+  }
+}
+
+@include describe('Native selectors work') {
+  @include it('rules are outputted within.') {
+    @include assert {
+      @include output {
+        .wrapper {
+          @include testSCSS;
+        }
+      }
+
+      @include expect {
+        .wrapper {
+          .hds-test {
+            --hds-test: var(--var-base);
+          }
+
+          .hds-test--first-mod {
+            --hds-first-mod: var(--var-first-mod);
+          }
+
+          .hds-test div.class__elem {
+            --hds-div-elem: var(--var-div);
+          }
+
+          .hds-test span.class--mod {
+            --hds-span-mod: var(--var-span-mod);
+          }
+
+          .hds-test a {
+            --hds-a-content: var(--var-a-content);
+          }
+
+          .hds-test nav section {
+            --hds-inner-section: var(--var-inner-section);
+          }
+
+          .hds-test ul li {
+            --hds-li-descendant: var(--var-li-descendant);
+          }
+
+          .hds-test header.class--hello,
+          .hds-test header.class__elem,
+          .hds-test header.class div {
+            --hds-header-selector-list: var(--var-header-selector-list);
+          }
+        }
+      }
+    }
+  }
+}
+
+@include describe('Outer wrappers selectors work') {
+  @include it('rules are outputted within.') {
+    @include assert {
+      @include output {
+        .outer-wrapper {
+          .wrapper {
+            @include testSCSS;
+          }
+        }
+      }
+
+      @include expect {
+        .outer-wrapper {
+          .wrapper {
+            .hds-test {
+              --hds-test: var(--var-base);
+            }
+
+            .hds-test--first-mod {
+              --hds-first-mod: var(--var-first-mod);
+            }
+
+            .hds-test div.class__elem {
+              --hds-div-elem: var(--var-div);
+            }
+
+            .hds-test span.class--mod {
+              --hds-span-mod: var(--var-span-mod);
+            }
+
+            .hds-test a {
+              --hds-a-content: var(--var-a-content);
+            }
+
+            .hds-test nav section {
+              --hds-inner-section: var(--var-inner-section);
+            }
+
+            .hds-test ul li {
+              --hds-li-descendant: var(--var-li-descendant);
+            }
+
+            .hds-test header.class--hello,
+            .hds-test header.class__elem,
+            .hds-test header.class div {
+              --hds-header-selector-list: var(--var-header-selector-list);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@include describe('Config.emitContentOnly') {
+  @include it('renders only the content of root level if the value is "root" ($globals.$EMIT_CONTENT_ONLY_IN_ROOT) ') {
+    @include assert {
+      @include output {
+        .wrapper {
+          @include testSCSS(
+            $config: (
+              'emitContentOnly': 'root',
+            )
+          );
+        }
+      }
+
+      @include expect {
+        .wrapper {
+          --hds-test: var(--var-base);
+
+          &--first-mod {
+            --hds-first-mod: var(--var-first-mod);
+          }
+
+          div.class__elem {
+            --hds-div-elem: var(--var-div);
+          }
+
+          span.class--mod {
+            --hds-span-mod: var(--var-span-mod);
+          }
+
+          a {
+            --hds-a-content: var(--var-a-content);
+          }
+
+          nav section {
+            --hds-inner-section: var(--var-inner-section);
+          }
+
+          ul li {
+            --hds-li-descendant: var(--var-li-descendant);
+          }
+
+          header.class--hello,
+          header.class__elem,
+          header.class div {
+            --hds-header-selector-list: var(--var-header-selector-list);
+          }
+        }
+      }
+    }
+  }
+}
+
+@include describe('Config.emitContentOnly') {
+  @include it('renders all contents to nearest selector if the value is "all" ($globals.$EMIT_CONTENT_ONLY_ALL) ') {
+    @include assert {
+      @include output {
+        .wrapper {
+          @include testSCSS(
+            $config: (
+              'emitContentOnly': 'all',
+            )
+          );
+        }
+      }
+
+      @include expect {
+        .wrapper {
+          --hds-test: var(--var-base);
+          --hds-first-mod: var(--var-first-mod);
+
+          div.class {
+            --hds-div-elem: var(--var-div);
+          }
+
+          span.class {
+            --hds-span-mod: var(--var-span-mod);
+          }
+
+          a {
+            --hds-a-content: var(--var-a-content);
+          }
+
+          nav section {
+            --hds-inner-section: var(--var-inner-section);
+          }
+
+          ul {
+            --hds-li-descendant: var(--var-li-descendant);
+          }
+
+          header.class {
+            --hds-header-selector-list: var(--var-header-selector-list);
+          }
+        }
+      }
+    }
+  }
+}

package/lib/utils/multi-sass/__tests__/_exports.linked-entities.test.scss

@@ -0,0 +1,117 @@
+/* stylelint-disable scss/function-no-unknown */
+@use 'sass-true' as *;
+@use '../exports' as *;
+@use '../rules' as rules;
+@use "sass:list";
+@use "sass:meta";
+@use "sass:map";
+
+@mixin testMixin($elements: true, $modifiers: true, $extras: true) {
+  $void: init-multi-sass(
+    $modifiers: $modifiers,
+    $elements: $elements,
+    $extras: $extras,
+    $block: 'test',
+  );
+
+  div {
+    @include linked-entities(
+      $block: true,
+      $typeAndName: (
+        'type': 'modifier',
+        'name': 'mod1',
+      ),
+      $separator: ''
+    ) {
+      --should-not-render: var(--should-not-render);
+    }
+  }
+
+  @include block {
+    --block: var(--var-block);
+
+    @include linked-entities(
+      $block: true,
+      $typeAndName: (
+        'type': 'modifier',
+        'name': 'mod1',
+      ),
+      $separator: ''
+    ) {
+      --block-block-mod1: var(--var-block-block-mod1);
+
+      @include linked-entities(
+        $modifier: true,
+        $typeAndName: (
+          'type': 'element',
+          'name': 'elem1',
+        ),
+        $separator: ''
+      ) {
+        --block-block-mod1: var(--var-block-block-mod1);
+      }
+    }
+  }
+
+  @include block {
+    div.class {
+      @include modifier('middle') {
+        span.class {
+          @include linked-entities(
+            $block: true,
+            $typeAndName: (
+              'type': 'modifier',
+              'name': 'mod1',
+            ),
+            $separator: ' '
+          ) {
+            --block-2-block-mod1: var(--var-block-2-block-mod1);
+
+            @include linked-entities(
+              $modifier: true,
+              $typeAndName: (
+                'type': 'element',
+                'name': 'elem1',
+              ),
+              $separator: ''
+            ) {
+              --block-block-2-mod1: var(--var-block-block-2-mod1);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@include describe('linked-entities') {
+  @include it('Merge entities into new selectors') {
+    @include assert {
+      @include output {
+        @include testMixin;
+      }
+
+      @include expect {
+        .hds-test {
+          --block: var(--var-block);
+        }
+
+        .hds-test.hds-test--mod1 {
+          --block-block-mod1: var(--var-block-block-mod1);
+        }
+
+        .hds-test.hds-test--mod1.hds-test.hds-test--mod1__elem1 {
+          --block-block-mod1: var(--var-block-block-mod1);
+        }
+
+        .hds-test div.class--middle span.class .hds-test--mod1 {
+          --block-2-block-mod1: var(--var-block-2-block-mod1);
+        }
+
+        .hds-test div.class--middle span.class .hds-test--mod1.hds-test--middle.hds-test--mod1__elem1 {
+          --block-block-2-mod1: var(--var-block-block-2-mod1);
+        }
+      }
+    }
+  }
+}

package/lib/utils/multi-sass/__tests__/_exports.modifier.test.scss

@@ -0,0 +1,105 @@
+/* stylelint-disable scss/function-no-unknown */
+@use 'sass-true' as *;
+@use '../exports' as *;
+@use "sass:meta";
+
+@mixin testSCSS($elements: true, $modifiers: true, $extras: true) {
+  $void: init-multi-sass(
+    $modifiers: $modifiers,
+    $elements: $elements,
+    $extras: $extras,
+    $block: 'block-name',
+  );
+
+  div.class {
+    @include modifier('mod1') {
+      --mod1: var(--var-mod1);
+
+      div {
+        --mod1-div: var(--var-mod1-div);
+      }
+    }
+  }
+
+  @include block {
+    @include modifier('mod2') {
+      --mod2: var(--var-mod2);
+
+      @include modifier('mod2-inner-mod') {
+        --mod2-inner-mod: var(--var-mod2-inner-mod);
+
+        div {
+          --mod2-inner-mod-div: var(--var-mod2-inner-mod-div);
+        }
+      }
+
+      ul {
+        li.class {
+          @include modifier('li-mod') {
+            --ul-li-li-mod: var(--var-ul-li-li-mod);
+
+            a.class {
+              --ul-li-li-mod-a: var(--var-ul-li-li-mod-a);
+
+              @include modifier('a-mod') {
+                --ul-li-li-mod-a-a-mod: var(--ul-li-li-mod-a-a-mod);
+
+                span {
+                  --ul-li-li-mod-a-a-mod-span: var(--ul-li-li-mod-a-a-mod-span);
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@include describe('Modifier entities') {
+  @include it('are outputted.') {
+    @include assert {
+      @include output {
+        @include testSCSS;
+      }
+
+      @include expect {
+        div.class--mod1 {
+          --mod1: var(--var-mod1);
+        }
+
+        div.class--mod1 div {
+          --mod1-div: var(--var-mod1-div);
+        }
+
+        .hds-block-name--mod2 {
+          --mod2: var(--var-mod2);
+        }
+
+        .hds-block-name--mod2--mod2-inner-mod {
+          --mod2-inner-mod: var(--var-mod2-inner-mod);
+        }
+
+        .hds-block-name--mod2--mod2-inner-mod div {
+          --mod2-inner-mod-div: var(--var-mod2-inner-mod-div);
+        }
+
+        .hds-block-name--mod2 ul li.class--li-mod {
+          --ul-li-li-mod: var(--var-ul-li-li-mod);
+        }
+
+        .hds-block-name--mod2 ul li.class--li-mod a.class {
+          --ul-li-li-mod-a: var(--var-ul-li-li-mod-a);
+        }
+
+        .hds-block-name--mod2 ul li.class--li-mod a.class--a-mod {
+          --ul-li-li-mod-a-a-mod: var(--ul-li-li-mod-a-a-mod);
+        }
+
+        .hds-block-name--mod2 ul li.class--li-mod a.class--a-mod span {
+          --ul-li-li-mod-a-a-mod-span: var(--ul-li-li-mod-a-a-mod-span);
+        }
+      }
+    }
+  }
+}

package/lib/utils/multi-sass/__tests__/_exports.multi-sass.test.scss

@@ -0,0 +1,139 @@
+/* stylelint-disable scss/function-no-unknown */
+@use 'sass-true' as *;
+@use '../exports' as *;
+@use './_testing-mixins.scss' as *;
+@use "sass:meta";
+
+@include describe('Inner blocks') {
+  @include it('are outputted.') {
+    @include assert {
+      @include output {
+        @include ComplexInnerBlocks;
+      }
+
+      @include expect {
+        .hds-block-name {
+          --block: var(--var-block);
+        }
+
+        .hds-block-name div {
+          --block-div: var(--var-block-div);
+        }
+
+        .hds-block-name {
+          --block2: var(--var-block2);
+        }
+
+        .hds-block-name.hds-block-name {
+          --block2-inner-block: var(--var-block2-inner-block);
+        }
+
+        .hds-block-name.hds-block-name div {
+          --block2-div: var(--var-block2-div);
+        }
+
+        .hds-block-name ul li.hds-block-name {
+          --ul-li-block3: var(--var-ul-li-block3);
+        }
+
+        .hds-block-name ul li.hds-block-name a {
+          --ul-li-block3-a: var(--var-ul-li-block3-a);
+        }
+
+        .hds-block-name ul li.hds-block-name a.hds-block-name {
+          --ul-li-block3-a-block4: var(--ul-li-block3-a-block4);
+        }
+
+        .hds-block-name ul li.hds-block-name a.hds-block-name span {
+          --ul-li-block3-a-block4-span: var(--ul-li-block3-a-block4-span);
+        }
+      }
+    }
+  }
+}
+
+@include describe('Nested multi-sass mixings') {
+  @include it('are outputted') {
+    @include assert {
+      @include output {
+        @include SimpleContainer {
+          @include SimpleButton;
+        }
+      }
+
+      @include expect {
+        section .hds-simple-container {
+          --simple-container-base: var(--var-simple-container-base);
+        }
+
+        section .hds-simple-container__content {
+          --simple-container-content: var(--var-simple-container-content);
+        }
+
+        section .hds-simple-container--tiny {
+          --simple-container-dark: var(--var-simple-container-tiny);
+        }
+
+        section .hds-simple-container--tiny__content {
+          --simple-container-tiny-content: var(--var-simple-container-tiny-content);
+        }
+
+        section .hds-simple-container button .hds-simple-button {
+          --simple-button-base: var(--var-simple-button-base);
+        }
+
+        section .hds-simple-container button .hds-simple-button__icon {
+          --simple-button-icon: var(--var-simple-button-icon);
+        }
+
+        section .hds-simple-container button .hds-simple-button__icon span {
+          --simple-button-icon-span: var(--var-simple-button-modifier1-icon-span);
+        }
+
+        section .hds-simple-container button .hds-simple-button--dark {
+          --simple-button-dark: var(--var-simple-button-dark);
+        }
+
+        section .hds-simple-container button .hds-simple-button--dark__icon {
+          --simple-button-dark-icon: var(--var-simple-button-dark-icon);
+        }
+
+        section .hds-simple-container button .hds-simple-button--dark__icon span {
+          --simple-button-dark-icon-span: var(--var-simple-button-dark-icon-span);
+        }
+
+        section .hds-simple-container--max {
+          --simple-container-max: var(--var-simple-container-max);
+        }
+
+        section .hds-simple-container--max__content {
+          --simple-container-max-content: var(--var-simple-container-max-content);
+        }
+      }
+    }
+  }
+
+  @include it('are outputted with args.') {
+    @include assert {
+      @include output {
+        @include SimpleContainer($modifiers: 'tiny', $elements: false) {
+          @include SimpleButton($elements: 'base', $modifiers: false);
+        }
+      }
+
+      @include expect {
+        section .hds-simple-container--tiny {
+          --simple-container-dark: var(--var-simple-container-tiny);
+        }
+
+        section .hds-simple-container--tiny__content {
+          --simple-container-tiny-content: var(--var-simple-container-tiny-content);
+        }
+
+        section .hds-simple-container button .hds-simple-button {
+          --simple-button-base: var(--var-simple-button-base);
+        }
+      }
+    }
+  }
+}

package/lib/utils/multi-sass/__tests__/_exports.selector-list.test.scss

@@ -0,0 +1,86 @@
+/* stylelint-disable scss/function-no-unknown */
+@use 'sass-true' as *;
+@use '../exports' as *;
+@use '../rules' as rules;
+@use "sass:list";
+@use "sass:meta";
+@use "sass:map";
+
+@mixin testMixin($elements: true, $modifiers: true, $extras: true) {
+  $void: init-multi-sass(
+    $modifiers: $modifiers,
+    $elements: $elements,
+    $extras: $extras,
+    $block: 'test',
+  );
+
+  div {
+    @include selector-list((('custom': ':focus'), ('custom': ':hover'))) {
+      --div-focus: var(--var-div);
+      --div-hover: var(--var-div-hover);
+    }
+  }
+
+  @include block {
+    @include selector-list((('modifier': 'mod1'), ('modifier': 'mod2'), ('element': 'elem1'), ('custom': '.custom1'))) {
+      div.class {
+        --block-selector-list-div: var(--var-block-selector-list-div);
+
+        @include selector-list(
+          (
+            ('modifier': 'inner-mod1'),
+            ('modifier': 'inner-mod2'),
+            ('element': 'inner-elem1'),
+            ('custom': '.inner-custom1')
+          )
+        ) {
+          --block-selector-list-div-selector-list: var(--var-block-selector-list-div-selector-list);
+        }
+      }
+    }
+  }
+}
+
+@include describe('Selector-list') {
+  @include it('Makes selector lists') {
+    @include assert {
+      @include output {
+        @include testMixin;
+      }
+
+      @include expect {
+        div:focus,
+        div:hover {
+          --div-focus: var(--var-div);
+          --div-hover: var(--var-div-hover);
+        }
+
+        .hds-test--mod1 div.class,
+        .hds-test--mod2 div.class,
+        .hds-test__elem1 div.class,
+        .hds-test.custom1 div.class {
+          --block-selector-list-div: var(--var-block-selector-list-div);
+        }
+
+        .hds-test--mod1 div.class--inner-mod1,
+        .hds-test--mod1 div.class--inner-mod2,
+        .hds-test--mod1 div.class__inner-elem1,
+        .hds-test--mod1 div.class.inner-custom1,
+        .hds-test--mod2 div.class--inner-mod1,
+        .hds-test--mod2 div.class--inner-mod2,
+        .hds-test--mod2 div.class__inner-elem1,
+        .hds-test--mod2 div.class.inner-custom1,
+        .hds-test__elem1 div.class--inner-mod1,
+        .hds-test__elem1 div.class--inner-mod2,
+        .hds-test__elem1 div.class__inner-elem1,
+        .hds-test__elem1 div.class.inner-custom1,
+        .hds-test.custom1 div.class--inner-mod1,
+        .hds-test.custom1 div.class--inner-mod2,
+        .hds-test.custom1 div.class__inner-elem1,
+        .hds-test.custom1 div.class.inner-custom1 {
+          --block-selector-list-div-selector-list: var(--var-block-selector-list-div-selector-list);
+        }
+      }
+    }
+  }
+}