SassC fails after upgrading to Tailwind 3

[thomasvanholder]

After upgrading a Rails 6.1.4.1 app to the TailwindCSS 3, the following SassC error pops up. The odd behaviour is that this error only occurs in Github Actions, while locally everything works as inteded.

Failure/Error: Unable to find stdin to read failed line

ActionView::Template::Error:
  Error: Function rgb is missing argument $green.
          on line 436 of stdin
  >>   border-color: rgb(229 231 235 / var(--tw-border-opacity));

    ----------------^
# stdin:436
# ------------------
# --- Caused by: ---
# SassC::SyntaxError:
#   Error: Function rgb is missing argument $green.
#           on line 436 of stdin
#   >>   border-color: rgb(229 231 235 / var(--tw-border-opacity));
#   
#      ----------------^
#   stdin:436

Any ideas?

[ggsp]

I think I'm seeing something similar in my Rails app—everything works fine locally, but things break on CI. This is the output of RAILS_ENV=production bundle exec rake assets:precompile:

SassC::SyntaxError: Error: Function hsla is missing argument $lightness.
        on line 57 of stdin
>>   background: hsla(var(--primary-color), 1);

   --------------^

This error should be equivalent to yours as I also have a CSS custom property in a color function, which seems to be what LibSass is ultimately hiccuping on. For context, I am currently trying to add an administration gem which depends on SassC; this error is popping up for the first time because of that.

My understanding is that because I am using Webpacker in development, precompilation works without issue. Webpacker relies on DartSass, which can deal with a CSS custom property inside of a color function.

SassC instead relies on LibSass, which seemingly also implemented this functionality. The trail currently goes cold for me here. Maybe LibSass interprets the above as a SASS color function, while DartSass sees it as a CSS color function? Nothing but a vague guess on my part.

I've yet to find a solution—besides not using the gem which relies on SassC, which is not the most desirable.

[thomasvanholder]

@ggsp, I ended up switching to PostCSS which can mimick sass behaviour.