Use Sass modules (@use instead of @import)

[dpschen]

This is about Bulma. Is it a feature.

Overview of the problem

This is about the Bulma CSS framework I'm using Bulma version 0.9.3 I am sure this issue is not a duplicate?

Description

Using the @use syntax in the individual sass files for the import of variables and mixins would allow to import only the modules in a page view that are currently used.

E.g. replace the first line in packages/bulma/sass/components/card.sass:

// replace this
@import "../utilities/mixins"

with this:
@use "../utilities/mixins" as *

=> Better bundle splitting.

---

If the benefits of this are still unclear I can also write a longer version of this issue and what kind of specific problem it would solve.

I just didn't want to waste any time if changes like this are not wanted =)

Regardless of the benefits: Sass officially discourages the use of @import.

[daniil4udo]

I was about to look at at soon

[dpschen]

That's awesome =) If you want some input I'm happy to help

[daniil4udo]

@dpschen pushed "buildable" PR.

Imports are bit verbose, but seems easier to understand what is are coming from where.

Be my guest to check it out. I'm open for any suggestions

[dpschen]

Wow that's amazing work @daniil4udo ! =) 🥳

By "buildable" you mean that you still expect errors be included?

Imports are bit verbose, but seems easier to understand what is are coming from where.

I guess that's also a bit by design (from Sass) so that you can always see where stuff is coming from.

Be my guest to check it out. I'm open for any suggestions

At first glance it looks exactly how I imagined it to be. Also I really like the new index files (I never got why bulma uses these _all files). I might take a few days to check that out if it works in practise =)

[daniil4udo]

By "buildable" I mean it builds without the errors 😄

Judging by compiled CSS diffs have reasonable changes (like division precision and few move-around that shouldn't affect styles)

There was some import error loop, so I merges shared and native bulma utilities (I guess that's for better).

I think it'd be great to separate variables namespace and function / mixins namespace, but let's see

[dpschen]

👋 Hey @daniil4udo, I just tried to test this branch in my project but didn't find out how to install the package from that feature branch.

I think the problems come from the package beeing a monorepo:

error Can't add "@bulvar/bulma": invalid package version undefined.

Using (still) yarn v1.

How can I test this project if I only want to import individual sass files? Related might also be that it now uses the Sass path (can't figure out how to add this to my vite setup / how to debug my tries adding them there).

[dpschen]

Okay I was now able to install it by cloning the repo next to my project folder and add the package via changing the entry in the package.json directly:

    "@bulvar/bulma": "link:../bulvar/packages/bulma",

When I run my app I now get this:

  ╷
1 │ @use "utilities/derived-variables" as vars
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  ../bulvar/packages/bulma/sass/base/generic.sass 1:1  @import
  src/styles/global.scss 15:9                          @import
  src/App.vue 3:9                                      root stylesheet
  Plugin: vite:css
  File: /[...]/bulvar/packages/bulma/sass/base/generic.sass
  Error: Can't find stylesheet to import.
    ╷
  1 │ @use "utilities/derived-variables" as vars
    │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
    ../bulvar/packages/bulma/sass/base/generic.sass 1:1  @import
    src/styles/global.scss 15:9                          @import
    src/App.vue 3:9                                      root stylesheet

After reading this issue, I tried adding a index.sass suffix to the import in the generic.sass but that throws the same error on the changed import path. I thought it might be a regression 🤷

I did add an entry to the vite.config.js to configure the load path of sass. But I'm not sure if it's recognised. Looks currently like that:

css: {
    preprocessorOptions: {
        scss: {
            includePaths: ['node_modules/bulvar/bulma/packages/sass'],
        },
    },
},

I also tried some other paths, but that also didn't work out :/

I know this is not a problem specific with this library. I just want to document my process trying to make it work.

Maybe it makes sense to remove the load path and use absolute paths inside the lib to make it easier to use the sass files directly?

[daniil4udo]

Done. Tested in my project and it seems to work.

Yeah that hit me few day ago, I just have to stop this over-optimization 🙄

To avoid additional setup and simplify the process I left relative paths everywhere.

[daniil4udo]

@dpschen you can install beta now 🎉🎉🎉

Install @bulvar/bulma@0.10.1-beta.2

Need to document migration from @import to @use still

[dpschen]

Will try, thanks! =)

[dpschen]

Sorry for the delay. So in general I think the @use seems to work. Sadly I still have problems with my use-case :/

I'm still trying to grasp the specific problem and what exactly is failing.

There are now some specificity problems, but I'm not even sure if they are related with @bulvar or coming from the organisation of the code.

My current suspicion is that by importing the @bulvar/bulma utilities in every component (I need them to be able to access bulmas mixins) I overwrite the overwrites that happened after the global import (hope it's clear what I mean here).

To quote the sass documentation for @use:

Any styles loaded this way will be included exactly once in the compiled CSS output, no matter how many times those styles are loaded.

Since every Vue component seems to be seen as isolated by Sass I think everything gets imported over and over again :/ The original Bulma didn't render CSS output when importing the utilities so that's why there this wasn't an issue.

I might be able to solve this by not importing the whole utility folder but only the mixin part, but I have to check if there is a need other parts of the utilites.

I'm not sure yet though, so I'll check the details when I know more. Just wanted to keep you updated =)

[daniil4udo]

Thank you @dpschen for putting your efforts in testing.

There are now some specificity problems, but I'm not even sure if they are related with @bulvar or coming from the organization of the code.

Isn't the idea of SASS Modules to prevent overwrites by namespacing things?

Maybe what you can do, if you have mixins in your project, just try to add@forward '@bulvar/bulma/utilities/mixins' at the top of your file, and import that instead?

Same technique has been used in the derived-variables.sass, not to import both files, you can import just derived-variables to have access to all bulma variables 🤷‍♂️