Maglev Main (V3) css compile error

[ishields]

Switching over to main to try out Maglev V3 I encountered the below error

ExecJS::RuntimeError in HomeController#index
CssSyntaxError: /Users/ianshields/.rvm/gems/ruby-3.4.2/bundler/gems/maglev-core-9f3ff656d096/app/assets/stylesheets/maglev/application.css:141:12: Unknown word
139 | th {
140 | min-width: 1em;
> 141 | // border: 2px solid $color-grey;
| ^
142 | @apply border-2;
143 | @apply border-solid;

Here is the AI Analysis - that comment is almost certainly a bug in the new Maglev code. The file at maglev-core/app/assets/stylesheets/maglev/tailwind.css.erb uses // inside a block that gets processed as plain CSS—PostCSS trips over it unless you’re compiling with Sass. When you were on 2.1.0 it probably built differently (or that line wasn’t there yet). Upgrading to their main branch exposed it.

[did]

👋 @ishields! This is weird, application.css file doesn't have 141 lines. I've got some idea how/why it happened. Could you tell me what you're using in your main app to precompile assets? Thanks!

[ishields]

@did We were using webpacker which is super legacy so I just updated it to shakapacker (long over due) which is more modern and maintained. Seems like the issue still persists though.

[did]

👋 @ishields!

I didn't get the same error as you got.

BUT in my test Rails app powered by Sprockets + Webpacker, I was unable to correctly precompile the Maglev Tailwindcss asset. The error was caused by Sprockets (actually, ExecJS is being called by Sprockets, not by Webpacker) which were using the wrong source file.

I patched it here -> https://github.com/maglevhq/maglev-core/commit/4790f968422de37bfbea8389435c0a8ed9ff299e

I do believe it'll fix your issue. If not, I'll need which version of Rails + Sprockets + (Shakapacker) you're using.

[ishields]

Unfortunately hasn't fixed it :(

sprockets

    sprockets (4.2.2)
      concurrent-ruby (~> 1.0)
      logger
      rack (>= 2.2.4, < 4)
    sprockets-rails (3.5.2)
      actionpack (>= 6.1)
      activesupport (>= 6.1)
      sprockets (>= 3.0.0)

rails 7.2

shakackapacker 7.2.3

sassc-rails (2.1.2)

[ishields]

So the issue is simply the // which is not valid css. If you escape it with css comment syntax it builds

Here is a CSS validator complaining about the same thing. I think // is just not a valid way of commenting out css and you have to use /**/