fbpx

Migrate from LibSass to Dart Sass

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
ScopeGlobal scope, imports everything into the global namespace.Scoped namespace, requires prefixed access to variables, mixins, and functions.
Global PollutionCan cause global namespace pollution, leading to potential conflicts.Prevents global namespace pollution by using a namespace.
Multiple ImportsAllows multiple imports, which can lead to duplicated CSS.Imports only once per file, avoiding duplication.
Syntax SimplicitySimple, but can become complex with large projects due to global scope.Slightly more verbose but ensures better structure and maintainability.
Selective ImportImports all content, no way to selectively import variables, mixins, or functions.Allows selective importing and configuring through namespace or with keyword.
Best PracticeConsidered outdated for modern SCSS projects.Recommended best practice for modern SCSS development.
ConfigurationCannot configure imported variables.Allows configuring variables at the point of import using with.
CompatibilitySupported 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.

Get the plugins:

  • Gutenberg Studio – ADD ON FOR SCRIPTS ORGANIZER

    Gutenberg Studio – ADD ON FOR SCRIPTS ORGANIZER

    Create Gutenberg Blocks with ease and extend it with dynamic custom fields

  • Scripts Organizer

    Scripts Organizer

    Get full Code Editor experience inside WordPress with support to write PHP hooks and functions, JavaScript, CSS, and compile SCSS. Scripts can be scheduled and triggered based on your needs regardless if you’re sleeping taking a coffee break or on vacation.