Unable to extract transformed CSS

[derrickb]

rollup 2.25.2 rollup-plugin-vue 6.0.0

I have a simple style block in a .vue SFC that looks like this:

p {
  border-radius: 0%;
}

I wish to see the transformed result (ie. after PostCSS autoprefixer) in an extracted .css file. Eg:

output.css

p {
  -webkit-border-radius: 0%;
  border-radius: 0%;
}

However, no combination of plugins or plugin options seems to allow this, currently. I suspect it is related to the other CSS-related errors others have been seeing, which requires the use of a CSS plugin such as rollup-plugin-css-only or rollup-plugin-postcss in order to generate a bundle without errors.

Some of the settings I have tried:

• css set to true or false
• preprocessStyles set to true or false
• specifying PostCSS plugins via style.postcssPlugins (not sure how to actually use this setting, there are no examples)
• adding and removing extra CSS plugins such as rollup-plugin-css-only and rollup-plugin-postcss

I have only been able to produce three results with these various combinations:

1. Styles are properly transformed by PostCSS, and are injected via JavaScript.
2. Styles are extracted to CSS file, but without PostCSS transforms applied (ie. no autoprefixer)
3. The injected CSS string, along with the style inject JS function, are themselves written to a CSS file (obviously broken)

Does anyone know of a way to achieve what I'm looking for or do I need to wait for general fixes to the CSS issues the plugin is having?

[vue-bot]

Hello, thank you for taking time filling this issue!

However, we kindly ask you to use our Issue Helper when creating new issues, in order to ensure every issue provides the necessary information for us to investigate. This explains why your issue has been automatically closed by me (your robot friend!).

I hope to see your helper-created issue very soon!