Scripts Organizer and Gutenberg Studio are moved to latest version of Dart Sass.
Most developers, by default, use Composer, and the easiest way to implement Sass (SCSS) is to hook into the SCSSPHP library, and you’re good to go.
The problem with this approach is that SCSSPHP is still based on the older version of ‘LibSass,’ and we have been waiting for them to rebuild the entire library since 2020. It’s 2024 and they are only 60% complete. Read more about their roadmap: https://github.com/scssphp/scssphp/issues/210
Given the long wait, we decided it was time to look to the future.
We have completely revamped the compile process and are now using the native Dart compiler built with JavaScript. This ensures that we always have the latest compile compatibilities.
As a result, plugins are now lighter by 500kb, as we no longer use PHP to compile—only a lightweight JavaScript solution.
@Use or @Import
Actually, neither.
We understand that our users aren’t necessarily developers, and many use our plugin to avoid the complexities of coding. That’s why, instead of using the deprecated @import or requiring users to learn @use, we’ve taken a completely different approach.
We combine all partials and code blocks into one virtual file, ensuring they are in the correct order, and then compile it into a single CSS file.
Here are the key differences between @import and @use in SCSS:
| Feature | @import | @use |
|---|---|---|
| Scope | Global scope, imports everything into the global namespace. | Scoped namespace, requires prefixed access to variables, mixins, and functions. |
| Global Pollution | Can cause global namespace pollution, leading to potential conflicts. | Prevents global namespace pollution by using a namespace. |
| Multiple Imports | Allows multiple imports, which can lead to duplicated CSS. | Imports only once per file, avoiding duplication. |
| Syntax Simplicity | Simple, but can become complex with large projects due to global scope. | Slightly more verbose but ensures better structure and maintainability. |
| Selective Import | Imports all content, no way to selectively import variables, mixins, or functions. | Allows selective importing and configuring through namespace or with keyword. |
| Best Practice | Considered outdated for modern SCSS projects. | Recommended best practice for modern SCSS development. |
| Configuration | Cannot configure imported variables. | Allows configuring variables at the point of import using with. |
| Compatibility | Supported by all versions of Sass. | Introduced in Dart Sass, may not be supported by older versions. |
In summary, @use is the more modern, safer, and recommended approach for importing stylesheets in SCSS, while @import is older and more prone to issues in larger projects.
Are you effected?
No. Every SCSS is already converted to CSS and cached. Once you continue working on your project and press update button again it will be converted to CSS again with new feature.
Changes
The only change you will experience is once you import code blocks you will need now to regenerate code blocks.