refactor: migrate to Sass modules and CSS logical properties and values

src/App.vue

@@ -36,7 +36,7 @@ onBeforeMount(() => {
 
 <style lang="scss">
 // Import Main styles for this application
-@import 'styles/style';
+@use 'styles/style';
 // We use those styles to show code examples, you should remove them in your application.
-@import 'styles/examples';
+@use 'styles/examples';
 </style>

src/styles/_custom.scss

@@ -1 +0,0 @@
-// Here you can add other styles

src/styles/_theme.scss

@@ -1,64 +0,0 @@
-body {
-  background-color: var(--cui-tertiary-bg);
-}
-
-.wrapper {
-  width: 100%;
-  @include ltr-rtl("padding-left", var(--cui-sidebar-occupy-start, 0));
-  @include ltr-rtl("padding-right", var(--cui-sidebar-occupy-end, 0));
-  will-change: auto;
-  @include transition(padding .15s);
-}
-
-.header > .container-fluid,
-.sidebar-header {
-  min-height: calc(4rem + 1px); // stylelint-disable-line function-disallowed-list
-}
-
-.sidebar-brand-full {
-  margin-left: 3px;
-}
-
-.sidebar-header {
-  .nav-underline-border {
-    --cui-nav-underline-border-link-padding-x: 1rem;
-    --cui-nav-underline-border-gap: 0;
-  }
-
-  .nav-link {
-    display: flex;
-    align-items: center;
-    min-height: calc(4rem + 1px); // stylelint-disable-line function-disallowed-list
-  }
-}
-
-.sidebar-toggler {
-  @include ltr-rtl("margin-left", auto);
-}
-
-.sidebar-narrow,
-.sidebar-narrow-unfoldable:not(:hover) {
-  .sidebar-toggler {
-    @include ltr-rtl("margin-right", auto);
-  }
-}
-
-.header > .container-fluid + .container-fluid {
-  min-height: 3rem;
-}
-
-.footer {
-  min-height: calc(3rem + 1px); // stylelint-disable-line function-disallowed-list
-}
-
-@if $enable-dark-mode {
-  @include color-mode(dark) {
-    body {
-      background-color: var(--cui-dark-bg-subtle);
-    }
-
-    .footer {
-      --cui-footer-bg: var(--cui-body-bg);
-    }
-  }
-}

src/styles/_variables.scss

@@ -1,5 +0,0 @@
-// Variable overrides
-//
-// If you want to customize your project please add your variables below.
-
-$enable-deprecation-messages: false !default;

src/styles/examples.scss

@@ -1,10 +1,7 @@
-/* stylelint-disable declaration-no-important, scss/selector-no-redundant-nesting-selector */
+/* stylelint-disable scss/selector-no-redundant-nesting-selector */
-
+@use "@coreui/coreui/scss/variables" as *;
-$enable-deprecation-messages: false !default;
+@use "@coreui/coreui/scss/mixins/breakpoints" as *;
-
+@use "@coreui/coreui/scss/mixins/color-mode" as *;
-@import "@coreui/coreui/scss/functions";
-@import "@coreui/coreui/scss/variables";
-@import "@coreui/coreui/scss/mixins";
 
 .example {
   &:not(:first-child) {
@@ -110,10 +107,8 @@ $enable-deprecation-messages: false !default;
   }
 }
 
-@if $enable-dark-mode {
+@include color-mode(dark) {
-  @include color-mode(dark) {
+  .example .tab-content {
-    .example .tab-content {
+    background-color: var(--#{$prefix}secondary-bg) !important;
-      background-color: var(--#{$prefix}secondary-bg) !important;
-    }
   }
 }

src/styles/style.scss

@@ -1,15 +1,67 @@
-// If you want to override variables do it here
+@use "@coreui/coreui/scss/coreui" as * with (
-@import "variables";
+  $enable-deprecation-messages: false
+);
+@use "@coreui/chartjs/scss/coreui-chartjs";
+@use "vendors/simplebar";
 
-// Import styles
+body {
-@import "@coreui/coreui/scss/coreui";
+  background-color: var(--cui-tertiary-bg);
-@import "@coreui/chartjs/scss/coreui-chartjs";
+}
 
-// Vendors
+.wrapper {
-@import "vendors/simplebar";
+  width: 100%;
+  padding-inline: var(--cui-sidebar-occupy-start, 0) var(--cui-sidebar-occupy-end, 0);
+  will-change: auto;
+  @include transition(padding .15s);
+}
 
-// Custom styles for this theme
+.header > .container-fluid,
-@import "theme";
+.sidebar-header {
+  min-height: calc(4rem + 1px); // stylelint-disable-line function-disallowed-list
+}
 
-// If you want to add custom CSS you can put it here
+.sidebar-brand-full {
-@import "custom";
+  margin-left: 3px;
+}
+
+.sidebar-header {
+  .nav-underline-border {
+    --cui-nav-underline-border-link-padding-x: 1rem;
+    --cui-nav-underline-border-gap: 0;
+  }
+
+  .nav-link {
+    display: flex;
+    align-items: center;
+    min-height: calc(4rem + 1px); // stylelint-disable-line function-disallowed-list
+  }
+}
+
+.sidebar-toggler {
+  margin-inline-start: auto;
+}
+
+.sidebar-narrow,
+.sidebar-narrow-unfoldable:not(:hover) {
+  .sidebar-toggler {
+    margin-inline-end: auto;
+  }
+}
+
+.header > .container-fluid + .container-fluid {
+  min-height: 3rem;
+}
+
+.footer {
+  min-height: calc(3rem + 1px); // stylelint-disable-line function-disallowed-list
+}
+
+@include color-mode(dark) {
+  body {
+    background-color: var(--cui-dark-bg-subtle);
+  }
+
+  .footer {
+    --cui-footer-bg: var(--cui-body-bg);
+  }
+}

vite.config.mjs

@@ -13,12 +13,6 @@ export default defineConfig(() => {
           autoprefixer({}), // add options if needed
         ],
       },
-      preprocessorOptions: {
-        scss: {
-          quietDeps: true,
-          silenceDeprecations: ['import', 'legacy-js-api'],
-        },
-      },
     },
     resolve: {
       alias: [