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 ac664d87d220cd34f3b80a4c7516b1f7adb8cc42):

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 d43649cdddace2ec5ab2236f74ef41f06f4bc21d 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?