PostCSS config breaks the build

[arggh]

If I try to define PostCSS plugins, the build crashes on this error:

/Users/arggh/.meteor/packages/coffeescript/.1.0.17.jzhn4e.2mhnq++os+web.browser+web.cordova/plugin.compileCoffeescript.os/npm/node_modules/meteor/promise/node_modules/meteor-promise/promise_server.js:116
      throw error;
      ^

TypeError: processed.code.replace is not a function
    at parse_attached_sourcemap (/Users/arggh/Develop/app/node_modules/svelte/src/compiler/utils/mapped_code.ts:305:34)
    at processed_tag_to_code (/Users/arggh/Develop/app/node_modules/svelte/src/compiler/preprocess/index.ts:111:2)
    at process_single_tag (/Users/arggh/Develop/app/node_modules/svelte/src/compiler/preprocess/index.ts:168:10)

Meteor version: 2.1 zodern:melte version: 1.3.1

[zodern]

I tried using https://github.com/meteor-svelte/postcss-example with melte, and it worked correctly. Could you please share a reproduction?

[arggh]

I just cloned the example repo (https://github.com/meteor-svelte/postcss-example), updated Meteor to latest version and got the same error described above.

~/Develop/sandbox
❯ git clone git@github.com:meteor-svelte/postcss-example.git
Cloning into 'postcss-example'...
remote: Enumerating objects: 17, done.
remote: Total 17 (delta 0), reused 0 (delta 0), pack-reused 17
Receiving objects: 100% (17/17), 5.89 KiB | 2.95 MiB/s, done.

~/Develop/sandbox
❯ cd postcss-example

~/Develop/sandbox/postcss-example master
❯ yarn install
yarn install v1.22.10
info No lockfile found.
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
✨  Done in 1.90s.

~/Develop/sandbox/postcss-example master* 9s
❯ meteor update

Changes to your project's package version selections from updating the release:

autoupdate                 upgraded from 1.6.0 to 1.7.0
babel-compiler             upgraded from 7.3.4 to 7.6.1
babel-runtime              upgraded from 1.3.0 to 1.5.0
boilerplate-generator      upgraded from 1.6.0 to 1.7.1
caching-compiler           upgraded from 1.2.1 to 1.2.2
callback-hook              upgraded from 1.1.0 to 1.3.0
ddp-client                 upgraded from 2.3.3 to 2.4.0
ddp-server                 upgraded from 2.3.0 to 2.3.2
dynamic-import             upgraded from 0.5.1 to 0.6.0
ecmascript                 upgraded from 0.12.7 to 0.15.1
ecmascript-runtime-client  upgraded from 0.8.0 to 0.11.0
ecmascript-runtime-server  upgraded from 0.7.1 to 0.10.0
ejson                      upgraded from 1.1.0 to 1.1.1
inter-process-messaging    upgraded from 0.1.0 to 0.1.1
logging                    upgraded from 1.1.20 to 1.2.0
minifier-css               upgraded from 1.4.2 to 1.5.3
minifier-js                upgraded from 2.4.1 to 2.6.0
modern-browsers            upgraded from 0.1.4 to 0.1.5
modules                    upgraded from 0.13.0 to 0.16.0
modules-runtime            upgraded from 0.10.3 to 0.12.0
random                     upgraded from 1.1.0 to 1.2.0
react-fast-refresh         added, version 0.1.0
reload                     upgraded from 1.3.0 to 1.3.1
shell-server               upgraded from 0.4.0 to 0.5.0
socket-stream-client       upgraded from 0.2.2 to 0.3.1
standard-minifier-css      upgraded from 1.5.3 to 1.7.2
standard-minifier-js       upgraded from 2.4.1 to 2.6.0
webapp                     upgraded from 1.7.4 to 1.10.1
webapp-hashing             upgraded from 1.0.9 to 1.1.0

postcss-example: updated to Meteor 2.2.

Changes to your project's package version selections from updating package
versions:

blaze-tools            upgraded from 1.0.10 to 1.1.1
caching-html-compiler  upgraded from 1.1.3 to 1.2.0
ddp-server             upgraded from 2.3.2 to 2.3.3
deps                   removed from your project
html-tools             upgraded from 1.0.11 to 1.1.1
htmljs                 upgraded from 1.0.11 to 1.1.0
minifier-css           upgraded from 1.5.3 to 1.5.4
socket-stream-client   upgraded from 0.3.1 to 0.3.2
spacebars-compiler     upgraded from 1.1.3 to 1.2.1
static-html            upgraded from 1.2.2 to 1.3.0
svelte:compiler        upgraded from 3.6.7_1 to 3.31.2
templating-tools       upgraded from 1.1.2 to 1.2.0

~/Develop/sandbox/postcss-example master* 4m 43s
❯ meteor remove svelte:compiler

Changes to your project's package version selections:

svelte:compiler  removed from your project

svelte:compiler: removed dependency

~/Develop/sandbox/postcss-example master*
❯ meteor add zodern:melte

Changes to your project's package version selections:

zodern:melte           added, version 1.4.4
zodern:melte-compiler  added, version 1.0.2

zodern:melte: Svelte compiler with tracker integration, HMR and Typescript
support

~/Develop/sandbox/postcss-example master* 1m 2s
❯ meteor
[[[[[ ~/Develop/sandbox/postcss-example ]]]]]

=> Started proxy.
=> Errors prevented startup:

   While building for web.browser:
   client/App.svelte: processed.code.replace is not a function

   While building for web.browser.legacy:
   client/App.svelte: processed.code.replace is not a function

=> Your application has errors. Waiting for file change.

[arggh]

Hopefully this repro will do the trick: https://github.com/arggh/meteor-melte-version-issue/

master: Works as should, since it's using old Svelte 3.8.1 latest_svelte: Breaks with the error mentioned above

=> Errors prevented startup:

   While building for web.browser:
   client/App.svelte: processed.code.replace is not a function

Remember to do a fresh npm install after switching branches.

[arggh]

Confirming: Downgrading svelte from latest to 3.8.1 fixes our app too, postcss config & plugins now work.

[arggh]

Closed in favour of https://github.com/zodern/melte-compiler/issues/3