Fix SCSS Deprecations for @import and Global Built-ins

[levitin]

The @import rule and global built-in functions are deprecated in Dart Sass 1.80.0 and will be removed in Dart Sass 3.0.0. These deprecations cause issues like conflicts, slow compilation, and difficulties tracing variables/functions.

Action Required:

• Restructure base theme, defining all used variables.
• Replace @import rules with @use and @forward as per the new Sass module system.
• Migrate global built-in functions to scoped equivalents to avoid future issues.

Further information:

• https://sass-lang.com/documentation/breaking-changes/import/

[levitin]

To temporarily silence deprecation warnings, consider extending vite.config.ts as follows:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
+  css: {
+    preprocessorOptions: {
+      scss: {
+        silenceDeprecations: ['import', 'global-builtin', 'color-functions']
+      }
+    }
+  }
})

[adamicska]

I've updated the whole theme base and a custom theme for a project. Is there any interest in collaborating to get this updated?

[levitin]

I've updated the whole theme base and a custom theme for a project. Is there any interest in collaborating to get this updated?

Can you please submit a pull request?

[levitin]

up

[matteomelotti]

hello @adamicska I'm also struggling updating themes with @use and @forward, can you please share your work in some way?
Thanks a lot.

[robinlopez]

@adamicska I am also interested. Would it be possible to access your work to see how to correct the depreciated elements?

[adamicska]

Hey @levitin @robinlopez @matteomelotti. Sorry, I've been super busy with work. Basically, the idea to solve this is to update:

• The theme base and custom themes and migrate them to, I suggest, a 7-1 sass pattern, and replace imports with "@use" (root level index files) and "@forward" (for the nested indexes). For my project, I updated all of the files and structure following this pattern.
• Another note, remember to use @use 'sass:color'; to properly update colors, such as: - color.adjust(v.$bg-primary-color, $lightness: -5%)
• To make sure builds are optimized properly, all scss files need to have a preceding "_" such as "_index.scss", to make sure builds are optimized properly.

If you are still willing to go through all of this like I did, you can use the updated theme base and sample architecture in this repo I made for you. You've got a lot more details in the readme. Sorry for the late reply!

[robinlopez]

Hi @adamicska ! No worries, thank you very much for this detailed information, it's very useful to me. I really appreciate you creating the repository and documentation. I'll take a look at your configuration. Thanks again for taking the time to share all this!