Be able to use different config for development vs production

[bdoms]

🙋 Feature Request

Detailed description

As of version 4.0.3 the compiler options are correctly being sent to svelte. However, I want to run with different config in development vs production. The main use case I have for this is the CSS - I want it to be inline in development (i.e. css: true) but output to a separate file when building for production (css: false). I can imagine that there might be more options I'd want to include in that in the future though.

I don't know how to accomplish this right now without modifying the config back and forth each time I want to develop and then deploy.

I think there are two main ways this could be done. And I'm ambivalent about which is better. Simply having the ability is the important part.

Option 1: Be able to specify an overriding config on the command line, e.g. parcel build --config prod.json

Option 2: Having a predetermined separate config object. e.g:

svelte: {
  compiler: {css: false},
  devCompiler: {css: true}
}

Possible work-around?

I don't know of any way to change this without manually modifying the config at this point. I would love help figuring out a work around if one is possible.

[DeMoorJasper]

You could use a JavaScript config for this, just be careful with how dynamic you make this as it might mess up caching. svelte.config.js

Example:

module.exports = process.env.NODE_ENV === 'production' ? { "production": "config" } : { "dev": "config" };

[bdoms]

That works. Thank you!

I still think some support for the other options might be nice. But at the very least I'd suggest putting something about this in the docs, just to make it more clear and help anyone else who runs across it in the future.

Thanks again for the help and quick response!

[DeMoorJasper]

@bdoms I'll probably add some kind of environment support to the config in the future as svelte.config.js isn't really ideal for caching, which I don't wanna ruin for the Parcel 2 version.

Just gotta figure out the exact format I'd wanna use for this new config. I was thinking of something like this, but feel free to comment some ideas in here:

{
  "env": {
    "development": {...config}, // this config gets used in development
    "production": {...config} // this config gets used in production
  },
  "compiler": {...}  // this will be used as a base, merged together like {...defaults.compiler, ...custom.compiler, ... custom.env.development.compiler}
}

I won't add the workaround to the docs though as I wanna find a proper solution to this that wouldn't require a javascript config