`@supports` syntax not supported by LibSass

[otagi]

Problem

With the updates to Fomantic UI 2.9.0–2.9.3, a SassC::SyntaxError is raised when building the Fomantic UI CSS:

SassC::SyntaxError in <controller action>

Showing <view path> where line #<line> raised:

Error: Invalid CSS after "@supports ": expected @supports condition (e.g. (display: flexbox)), was "selector(:has(.f)) "
        on line 541:10 of ../../../.rbenv/versions/3.2.2/lib/ruby/gems/3.2.0/gems/fomantic-ui-sass-2.9.3/app/assets/stylesheets/semantic-ui/elements/_input.scss
        from line 9:1 of ../../../.rbenv/versions/3.2.2/lib/ruby/gems/3.2.0/gems/fomantic-ui-sass-2.9.3/app/assets/stylesheets/semantic-ui/elements/_all.scss
        from line 2:1 of ../../../.rbenv/versions/3.2.2/lib/ruby/gems/3.2.0/gems/fomantic-ui-sass-2.9.3/app/assets/stylesheets/semantic-ui.scss
        from line 18:1 of app/assets/stylesheets/application.css.scss
>> @supports selector(:has(.f)) {
   ---------^

Official Sass fix

sass/sass#2780 deals with the extended @supports syntax, and references a fix for DartSass.

However, that issue explicitly says that LibSass will not be fixed because it is deprecated.

Potential solutions

• Strip unsupported @supports syntax from the code, or
• Change the gem dependencies from LibSass to DartSass.

[shanecav84]

@otagi Thanks for the issue, and sorry for the late response. Can you please test the fix I've implemented in https://github.com/fomantic/Fomantic-UI-SASS/pull/17 ?

[otagi]

@shanecav84 No worries, and thank you for #17!

I’m currently busy with an unrelated feature on our app, but will test your update with our Dartsass branch ASAP.

[otagi]

@shanecav84 I created a standard test app with rails new dartsass-test --css=sass.

https://github.com/otagi/dartsass-test

When launching Puma with bind/dev, this compile error happens:

Error: Can’t find stylesheet to import.
    |   ╷
    | 2 │ @import "semantic-ui";
    |   │         ^^^^^^^^^^^^^
    |   ╵
    |   app/assets/stylesheets/application.scss 2:9  root stylesheet

[shanecav84]

I'm still looking into this. The cause of that error is due to Rails use of cssbundling-rails for managing CSS assets. This no longer relies on Sprockets which is what this gem relies on. I'm thinking that the best solution for those using a non-Sprockets bundling system is to just swap this gem for Fomantic-UI itself https://github.com/fomantic/Fomantic-UI and set up your bundling pipeline to use that instead.

I'm still investigating. That isn't the final word.

[hklemp]

Hi, any updates on this issue?