This package breaks bulma SASS builds

[remcohaszing]

The following line breaks various bulma styles when bulma and bulma-checkradio are built using SASS

bulma-checkradio/src/sass/index.sass

Line 2 in c1323f8

@import "node_modules/bulma/sass/utilities/_all.sass"

This import changes the CSS order, causing the build output CSS to prefer certain styles over others, because the selectors have the same CSS specificity.

I.e. this line causes Bulma buttons to not have borders and button text to be aligned left, instead of centered.

[mbolli]

In my case (yarn2+pnp) it even stops the build:

Error: Module build failed (from ../../.yarn/__virtual__/sass-loader-virtual-b253f017d5/0/cache/sass-loader-npm-12.2.0-ec155d3d53-2b2dd04ab5.zip/node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
2 │ @import "node_modules/bulma/sass/utilities/_all.sass"
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  ../../.yarn/cache/bulma-checkradio-npm-2.1.2-098c384aa7-bdf459d859.zip/node_modules/bulma-checkradio/src/sass/index.sass 2:9

[CarlVerret]

Having same issue, Could you please fix and update npm package ? I'd be glad to provide a PR if needed.

[brendon]

Just hit up against this one too. Is it an easy enough fix @CarlVerret?

[kdaveid]

Following the guide (using SASS) here: Bulma Extensions Wiki
doing this:

@charset "utf-8";  
@import '~bulma/bulma';  
@import '~bulma-checkradio';  

It worked for me

[brendon]

Thanks @kdaveid, that just imports the precompiled version. If you want it to adjust to your custom primary and other colours then you'd need to import the uncompiled sass code.

[kdaveid]

Oh, I see, of course. My bad.

[brendon]

I've come to the conclusion that there should be no imports of bulma dependencies in any of these bulma plugin sass files (if they're expected to be imported by the end-developer) as the developer should be expected to have already imported bulma before importing these sass source files so all the dependencies will already be in place. The build process for each of these packages should have an extra wrapper file that includes what is needed from bulma in order to build a standalone css file and the dependencies should be documented for those wanting to recompile the sass themselves.

@Wikiki, are you open to PR's to address this?

[alexfurr]

Also seeing an error adding this to my sass file and compiling

{ "status": 1, "file": "/css/bulma/node_modules/bulma-checkradio/src/sass/index.sass", "line": 13, "column": 16, "message": "Invalid CSS after \" $height: math\": expected expression (e.g. 1px, bold), was \".div($newSize, 2.5)\"", "formatted": "Error: Invalid CSS after \" $height: math\": expected expression (e.g. 1px, bold), was \".div($newSize, 2.5)\"\n on line 13 of node_modules/bulma-checkradio/src/sass/index.sass\n from line 20 of sass/icl-bulma.scss\n>> $height: math.div($newSize, 2.5);\n\n ---------------^\n" }

Not sure if this is the same issue, but not great :(

[CedricHg]

Still broken, this drove me nuts. Currently I'm sticking with the full bulma-extensions package which is wasteful and has a deprecation warning relating to slash div, but it works.