Ability to limit scope of Bulma styles to a certain element

[jakeboone02]

This is about the Bulma CSS framework.
I'm using Bulma 1.0.0.

Description

I maintain React Query Builder and a Bulma-compatible companion package which is a small wrapper around the main package with the .button/.select/.is-multiple/etc. classes added to the appropriate components.

The RQB Bulma demo currently uses Bulma 0.9.4. The stylesheet looks something like this:

.rqb-bulma {
  @import 'bulma/bulma.sass';

  .input {
    width: auto;
  }
}

The Bulma 1.0 docs say to use an @use rule instead of @import, but @use can't be nested. I used the Sass Migrator to convert the @imports to @include meta.load-css(...) but the styles weren't applied correctly.

I'd like to avoid @use-ing the Bulma styles at the top level since overrides a lot of the Docusaurus theme surrounding the Bulma-specific demo component.

I'm sure I'm missing something, but I don't see a good way to limit the scope of Bulma styles to an element with a specific class or id.

[digitigradeit]

I'm still learning how things work with @use and @forward, but given the added complexity of themes and light/dark modes, I have given up on the notion of importing all of bulma with one simple @use or @import line... rather, I am now doing something like:

@use "..//node_modules/bulma/sass/utilities/functions" as fn;
@use "..//node_modules/bulma/sass/utilities/css-variables.scss" as cv;
@use "..//node_modules/bulma/sass/utilities/derived-variables" as dv with (
  $size-small: $my-size-small,
  $size-normal: $my-size-normal,
  $size-medium: $my-size-medium,
  $size-large: $my-size-large,
  $family-primary: 'My Font',
  $family-secondary: 'My Font',
  $sizes: $my-sizes,
  $custom-colors: $custom-colors,
  $custom-shades: $custom-shades,
);

@use "..//node_modules/bulma/sass/utilities/mixins" as mx;



@forward "..//node_modules/bulma/sass/themes";
@forward "..//node_modules/bulma/sass/base";
@forward "..//node_modules/bulma/sass/elements";
@forward "..//node_modules/bulma/sass/form";

@use "..//node_modules/bulma/sass/components" with (
  $dropdown-content-shadow: none,
  $dropdown-content-z: 200,
  $card-background-color: $darkblue,
  ...
);

@forward "..//node_modules/bulma/sass/grid";

@use "..//node_modules/bulma/sass/layout" with (
  $footer-background-color: iv.$black,
);
@forward "..//node_modules/bulma/sass/base/skeleton";
@forward "..//node_modules/bulma/sass/helpers";

I'm guess this means you only @use when you want to customize the sass variables and use @forward when you're not customizing them. Otherwise you can access it in your own theme using the resulting css variables. But as far as limiting the scope, that's where the "as dv" "as mx" and "as iv" comes into play...

Another option is you can also setup your own custom bulma prefix using sass which triggers it to use the bulma 1.0.0 styles...

I would have liked this to be more clear in the docs. but I think others really would appreciate something to the tune of

<div class="container"> (i.e. without prefix still uses bulma 0.9.4) assuming its' linked in your html or @imported in css)

and then

<div class="bulma-container"> (i.e. wtih prefix uses bulma 1.0.0)

But https://sass-lang.com/documentation/at-rules/import/ does provide a lot more context around how @import is in the process of being phased out. If your implementation does not use dart-sass, you may only be able to use @import..

But in theory in order to use both, you could @import "../path/to/bulma/0.9.4..."; as you normally would

Then also do:

@use "../path/to/bulma/1.0.0/sass" with (
  $class-prefix: "bulma-"
);

But I think where a lot of folks might be struggling with is indicating all their variables in the initial @use and then trying to debug the corresponding errors at least on my case I get a lot of errors like:

Error: This variable was not declared with !default in the @used module.

But as I myself am also learning you can't do that in every case.