Remove node-sass in favour of sass (Dart sass)

.github/workflows/tests.yml

@@ -34,8 +34,6 @@ jobs:
         restore-keys: |
           ${{ runner.OS }}-node-
     - name: Install dependencies
-      run: |
-        yarn --frozen-lockfile
-        npm rebuild node-sass
+      run: yarn --frozen-lockfile
     - name: Run tests
       run: yarn test

.github/workflows/visual_tests.yml

@@ -67,9 +67,7 @@ jobs:
           restore-keys: |
             ${{ runner.OS }}-node-
       - name: Install dependencies
-        run: |
-          yarn --frozen-lockfile
-          npm rebuild node-sass
+        run: yarn --frozen-lockfile
       - name: Download Chromium
         run: npx puppeteer browsers install chrome
       - name: Extract jsdocs and environment info

docs/assets/main.scss

@@ -1,4 +1,4 @@
-@import '~/assets/definitions';
+@use '~/assets/definitions' as *;
 
 .visuallyhidden {
   position: absolute;

docs/common/DocsAnchorTarget.vue

@@ -78,7 +78,7 @@
 
 <style lang="scss" scoped>
 
-  @import '~/assets/definitions';
+  @use '~/assets/definitions' as *;
 
   .section-link-with-target {
     position: relative;

docs/common/DocsFilter/index.vue

@@ -55,7 +55,7 @@
 
 <style lang="scss" scoped>
 
-  @import '~/assets/definitions';
+  @use '~/assets/definitions' as *;
 
   .filter-wrapping-div {
     position: relative;

docs/common/DocsPageTemplate/Header.vue

@@ -106,7 +106,7 @@
 
 <style lang="scss" scoped>
 
-  @import '~/assets/definitions';
+  @use '~/assets/definitions' as *;
 
   .header {
     padding-top: 16px;

docs/common/DocsPageTemplate/SideNav/NavLink.vue

@@ -55,7 +55,7 @@
 
 <style lang="scss" scoped>
 
-  @import '~/assets/definitions';
+  @use '~/assets/definitions' as *;
 
   .block {
     display: block;

docs/common/DocsPageTemplate/SideNav/index.vue

@@ -135,7 +135,7 @@
 
 <style lang="scss" scoped>
 
-  @import '~/assets/definitions';
+  @use '~/assets/definitions' as *;
 
   .header {
     margin-top: 24px;

docs/common/DocsPageTemplate/index.vue

@@ -186,8 +186,8 @@
 
 <style lang="scss" scoped>
 
-  @import '~/assets/definitions';
-  @import '../../../lib/styles/definitions';
+  @use '~/assets/definitions' as *;
+  @use '../../../lib/styles/definitions' as *;
 
   .floating-header {
     position: fixed;

docs/common/DocsPageTemplate/jsdocs/EventsTable.vue

@@ -57,6 +57,6 @@
 
 <style lang="scss" scoped>
 
-  @import './styles';
+  @use './styles' as *;
 
 </style>

docs/common/DocsPageTemplate/jsdocs/MethodsTable.vue

@@ -47,6 +47,6 @@
 
 <style lang="scss" scoped>
 
-  @import './styles';
+  @use './styles' as *;
 
 </style>

docs/common/DocsPageTemplate/jsdocs/PropsTable.vue

@@ -81,6 +81,6 @@
 
 <style lang="scss" scoped>
 
-  @import './styles';
+  @use './styles' as *;
 
 </style>

docs/common/DocsPageTemplate/jsdocs/SlotsTable.vue

@@ -47,6 +47,6 @@
 
 <style lang="scss" scoped>
 
-  @import './styles';
+  @use './styles' as *;
 
 </style>

docs/common/DocsTable.vue

@@ -21,7 +21,7 @@
 
 <style lang="scss" scoped>
 
-  @import '~/assets/definitions';
+  @use '~/assets/definitions' as *;
 
   table {
     border-collapse: collapse;

docs/common/DocsToggleButton.vue

@@ -67,7 +67,7 @@
 
 <style lang="scss" scoped>
 
-  @import '~/assets/definitions';
+  @use '~/assets/definitions' as *;
 
   .toggle {
     display: inline-block; // prevents trailing spaces

docs/common/DocsToggleContent.vue

@@ -28,7 +28,7 @@
 
 <style lang="scss" scoped>
 
-  @import '~/assets/definitions';
+  @use '~/assets/definitions' as *;
 
   .content {
     display: none;

docs/pages/styling/index.vue

@@ -65,7 +65,7 @@
       <!-- eslint-disable -->
       <!-- prettier-ignore -->
       <DocsShowCode language="css">
-        @import '~kolibri-design-system/lib/styles/definitions'
+        @use '~kolibri-design-system/lib/styles/definitions' as *;
 
         .box {
           @extend %dropshadow-2dp;
@@ -146,7 +146,7 @@
       <!-- eslint-disable -->
       <!-- prettier-ignore -->
       <DocsShowCode language="css">
-        @import '~kolibri-design-system/lib/styles/definitions'
+        @use '~kolibri-design-system/lib/styles/definitions' as *;
 
         .box-1dp {
           @extend %dropshadow-1dp;
@@ -225,7 +225,7 @@
       <!-- eslint-disable -->
       <!-- prettier-ignore -->
       <DocsShowCode language="css">
-        @import '~kolibri-design-system/lib/styles/definitions'
+        @use '~kolibri-design-system/lib/styles/definitions' as *;
 
         .ease:hover {
           @extend %dropshadow-6dp;
@@ -255,7 +255,7 @@
 
 <style lang="scss" scoped>
 
-  @import '~~/lib/styles/definitions';
+  @use '~~/lib/styles/definitions' as *;
 
   dt {
     font-weight: bold;

lib/KBreadcrumbs.vue

@@ -313,7 +313,7 @@
 
 <style lang="scss" scoped>
 
-  @import './styles/definitions';
+  @use './styles/definitions' as *;
   $crumb-max-width: 300px;
 
   .breadcrumbs {

lib/KIcon/index.vue

@@ -89,7 +89,7 @@
 
 <style lang="scss" scoped>
 
-  @import '../styles/definitions';
+  @use '../styles/definitions' as *;
 
   svg {
     position: relative;

lib/KModal.vue

@@ -378,7 +378,7 @@
 
 <style lang="scss" scoped>
 
-  @import './styles/definitions';
+  @use './styles/definitions' as *;
 
   .modal-overlay {
     position: fixed;

lib/KPageContainer.vue

@@ -56,7 +56,7 @@
 
 <style lang="scss" scoped>
 
-  @import './styles/definitions';
+  @use './styles/definitions' as *;
 
   .page-container {
     @extend %dropshadow-1dp;

lib/KSelect/KSelectOption.vue

@@ -148,8 +148,8 @@
 
 <style lang="scss" scoped>
 
-  @import '../styles/definitions';
-  @import '../keen/styles/imports';
+  @use '../styles/definitions' as *;
+  @use '../keen/styles/imports' as *;
 
   /* stylelint-disable csstree/validator */
 

lib/KSelect/index.vue

@@ -923,8 +923,8 @@
 
 <style lang="scss" scoped>
 
-  @import '../styles/definitions';
-  @import '../keen/styles/imports';
+  @use '../styles/definitions' as *;
+  @use '../keen/styles/imports' as *;
 
   /* stylelint-disable csstree/validator */
 

lib/KSwitch.vue

@@ -200,7 +200,7 @@
 
 <style lang="scss">
 
-  @import './styles/definitions';
+  @use './styles/definitions' as *;
   $k-switch-height: 32px !default;
   $k-switch-thumb-size: 20px !default;
   $k-switch-thumb-color: #f5f5f5 !default;
@@ -261,7 +261,7 @@
 
   .k-switch-track {
     position: absolute;
-    top: (($k-switch-thumb-size - $k-switch-track-height) / 2);
+    top: calc(($k-switch-thumb-size - $k-switch-track-height) / 2);
     width: $k-switch-track-width;
     height: $k-switch-track-height;
     background-color: #cccccc;

lib/KToolbar.vue

@@ -143,8 +143,8 @@
 
 <style lang="scss">
 
-  @import './styles/definitions';
-  @import './keen/styles/imports';
+  @use './styles/definitions' as *;
+  @use './keen/styles/imports' as *;
 
   $k-toolbar-font-size: rem(18px) !default;
   $k-toolbar-height: rem(56px) !default;

lib/KTooltip/index.vue

@@ -146,7 +146,7 @@
 
 <style lang="scss" scoped>
 
-  @import '../styles/definitions';
+  @use '../styles/definitions' as *;
 
   .k-tooltip {
     @extend %dropshadow-1dp;

lib/buttons-and-links/KButton.vue

@@ -195,7 +195,7 @@
 
 <style lang="scss" scoped>
 
-  @import './buttons';
+  @use './buttons' as *;
 
   .icon-container {
     position: relative;

lib/buttons-and-links/KExternalLink.vue

@@ -140,6 +140,6 @@
 
 <style lang="scss" scoped>
 
-  @import './buttons';
+  @use './buttons' as *;
 
 </style>

lib/buttons-and-links/KRouterLink.vue

@@ -132,6 +132,6 @@
 
 <style lang="scss" scoped>
 
-  @import './buttons';
+  @use './buttons' as *;
 
 </style>

lib/buttons-and-links/buttons.scss

@@ -1,4 +1,4 @@
-@import '../styles/definitions';
+@use '../styles/definitions' as *;
 
 $transition: color $core-time ease,
   background-color $core-time ease,

lib/cards/KCard.vue

@@ -574,7 +574,7 @@
 
 <style lang="scss" scoped>
 
-  @import '../styles/definitions';
+  @use '../styles/definitions' as *;
 
   $spacer: 16px;
 

lib/cards/SkeletonCard.vue

@@ -85,7 +85,7 @@
 
 <style lang="scss" scoped>
 
-  @import '../styles/definitions';
+  @use '../styles/definitions' as *;
 
   @keyframes loading {
     0% {

lib/grids/KFixedGridItem.vue

@@ -127,7 +127,7 @@
 
 <style lang="scss" scoped>
 
-  @import '../styles/definitions';
+  @use '../styles/definitions' as *;
 
   .grid-item {
     // override pure grid default font family

lib/keen/UiAlert.vue

@@ -91,7 +91,7 @@
 
 <style lang="scss">
 
-  @import './styles/imports';
+  @use './styles/imports' as *;
 
   $ui-alert-color: rgba(black, 0.75) !default;
   $ui-alert-font-size: rem(15px) !default;

lib/keen/UiAutocomplete.vue

@@ -449,8 +449,8 @@
 
 <style lang="scss">
 
-  @import './styles/imports';
-  @import '../styles/definitions';
+  @use './styles/imports' as *;
+  @use '../styles/definitions' as *;
 
   .ui-autocomplete {
     position: relative;

lib/keen/UiAutocompleteSuggestion.vue

@@ -66,7 +66,7 @@
 
 <style lang="scss">
 
-  @import './styles/imports';
+  @use './styles/imports' as *;
 
   .ui-autocomplete-suggestion {
     padding: rem(8px 12px);