SASS inside Pug template gives Invalid CSS

[gawin]

When using a SASS style tag inside a Pug template (formally Jade) I receive the following error:

Error: Invalid CSS after " ": expected 1 selector or at-rule, was "{ h1 {"

SASS failing example tag

//- Filename: sass-inside-pug.tag
sass-inside-pug
  h1 SASS
  h2 Inside Nug

  style(type="sass").
    h1
      color: red
    h2
      color: orange

CLI arguments
riot --template pug --style sass -w src/tags build/js/tags.js

If you look closely at the error message you'll see that the h1 tag itself is enclosed inside a { curly bracket block. Looking at the error message if seems that because the entire CSS is automatically wrapped inside a { } block, that that might be the issue here. Notice that the SASS itself is rendered correctly.

Now if we would add the option indentedSyntax: false and add the correct curly brackets, then the result is compiled correctly.

Note that using indentedSyntax: false is only an example to indicate that the problem is probably caused by the default indentedSyntax: true. Of course we don't want to use curly brackets at all with SASS, so the indentedSyntax: true should just work.

SASS with indentedSyntax: false working example tag

//- Filename: sass-inside-pug-without-indented-syntax.tag
sass-inside-pug-without-indented-syntax
  h1 SASS
  h2 Inside Nug

  style(type="sass", options="{"indentedSyntax": false }"). 
    h1{
      color: red
    }
    h2{
      color: orange
    }

Used versions
riot-cli: 2.5.0
riot-compiler: 2.4.1
node-sass: 3.7.0
libsass: 3.3.6

Any help is really appreciated, would ❤️ to see this fixed!

[aMarCruz]

Fixed in v2.5.4, sorry by the delay.

[gawin]

Great, thx for the fix @aMarCruz! 👍