PostCSS plugins using the latest API won't load

[banjerluke]

I cannot get melte to use postcss in <style> blocks load recent PostCSS plugin versions.

UPDATE: I finally figured out that it's something to do with using a plugin that's been updated for PostCSS 8. Downgrading the plugin, e.g., postcss-nested@4, makes everything work fine. I can't figure out how to edit melte-complier to make it compatible with the new plugin API, but for now at least I can just stick with older plugin versions.

Minimal reproduction

See also my repo with the results of these steps.

1. meteor create --svelte
2. meteor npm install --save-dev postcss postcss-load-config postcss-nested
3. Create postcss.config.js to load postcss-nested plugin (like this)
4. Set svelte:compiler's css option to false in package.json (like this)
5. Add a <style lang="postcss"> block with a nested rule to App.svelte (like this)

Expected: postcss-nested plugin will transform the nested rule to proper CSS.

Actual: Build fails with imports/ui/App.svelte: Colon is expected (the exact error depends on the invalid CSS I've written)

Note: PostCSS works with .css files: If I put a nested rule in main.css it gets transformed properly. It only fails to transform CSS in .svelte files

Other things I've tried

• Putting PostCSS config in package.json
• Swapping out standard-minifier-css for juliancwirko:postcss
• Setting css: true in svelte:compiler options
• meteor reset
• Doing this in my actual web app project
• Setting the postcss option of svelte:compiler in package.json (see second post below)

---

Any ideas? I'm going crazy trying to get this to work. I love being able to use Svelte in Meteor, but it's been a drag to either write vanilla CSS or have to keep my styles in separate files. As I said above, this is working with older plugin versions now. Wish I could figure out how to update the package to be compatible with the most recent API, but I can't.

Thank you for looking! 🙏

[banjerluke]

Also, I was searching through melte-compiler for "postcss" and saw that it reads from options.postcss here, which is the package.json config. So I tried the following:

  "svelte:compiler": {
    "postcss": [ "postcss-nested" ],
    "css": false
  }

and

  "svelte:compiler": {
    "postcss": [ ["postcss-nested", {}] ],
    "css": false
  }

But in both cases, I got this error:

While running registerCompiler callback in package zodern:melte:
   processor.es6:130:15: [object Object] is not a PostCSS plugin
   at Processor.normalize (processor.es6:130:15)
   at new Processor (processor.es6:38:25)
   at postcss (postcss.es6:34:10)
   at new SvelteCompiler (packages/zodern:melte-compiler/MelteCompiler.js:98:22)
   at packages/melte-compiler/plugin.js:6:10

or if I set postcss to an empty array:

You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing...

Seems like this postcss config in package.json might be necessary for postcss to work (which would be good to document somewhere) but I still am unable to get it to work...