[Bug]: Bulma styles overlapping with Vulk styles

[driss-chelouati]

Demo URL

No response

What happened?

Reference to this issue is in this ticket:
https://dojo.cssninja.io/issues/view/63c8063d8f01650012d0e2ef

Solution:
Apply @layer CSS directive to bulma styles

@layer {
  // bulma-css-vars
  @import './bulma-generated/generated-vars.sass';

  // import abstracts content (variables override / functions)
  @import './abstracts/all';

  // import css variables
  @import './css-variables/all';

  // Here we import bulma-css-vars instead of bulma
  // because we want to use the variables defined in the file
  @import './node_modules/bulma-css-vars/bulma-cv-lib';

  // import utilities
  @import './utilities/all';
}

Reproduction steps

1. Add a table component from Vulk to a page
2. Reload the page to see the styles broken

Relevant log output

No response

What browsers are you seeing the problem on?

No response

What is your operating system?

No response