thgh / rollup-plugin-scss

Rollup and compile multiple .scss, .sass and .css imports
MIT License
135 stars 46 forks source link

Update readme to show how to use postcss/processors? #49

Closed geotrev closed 4 years ago

geotrev commented 4 years ago

Hi there!

I saw back in 0.4.0 the option to hook in a CSS processor was added. Based on the source code, I assumed it would be as simple as this:

scss({
  sass,
  output: false,
  outputStyle: "compressed",
  processor: async (css) => {
    const result = await postcss([autoprefixer]).process(css, { from: undefined })
    return result.css
  },
})

I expected the final result to be my CSS, e.g.:

var styles = 'html{display:flex}'

But instead I get this:

var styles = {}

I checked that all my packages are being loaded correctly and even result.css being returned is an actual string of the CSS I expect, but still I get the above. 🤷

Could it be that this is an async function and that use-case isn't handled? My only guess.

Any insight is appreciated. Thanks!

thgh commented 4 years ago

Looks like a bug here: https://github.com/thgh/rollup-plugin-scss/blob/a11c0a0f585c4c9cd7a18248aaa28cd2c2782b20/index.es.js#L71

It should be

        return Promise.resolve(compileToCSS(code)).then((css) => ({
          code: 'export default ' + JSON.stringify(css),
          map: { mappings: '' }
        }))
geotrev commented 4 years ago

That looks closer to what I'd expect. Happy to open a PR if you'd like.