Move to @use/@forward instead of @import

[aulonm]

Any plans of changing the style from using @import statements to @use/@forward since @import is going to be deprecated soon and they advise users to use the new methods.

ref

I've been trying to change my project to use @use and @forward but its not working that well with griddle.

Was wondering if you guys have tried to use the new methods instead at the same time as import-methods. Not sure if they can coexist though, so it may be a breaking change..

Starting to get deprecation warnings when using newest Dart Sass (ref)
DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

[andrew-boyd]

@aulonm thanks for the heads up! This was actually not on my radar. I have some reading to do.

[andrew-boyd]

@aulonm Read up on this. I think I could get it working for really simple use-cases, but it's going to be a hard time with support for anything using complex loading systems (such as Nuxt). It looks like @import will be supported through at least 2022 so I'm going to leave this issue open and revisit it when ecosystem support for the new @use and @forward statements is more mature.

I've pushed my tinkering on the branch feature/sass-statement-upgrade if you want to take a look. It worked for me locally in a Vue3 + Vite setup, but like I mentioned much more issues when trying to use in a Vue2 + Nuxt project. Note that this branch includes the vue3 branch so you'll need to be running Vue 3 to test it.

[aulonm]

Thats amazing, thanks for the thorough feedback! I was actually trying to get it to work with my new project running vue3 and came to the conclusion that you would need to rewrite the package for vue3.

Typescript support would also be awesome, but thats not really the highest priority. Your lib has been amazing to work with none the less and it made our development much smoother and faster

[andrew-boyd]

@aulonm That's great to hear! Personally I can't stand to work on projects withou a visual grid in the browser now. I've ruined other grid systemes for myself! 😄

95% of the package is the Sass mixins, so overall Griddle should be pretty framework agnostic. The "vue" layer is just a simple component registration to show the overlay. The Vue3 upgrade only required small changes to the render function is handled.

[aulonm]

Just an FYI while you work on vue3 and new sass version support. I copied the code from your branch and changed it to support Typescript for my own project, until you update and release a new version. I'm still using version 2.3.1 but instead of importing the vue-file I just use my own and then change back to yours when v3 is released 🙌

I added the file here so you can have a look if you ever want to support Typescript some time: https://gist.github.com/aulonm/394f348d2024798b6fceb9a3e33f491d