picturepan2 / spectre

Spectre.css - A Lightweight, Responsive and Modern CSS Framework
https://picturepan2.github.io/spectre/
MIT License
11.31k stars 804 forks source link

Import spectre stylesheets with @use SCSS at-rule #668

Open mlbiche opened 3 years ago

mlbiche commented 3 years ago

Since March 2019, Dart Sass supports @use at-rule to import modules and is slowly deprecating @import. The projet is still using @import which makes it impossible to use with @use. For example :

@use "node_modules/spectre.css/src/variables";
@use "node_modules/spectre.css/src/mixins";

@use "node_modules/spectre.css/src/typography";

This code leads to an error when preprocessing it because the variable $line-height is not found in typography while it is defined in variables. The thing is @import loads all the code from the other file and this way makes variables global, while @use don't.

Updating the project to the new Dart Sass module system will allow people to load Spectre.css code using @use.

Does anyone in the community has already gave a try to such a migration on Spectre.css project ? Does anyone has already met some issues with migrating the code ? I can give it a go and propose PR if everything work fine.

Cheers 🤙