Compiling vendored Bulma CSS with sass-rails or sassc-rails

[barrywoolgar]

My project uses sassc-rails and sprockets, and has fallen afoul of the issue referenced in the README (added by ac664d8):

Note: Legacy CSS bundlers sass-rails and sassc-rails may fail to compile some of the CSS vendored into this library from Bulma, which was created in Dart SASS. You will therefore need to upgrade to dartsass-rails or some library that relies on it, like cssbundling-rails.

The exact error being:

SassC::SyntaxError: Error: Invalid CSS after "...--s),var(--l));": expected "}", was "--00-l:var(--bulma-"

Not being in a position to migrate to dartsass-rails, dartsass-sprockets, or css-bundling right now, I looked a bit further into the exact cause, and would like to record it here to save the next person having to jump through the same hoops to figure out.

The vendored bulma.min.css file (added by d43649c for good reasons) contains a series of .is-palette-* rules containing CSS Variables that begin with numbers (eg. --00-l), for example:

.is-palette-light {
  --h: var(--bulma-light-h);
  --s: var(--bulma-light-s);
  --l: var(--bulma-light-l);
  --color: hsl(var(--h), var(--s), var(--l));
  --00-l: var(--bulma-light-00-l);
  --color-00: hsl(var(--h), var(--s), var(--00-l));
  --05-l: var(--bulma-light-05-l);
  --color-05: hsl(var(--h), var(--s), var(--05-l));
  /* snip */
  --95-l: var(--bulma-light-95-l);
  --color-95: hsl(var(--h), var(--s), var(--95-l));
  --100-l: var(--bulma-light-100-l);
  --color-100: hsl(var(--h), var(--s), var(--100-l));
}

This is valid CSS, but the Sass(C) compiler's don't like it, and I doubt that's going to change now that DartSass is on the scene.

Removing these rules from the CSS file will allow the MissionControl assets to be compiled, and has no apparent impact on MissionControl's UI. I've achieved this by forking the repo and replacing the CSS file, but that's not ideal for long-term maintenance.

Ideally this gem would only include the subset of CSS rules it needs from Bulma, but I appreciate it's a lot easier to just update the whole file as necessary to stay updated. Additionally, it's unlikely to get "fixed" upstream at Bulma as it's not really broken, so manually adjusting the CSS would be an open-ended task.

Have I missed a simpler solution?

[florian2]

Hi @barrywoolgar , just want to say thanks for your investigation into this issue! I can confirm that forking and removing all -is-palette-* rules fixes the compile error, which right now is more than good enough for me. Don't have a simpler solution sadly.

[davidsth]

Would love to have this now that the fix is in. When is the next release?

[Gnirt]

@florian2 can you create a PR with your changes ? main...florian2:mission_control-jobs:main Thanks for your contribution <3