Wikiki / bulma-checkradio

Bulma's extension to display better checkbox and radio imputs
MIT License
71 stars 43 forks source link

This package breaks bulma SASS builds #69

Open remcohaszing opened 2 years ago

remcohaszing commented 2 years ago

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

https://github.com/Wikiki/bulma-checkradio/blob/c1323f8dd76ccfc26f57e7324892f7ed2c2ad5b2/src/sass/index.sass#L2

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 commented 2 years ago

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 commented 2 years ago

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

brendon commented 2 years ago

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

kdaveid commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

Oh, I see, of course. My bad.

brendon commented 2 years ago

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 commented 2 years ago

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 commented 1 year ago

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.