fix(*): sass @import to @use [KHCP-13755] (#2518)

* chore(deps): bump sass [KHCP-13755]

* fix(src): sass @import to @use [KHCP-13755]

* fix(docs): sass @import to @use [KHCP-13755]

* fix(mixins): minor tweak [KHCP-13755]

docs/.vitepress/theme/_overrides.scss

@@ -1,3 +1,5 @@
+@use "@kong/design-tokens/tokens/scss/variables" as *;
+
 // Theme overrides; all should be nested inside of the `.vp-doc` class
 .vp-doc {
   /* stylelint-disable-next-line custom-property-pattern */

docs/.vitepress/theme/_variables.scss

@@ -1,6 +1,9 @@
+/* stylelint-disable custom-property-pattern */
 // Override predefined CSS variables of the default VitePress theme
 // https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
 
+@use "@kong/design-tokens/tokens/scss/variables" as *;
+
 :root {
   --vp-button-brand-bg: #{$kui-color-background-primary};
   --vp-button-brand-hover-bg: #{$kui-color-background-primary-strong};

docs/.vitepress/theme/index.scss

@@ -1,8 +1,8 @@
 // Import predefined CSS variable overrides of the default VitePress theme
 // https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
-@import "./variables";
-@import "./overrides";
-@import "./percy";
+@use "./variables";
+@use "./overrides";
+@use "./percy";
 
 html,
 body {

docs/vite.config.ts

@@ -30,9 +30,7 @@ export default defineConfig({
         // Inject the @kong/design-tokens SCSS variables, kongponents variables and mixins to make them available for all components.
         // This is not needed in host applications.
         additionalData: `
-          @import "@kong/design-tokens/tokens/scss/variables";
-          @import "@/styles/vars";
-          @import "@/styles/mixins";
+          @use "@/styles/globals" as *;
         `,
       },
     },

package.json

@@ -111,7 +111,7 @@
     "postcss-html": "^1.7.0",
     "rimraf": "^6.0.1",
     "rollup-plugin-visualizer": "^5.12.0",
-    "sass": "^1.80.4",
+    "sass": "^1.80.7",
     "semantic-release": "^24.2.0",
     "shx": "^0.3.4",
     "stylelint": "^16.9.0",

src/styles/_mixins.scss

@@ -1,24 +1,9 @@
-@import "@/styles/mixins/inputs";
-@import "@/styles/mixins/label";
-@import "@/styles/mixins/input-select";
-@import "@/styles/mixins/cards";
-@import "@/styles/mixins/badges";
-@import "@/styles/mixins/loaders";
-@import "@/styles/mixins/buttons";
-@import "@/styles/mixins/tables";
-
-/* Common mixins for all components */
-
-@mixin truncate($lines: 0) {
-  // if lines is 0, truncate with ellipsis, otherwise truncate with line clamp
-  @if $lines == 0 {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  } @else {
-    -webkit-box-orient: vertical;
-    display: -webkit-box;
-    -webkit-line-clamp: $lines;
-    overflow: hidden;
-  }
-}
+@forward "@/styles/mixins/inputs";
+@forward "@/styles/mixins/label";
+@forward "@/styles/mixins/input-select";
+@forward "@/styles/mixins/cards";
+@forward "@/styles/mixins/badges";
+@forward "@/styles/mixins/loaders";
+@forward "@/styles/mixins/buttons";
+@forward "@/styles/mixins/tables";
+@forward "@/styles/mixins/common";

src/styles/_transitions.scss

@@ -1,4 +1,4 @@
-@import "vars";
+@use "vars" as *;
 
 /*
 Kongponents Transitions 

src/styles/_vars.scss

@@ -1,3 +1,5 @@
+@use "@kong/design-tokens/tokens/scss/variables" as *;
+
 /*
 Shared SCSS variables that are used in Kongponents styles but are not exported.
 Each must start with `$kongponents` prefix to avoid conflicts with other libraries.

src/styles/globals.scss

@@ -0,0 +1,3 @@
+@forward "@kong/design-tokens/tokens/scss/variables";
+@forward "./mixins";
+@forward "./vars";

src/styles/mixins/_badges.scss

@@ -1,3 +1,6 @@
+@use "@kong/design-tokens/tokens/scss/variables" as *;
+@use "@/styles/vars" as *;
+
 /* Badges mixins */
 
 @mixin badgeWrapper {

src/styles/mixins/_buttons.scss

@@ -1,12 +1,7 @@
-/* Buttons mixins */
+@use "@kong/design-tokens/tokens/scss/variables" as *;
+@use "@/styles/vars" as *;
 
-@mixin defaultButtonReset {
-  background-color: var(--kui-color-background-transparent, $kui-color-background-transparent);
-  border: none;
-  color: inherit;
-  cursor: pointer;
-  padding: var(--kui-space-0, $kui-space-0);
-}
+/* Buttons mixins */
 
 @mixin kButtonMediumSize {
   font-size: var(--kui-font-size-30, $kui-font-size-30);

src/styles/mixins/_cards.scss

@@ -1,3 +1,5 @@
+@use "@kong/design-tokens/tokens/scss/variables" as *;
+
 /* Cards mixins */
 
 @mixin cardDefaults {

src/styles/mixins/_common.scss

@@ -0,0 +1,25 @@
+@use "@kong/design-tokens/tokens/scss/variables" as *;
+
+/* Common mixins for all components */
+
+@mixin truncate($lines: 0) {
+  // if lines is 0, truncate with ellipsis, otherwise truncate with line clamp
+  @if $lines == 0 {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  } @else {
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+    -webkit-line-clamp: $lines;
+    overflow: hidden;
+  }
+}
+
+@mixin defaultButtonReset {
+  background-color: var(--kui-color-background-transparent, $kui-color-background-transparent);
+  border: none;
+  color: inherit;
+  cursor: pointer;
+  padding: var(--kui-space-0, $kui-space-0);
+}