Open banjerluke opened 2 years ago
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...
I cannot get melte to
use postcss inload recent PostCSS plugin versions.<style>
blocksUPDATE: 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 editmelte-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.
meteor create --svelte
meteor npm install --save-dev postcss postcss-load-config postcss-nested
postcss.config.js
to loadpostcss-nested
plugin (like this)svelte:compiler
'scss
option tofalse
inpackage.json
(like this)<style lang="postcss">
block with a nested rule toApp.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 inmain.css
it gets transformed properly. It only fails to transform CSS in.svelte
filesOther things I've tried
package.json
standard-minifier-css
forjuliancwirko:postcss
css: true
insvelte:compiler
optionsmeteor reset
postcss
option ofsvelte:compiler
inpackage.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! 🙏