Description
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!