sass error `Invalid CSS`

[brewster1134]

so i have a pretty simple setup, but get an error when using the scss rollup plugin. this compiles fine if i use the sass cli directly. i am new to rollup, and the only help i could find was all webpack related. at first i was thinking i had to specify i am using sass vs scss in the scss plugin config, but i don't see that option.

Error:
    expected ";".
  ╷
4 │   padding: 1em;
  │          ^
  ╵
  stdin 4:10  root stylesheet

import scss from 'rollup-plugin-scss'
import typescript from '@rollup/plugin-typescript'
export default {
  plugins: [
    scss({
      sass: require('sass')
    ),
    typescript()
  ]
}

@import 'systematize/systematize.scss'

body
  padding: 1em

rollup --config rollup.config.js demo/demo.ts --file .dist/demo/demo.js --format umd --name "myBundle"

UPDATE i noticed in the docs, the default was node-sass, which i updated to just sass, which unblocked the previous problem, but it still seems as though it is looking for scss instead of sass syntax.

[brewster1134]

i notice if i convert to scss format, it works... also, while digging into the source, i notice that it concatenates multiple files sass/scss BEFORE rendering, vs rendering each file and then concatenating... so if there are both .scss and .sass syntax files, it will fail...

but still not clear why using sass programmatically is failing, but through the command line works

[ben-at-sahmri]

Are you using all .sass syntax @brewster1134 ? If so, adding indentedSyntax: true to the plugin options in rollup.config.js worked for me. I don't know what effect it'd have on a mix of syntaxes, though.