@jorilindell/hds-core 4.10.1

package/lib/utils/animations.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/animations.css%23sass","../../src/utils/animations.css"],"names":[],"mappings":"AAAA;EACE;IACE,UAAA;ECCF;EDEA;ICAA,UAAA;EACA;AACF","file":"animations.css","sourcesContent":["@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n","@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n"]}

package/lib/utils/animations.min.css

@@ -0,0 +1 @@
+@keyframes fadeIn{0%{opacity:0}to{opacity:1}}

package/lib/utils/animations.min.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/animations.css%23sass","../../src/utils/animations.css"],"names":[],"mappings":"AAAA,kBACE,GACE,SCCF,CDEA,GCAA,SACA,CACF","file":"animations.min.css","sourcesContent":["@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n","@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n"]}

package/lib/utils/helpers.css

@@ -0,0 +1,123 @@
+.visually-hidden {
+  border: 0;
+  clip: "rect(0 0 0 0)";
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+.button-reset {
+  background: none;
+  border: none;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  padding: 0;
+}
+
+.text-body {
+  color: var(--color-black-90);
+  font-family: var(--font-default);
+  font-size: var(--fontsize-body-m);
+  line-height: var(--lineheight-l);
+}
+
+.text-medium {
+  font-family: var(--font-default);
+  font-weight: 500;
+}
+
+.text-bold {
+  font-family: var(--font-default);
+  font-weight: bold;
+}
+
+.text-xl {
+  font-size: var(--fontsize-heading-m);
+}
+
+.text-lg {
+  font-size: var(--fontsize-heading-s);
+}
+
+.text-md {
+  font-size: var(--fontsize-heading-xs);
+}
+
+.subtitle {
+  font-size: var(--fontsize-body-m);
+}
+
+.text-sm {
+  font-size: var(--fontsize-body-s);
+  line-height: var(--lineheight-xl);
+}
+
+/* HEADINGS */
+
+.heading-xxl {
+  font-size: var(--fontsize-heading-xxl);
+  font-weight: 400;
+  letter-spacing: -1.2px;
+  line-height: var(--lineheight-s);
+}
+
+.heading-xl {
+  font-size: var(--fontsize-heading-xl);
+  font-weight: 400;
+  letter-spacing: -1px;
+  line-height: var(--lineheight-s);
+}
+
+.heading-xl-mobile {
+  font-size: var(--fontsize-heading-xl-mobile);
+  font-weight: 400;
+  letter-spacing: -0.8px;
+  line-height: var(--lineheight-s);
+}
+
+.heading-l {
+  font-size: var(--fontsize-heading-l);
+  font-weight: 400;
+  letter-spacing: -0.4px;
+  line-height: var(--lineheight-m);
+}
+
+.heading-m {
+  font-size: var(--fontsize-heading-m);
+  font-weight: 500;
+  letter-spacing: -0.2px;
+  line-height: var(--lineheight-m);
+}
+
+.heading-s {
+  font-size: var(--fontsize-heading-s);
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: var(--lineheight-l);
+}
+
+.heading-xs {
+  font-size: var(--fontsize-heading-xs);
+  font-weight: 700;
+  letter-spacing: 0;
+  line-height: var(--lineheight-l);
+}
+
+.heading-xxs {
+  font-size: var(--fontsize-heading-xxs);
+  font-weight: 700;
+  letter-spacing: 0.2px;
+  line-height: var(--lineheight-l);
+}
+
+.helper-text {
+  color: var(--color-black-60);
+  display: block;
+  flex-basis: 100%;
+  font-size: var(--fontsize-body-m);
+  margin-top: var(--spacing-2-xs);
+}

package/lib/utils/helpers.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/helpers.css%23sass","../../src/utils/helpers.css"],"names":[],"mappings":"AAAA;EACE,SAAA;EACA,qBAAA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;EACA,UAAA;EACA,kBAAA;EACA,UAAA;ACCF;;ADEA;EACE,gBAAA;EACA,YAAA;EACA,cAAA;EACA,eAAA;EACA,aAAA;EACA,UAAA;ACCF;;ADEA;EACE,4BAAA;EACA,gCAAA;EACA,iCAAA;EACA,gCAAA;ACCF;;ADEA;EACE,gCAAA;EACA,gBAAA;ACCF;;ADEA;EACE,gCAAA;EACA,iBAAA;ACCF;;ADEA;EACE,oCAAA;ACCF;;ADEA;EACE,oCAAA;ACCF;;ADEA;EACE,qCAAA;ACCF;;ADEA;EACE,iCAAA;ACCF;;ADEA;EACE,iCAAA;EACA,iCAAA;ACCF;;ADEA,aAAA;;AAEA;ECAA,sCAAA;EDEE,gBAAA;EACA,sBAAA;EACA,gCAAA;ACAF;;ADGA;ECAA,qCAAA;EDEE,gBAAA;EACA,oBAAA;EACA,gCAAA;ACAF;;ADGA;ECAA,4CAAA;EDEE,gBAAA;EACA,sBAAA;EACA,gCAAA;ACAF;;ADGA;ECAA,oCAAA;EDEE,gBAAA;EACA,sBAAA;EACA,gCAAA;ACAF;;ADGA;ECAA,oCAAA;EDEE,gBAAA;EACA,sBAAA;EACA,gCAAA;ACAF;;ADGA;ECAA,oCAAA;EDEE,gBAAA;EACA,iBAAA;EACA,gCAAA;ACAF;;ADGA;ECAA,qCAAA;EDEE,gBAAA;EACA,iBAAA;EACA,gCAAA;ACAF;;ADGA;ECAA,sCAAA;EDEE,gBAAA;EACA,qBAAA;EACA,gCAAA;ACAF;;ADGA;ECAA,4BAAA;EDEE,cAAA;EACA,gBAAA;EACA,iCAAA;EACA,+BAAA;ACAF","file":"helpers.css","sourcesContent":[".visually-hidden {\n  border: 0;\n  clip: 'rect(0 0 0 0)';\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  width: 1px;\n}\n\n.button-reset {\n  background: none;\n  border: none;\n  color: inherit;\n  cursor: pointer;\n  font: inherit;\n  padding: 0;\n}\n\n.text-body {\n  color: var(--color-black-90);\n  font-family: var(--font-default);\n  font-size: var(--fontsize-body-m);\n  line-height: var(--lineheight-l);\n}\n\n.text-medium {\n  font-family: var(--font-default);\n  font-weight: 500;\n}\n\n.text-bold {\n  font-family: var(--font-default);\n  font-weight: bold;\n}\n\n.text-xl {\n  font-size: var(--fontsize-heading-m);\n}\n\n.text-lg {\n  font-size: var(--fontsize-heading-s);\n}\n\n.text-md {\n  font-size: var(--fontsize-heading-xs);\n}\n\n.subtitle {\n  font-size: var(--fontsize-body-m);\n}\n\n.text-sm {\n  font-size: var(--fontsize-body-s);\n  line-height: var(--lineheight-xl);\n}\n\n/* HEADINGS */\n\n.heading-xxl {\n  font-size: var(--fontsize-heading-xxl);\n  font-weight: 400;\n  letter-spacing: -1.2px;\n  line-height: var(--lineheight-s);\n}\n\n.heading-xl {\n  font-size: var(--fontsize-heading-xl);\n  font-weight: 400;\n  letter-spacing: -1px;\n  line-height: var(--lineheight-s);\n}\n\n.heading-xl-mobile {\n  font-size: var(--fontsize-heading-xl-mobile);\n  font-weight: 400;\n  letter-spacing: -0.8px;\n  line-height: var(--lineheight-s);\n}\n\n.heading-l {\n  font-size: var(--fontsize-heading-l);\n  font-weight: 400;\n  letter-spacing: -0.4px;\n  line-height: var(--lineheight-m);\n}\n\n.heading-m {\n  font-size: var(--fontsize-heading-m);\n  font-weight: 500;\n  letter-spacing: -0.2px;\n  line-height: var(--lineheight-m);\n}\n\n.heading-s {\n  font-size: var(--fontsize-heading-s);\n  font-weight: 500;\n  letter-spacing: 0;\n  line-height: var(--lineheight-l);\n}\n\n.heading-xs {\n  font-size: var(--fontsize-heading-xs);\n  font-weight: 700;\n  letter-spacing: 0;\n  line-height: var(--lineheight-l);\n}\n\n.heading-xxs {\n  font-size: var(--fontsize-heading-xxs);\n  font-weight: 700;\n  letter-spacing: 0.2px;\n  line-height: var(--lineheight-l);\n}\n\n.helper-text {\n  color: var(--color-black-60);\n  display: block;\n  flex-basis: 100%;\n  font-size: var(--fontsize-body-m);\n  margin-top: var(--spacing-2-xs);\n}\n",".visually-hidden {\n  border: 0;\n  clip: 'rect(0 0 0 0)';\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  width: 1px;\n}\n\n.button-reset {\n  background: none;\n  border: none;\n  color: inherit;\n  cursor: pointer;\n  font: inherit;\n  padding: 0;\n}\n\n.text-body {\n  color: var(--color-black-90);\n  font-family: var(--font-default);\n  font-size: var(--fontsize-body-m);\n  line-height: var(--lineheight-l);\n}\n\n.text-medium {\n  font-family: var(--font-default);\n  font-weight: 500;\n}\n\n.text-bold {\n  font-family: var(--font-default);\n  font-weight: bold;\n}\n\n.text-xl {\n  font-size: var(--fontsize-heading-m);\n}\n\n.text-lg {\n  font-size: var(--fontsize-heading-s);\n}\n\n.text-md {\n  font-size: var(--fontsize-heading-xs);\n}\n\n.subtitle {\n  font-size: var(--fontsize-body-m);\n}\n\n.text-sm {\n  font-size: var(--fontsize-body-s);\n  line-height: var(--lineheight-xl);\n}\n\n/* HEADINGS */\n\n.heading-xxl {\n  font-size: var(--fontsize-heading-xxl);\n  font-weight: 400;\n  letter-spacing: -1.2px;\n  line-height: var(--lineheight-s);\n}\n\n.heading-xl {\n  font-size: var(--fontsize-heading-xl);\n  font-weight: 400;\n  letter-spacing: -1px;\n  line-height: var(--lineheight-s);\n}\n\n.heading-xl-mobile {\n  font-size: var(--fontsize-heading-xl-mobile);\n  font-weight: 400;\n  letter-spacing: -0.8px;\n  line-height: var(--lineheight-s);\n}\n\n.heading-l {\n  font-size: var(--fontsize-heading-l);\n  font-weight: 400;\n  letter-spacing: -0.4px;\n  line-height: var(--lineheight-m);\n}\n\n.heading-m {\n  font-size: var(--fontsize-heading-m);\n  font-weight: 500;\n  letter-spacing: -0.2px;\n  line-height: var(--lineheight-m);\n}\n\n.heading-s {\n  font-size: var(--fontsize-heading-s);\n  font-weight: 500;\n  letter-spacing: 0;\n  line-height: var(--lineheight-l);\n}\n\n.heading-xs {\n  font-size: var(--fontsize-heading-xs);\n  font-weight: 700;\n  letter-spacing: 0;\n  line-height: var(--lineheight-l);\n}\n\n.heading-xxs {\n  font-size: var(--fontsize-heading-xxs);\n  font-weight: 700;\n  letter-spacing: 0.2px;\n  line-height: var(--lineheight-l);\n}\n\n.helper-text {\n  color: var(--color-black-60);\n  display: block;\n  flex-basis: 100%;\n  font-size: var(--fontsize-body-m);\n  margin-top: var(--spacing-2-xs);\n}\n"]}

package/lib/utils/helpers.min.css

@@ -0,0 +1 @@
+.visually-hidden{border:0;clip:"rect(0 0 0 0)";height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.button-reset{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.text-body{color:var(--color-black-90);font-size:var(--fontsize-body-m);line-height:var(--lineheight-l)}.text-body,.text-medium{font-family:var(--font-default)}.text-medium{font-weight:500}.text-bold{font-family:var(--font-default);font-weight:700}.text-xl{font-size:var(--fontsize-heading-m)}.text-lg{font-size:var(--fontsize-heading-s)}.text-md{font-size:var(--fontsize-heading-xs)}.subtitle{font-size:var(--fontsize-body-m)}.text-sm{font-size:var(--fontsize-body-s);line-height:var(--lineheight-xl)}.heading-xxl{font-size:var(--fontsize-heading-xxl);letter-spacing:-1.2px}.heading-xl,.heading-xxl{font-weight:400;line-height:var(--lineheight-s)}.heading-xl{font-size:var(--fontsize-heading-xl);letter-spacing:-1px}.heading-xl-mobile{font-size:var(--fontsize-heading-xl-mobile);font-weight:400;letter-spacing:-.8px;line-height:var(--lineheight-s)}.heading-l{font-size:var(--fontsize-heading-l);font-weight:400;letter-spacing:-.4px}.heading-l,.heading-m{line-height:var(--lineheight-m)}.heading-m{font-size:var(--fontsize-heading-m);font-weight:500;letter-spacing:-.2px}.heading-s{font-size:var(--fontsize-heading-s);font-weight:500}.heading-s,.heading-xs{letter-spacing:0;line-height:var(--lineheight-l)}.heading-xs{font-size:var(--fontsize-heading-xs);font-weight:700}.heading-xxs{font-size:var(--fontsize-heading-xxs);font-weight:700;letter-spacing:.2px;line-height:var(--lineheight-l)}.helper-text{color:var(--color-black-60);display:block;flex-basis:100%;font-size:var(--fontsize-body-m);margin-top:var(--spacing-2-xs)}

package/lib/utils/helpers.min.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/helpers.css%23sass","../../src/utils/helpers.css"],"names":[],"mappings":"AAAA,iBACE,QAAA,CACA,oBAAA,CACA,UAAA,CACA,WAAA,CACA,eAAA,CACA,SAAA,CACA,iBAAA,CACA,SCCF,CDEA,cACE,eAAA,CACA,WAAA,CACA,aAAA,CACA,cAAA,CACA,YAAA,CACA,SCCF,CDEA,WACE,2BAAA,CAEA,gCAAA,CACA,+BCCF,CDEA,wBALE,+BCQF,CDHA,aAEE,eCCF,CDEA,WACE,+BAAA,CACA,eCCF,CDEA,SACE,mCCCF,CDEA,SACE,mCCCF,CDEA,SACE,oCCCF,CDEA,UACE,gCCCF,CDEA,SACE,gCAAA,CACA,gCCCF,CDIA,aCAA,qCAAA,CDGE,qBCCF,CDGA,yBALE,eAAA,CAEA,+BCOF,CDJA,YCAA,oCAAA,CDGE,mBCCF,CDGA,mBCAA,2CAAA,CDEE,eAAA,CACA,oBAAA,CACA,+BCAF,CDGA,WCAA,mCAAA,CDEE,eAAA,CACA,oBCCF,CDGA,sBAHE,+BCOF,CDJA,WCAA,mCAAA,CDEE,eAAA,CACA,oBCCF,CDGA,WCAA,mCAAA,CDEE,eCEF,CDGA,uBAJE,gBAAA,CACA,+BCOF,CDJA,YCAA,oCAAA,CDEE,eCEF,CDGA,aCAA,qCAAA,CDEE,eAAA,CACA,mBAAA,CACA,+BCAF,CDGA,aCAA,2BAAA,CDEE,aAAA,CACA,eAAA,CACA,gCAAA,CACA,8BCAF","file":"helpers.min.css","sourcesContent":[".visually-hidden {\n  border: 0;\n  clip: 'rect(0 0 0 0)';\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  width: 1px;\n}\n\n.button-reset {\n  background: none;\n  border: none;\n  color: inherit;\n  cursor: pointer;\n  font: inherit;\n  padding: 0;\n}\n\n.text-body {\n  color: var(--color-black-90);\n  font-family: var(--font-default);\n  font-size: var(--fontsize-body-m);\n  line-height: var(--lineheight-l);\n}\n\n.text-medium {\n  font-family: var(--font-default);\n  font-weight: 500;\n}\n\n.text-bold {\n  font-family: var(--font-default);\n  font-weight: bold;\n}\n\n.text-xl {\n  font-size: var(--fontsize-heading-m);\n}\n\n.text-lg {\n  font-size: var(--fontsize-heading-s);\n}\n\n.text-md {\n  font-size: var(--fontsize-heading-xs);\n}\n\n.subtitle {\n  font-size: var(--fontsize-body-m);\n}\n\n.text-sm {\n  font-size: var(--fontsize-body-s);\n  line-height: var(--lineheight-xl);\n}\n\n/* HEADINGS */\n\n.heading-xxl {\n  font-size: var(--fontsize-heading-xxl);\n  font-weight: 400;\n  letter-spacing: -1.2px;\n  line-height: var(--lineheight-s);\n}\n\n.heading-xl {\n  font-size: var(--fontsize-heading-xl);\n  font-weight: 400;\n  letter-spacing: -1px;\n  line-height: var(--lineheight-s);\n}\n\n.heading-xl-mobile {\n  font-size: var(--fontsize-heading-xl-mobile);\n  font-weight: 400;\n  letter-spacing: -0.8px;\n  line-height: var(--lineheight-s);\n}\n\n.heading-l {\n  font-size: var(--fontsize-heading-l);\n  font-weight: 400;\n  letter-spacing: -0.4px;\n  line-height: var(--lineheight-m);\n}\n\n.heading-m {\n  font-size: var(--fontsize-heading-m);\n  font-weight: 500;\n  letter-spacing: -0.2px;\n  line-height: var(--lineheight-m);\n}\n\n.heading-s {\n  font-size: var(--fontsize-heading-s);\n  font-weight: 500;\n  letter-spacing: 0;\n  line-height: var(--lineheight-l);\n}\n\n.heading-xs {\n  font-size: var(--fontsize-heading-xs);\n  font-weight: 700;\n  letter-spacing: 0;\n  line-height: var(--lineheight-l);\n}\n\n.heading-xxs {\n  font-size: var(--fontsize-heading-xxs);\n  font-weight: 700;\n  letter-spacing: 0.2px;\n  line-height: var(--lineheight-l);\n}\n\n.helper-text {\n  color: var(--color-black-60);\n  display: block;\n  flex-basis: 100%;\n  font-size: var(--fontsize-body-m);\n  margin-top: var(--spacing-2-xs);\n}\n",".visually-hidden {\n  border: 0;\n  clip: 'rect(0 0 0 0)';\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  width: 1px;\n}\n\n.button-reset {\n  background: none;\n  border: none;\n  color: inherit;\n  cursor: pointer;\n  font: inherit;\n  padding: 0;\n}\n\n.text-body {\n  color: var(--color-black-90);\n  font-family: var(--font-default);\n  font-size: var(--fontsize-body-m);\n  line-height: var(--lineheight-l);\n}\n\n.text-medium {\n  font-family: var(--font-default);\n  font-weight: 500;\n}\n\n.text-bold {\n  font-family: var(--font-default);\n  font-weight: bold;\n}\n\n.text-xl {\n  font-size: var(--fontsize-heading-m);\n}\n\n.text-lg {\n  font-size: var(--fontsize-heading-s);\n}\n\n.text-md {\n  font-size: var(--fontsize-heading-xs);\n}\n\n.subtitle {\n  font-size: var(--fontsize-body-m);\n}\n\n.text-sm {\n  font-size: var(--fontsize-body-s);\n  line-height: var(--lineheight-xl);\n}\n\n/* HEADINGS */\n\n.heading-xxl {\n  font-size: var(--fontsize-heading-xxl);\n  font-weight: 400;\n  letter-spacing: -1.2px;\n  line-height: var(--lineheight-s);\n}\n\n.heading-xl {\n  font-size: var(--fontsize-heading-xl);\n  font-weight: 400;\n  letter-spacing: -1px;\n  line-height: var(--lineheight-s);\n}\n\n.heading-xl-mobile {\n  font-size: var(--fontsize-heading-xl-mobile);\n  font-weight: 400;\n  letter-spacing: -0.8px;\n  line-height: var(--lineheight-s);\n}\n\n.heading-l {\n  font-size: var(--fontsize-heading-l);\n  font-weight: 400;\n  letter-spacing: -0.4px;\n  line-height: var(--lineheight-m);\n}\n\n.heading-m {\n  font-size: var(--fontsize-heading-m);\n  font-weight: 500;\n  letter-spacing: -0.2px;\n  line-height: var(--lineheight-m);\n}\n\n.heading-s {\n  font-size: var(--fontsize-heading-s);\n  font-weight: 500;\n  letter-spacing: 0;\n  line-height: var(--lineheight-l);\n}\n\n.heading-xs {\n  font-size: var(--fontsize-heading-xs);\n  font-weight: 700;\n  letter-spacing: 0;\n  line-height: var(--lineheight-l);\n}\n\n.heading-xxs {\n  font-size: var(--fontsize-heading-xxs);\n  font-weight: 700;\n  letter-spacing: 0.2px;\n  line-height: var(--lineheight-l);\n}\n\n.helper-text {\n  color: var(--color-black-60);\n  display: block;\n  flex-basis: 100%;\n  font-size: var(--fontsize-body-m);\n  margin-top: var(--spacing-2-xs);\n}\n"]}

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

@@ -0,0 +1,95 @@
+/* stylelint-disable scss/function-no-unknown */
+@use 'sass-true' as *;
+@use '../exports' as *;
+@use '../globals' as globals;
+
+@mixin testSCSS($elements: true, $modifiers: true, $extras: true, $alias: false) {
+  $void: init-multi-sass(
+    $modifiers: $modifiers,
+    $elements: $elements,
+    $extras: $extras,
+    $block: 'myBlock',
+    $alias: $alias,
+    $config: (
+      'blockPrefix': '',
+    ),
+  );
+
+  @include block {
+    --hds-test: var(--var-base);
+
+    @include element('element') {
+      --hds-test-element: var(--var-element);
+
+      @include modifier('dark') {
+        --hds-test-element-dark: var(--var-element-dark);
+      }
+    }
+
+    @include modifier('light') {
+      --hds-test-light-modifier: var(--var-light-modifier);
+
+      @include element('element') {
+        --hds-test-element: var(--var-element);
+
+        span {
+          --hds-test-light-modifier-span: var(--var-light-modifier-span);
+        }
+      }
+    }
+  }
+}
+
+@include describe('Alias') {
+  @include it('Entities are renamed') {
+    @include assert {
+      @include output {
+        @include testSCSS(
+          $modifiers: (
+            'dark': (
+              'element': true,
+            ),
+            'light': (
+              'element': true,
+            ),
+          ),
+          $elements: (
+            'base': true,
+            'element': true,
+          ),
+          $alias: (
+            'dark': 'really-dark',
+            'element': 'nice-element',
+            'light': 'ultra-light',
+          )
+        );
+      }
+
+      @include expect {
+        .myBlock {
+          --hds-test: var(--var-base);
+        }
+
+        .myBlock .nice-element {
+          --hds-test-element: var(--var-element);
+        }
+
+        .myBlock .nice-element.really-dark {
+          --hds-test-element-dark: var(--var-element-dark);
+        }
+
+        .myBlock.ultra-light {
+          --hds-test-light-modifier: var(--var-light-modifier);
+        }
+
+        .myBlock.ultra-light .nice-element {
+          --hds-test-element: var(--var-element);
+        }
+
+        .myBlock.ultra-light .nice-element span {
+          --hds-test-light-modifier-span: var(--var-light-modifier-span);
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,101 @@
+/* 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',
+  );
+
+  @include block {
+    --block: var(--var-block);
+
+    div {
+      --block-div: var(--var-block-div);
+    }
+  }
+
+  @include block {
+    --block2: var(--var-block2);
+
+    @include block {
+      --block2-inner-block: var(--var-block2-inner-block);
+
+      div {
+        --block2-div: var(--var-block2-div);
+      }
+    }
+
+    ul {
+      li {
+        @include block {
+          --ul-li-block3: var(--var-ul-li-block3);
+
+          a {
+            --ul-li-block3-a: var(--var-ul-li-block3-a);
+
+            @include block {
+              --ul-li-block3-a-block4: var(--ul-li-block3-a-block4);
+
+              span {
+                --ul-li-block3-a-block4-span: var(--ul-li-block3-a-block4-span);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@include describe('Block entities') {
+  @include it('are outputted.') {
+    @include assert {
+      @include output {
+        @include testSCSS;
+      }
+
+      @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);
+        }
+      }
+    }
+  }
+}