Support svelte.preprocess

[DorianGrey]

Hi there,

since V1.44.0, svelte supports a preprocessing step, e.g. to render scss if used. The API is documented here.

Just an example of what this might look like resp. result in:

const { compile, preprocess } = require('svelte');
const JSAsset = require('parcel-bundler/src/assets/JSAsset');

class SvelteAsset extends JSAsset {
  async parse(code) {
    // preprocess does not do that much
    const preprocessed = await preprocess(code, preprocessOptions);
    const { generatedCode, map, css, cssMap, ast } = compile(preprocessed.toString(), compilerOptions);
    // The other stuff might be useful for different things...

    this.contents = generatedCode;

    return super.parse(this.contents);
  }
}

module.exports = SvelteAsset;

(extracted from the svelte-loader behavior)
Supporting this would require to use an external config file that is not in JSON format, since preprocessing requires functions. Maybe something like a .svelte.config.js ? It might be possible to put the general svelte options there as well and only pick the current definition in case the file is absent.

E.g. - .svelte.config.js:

const compilerOptions = { /* compiler options as defined in docs */ };
const preprocessOptions = { /* Preprocess options as defined in docs */ };
module.exports = { compilerOptions, preprocessOptions };

[Rich-Harris]

FYI I've opened a ticket — sveltejs/svelte#1101 — to discuss whether a svelte.config.js file is something that should be 'officially' supported rather than a Parcel-specific thing

[DeMoorJasper]

I'll implement this once the standardised config is in place

[DeMoorJasper]

@DorianGrey I implemented it, let me know what you think and if it works as expected 4c46de0
I'll push a new release to npm as soon as u think it works as expected, would appreciate it if you could test out the current master branch as well

[DorianGrey]

Looks good structurally.
I'll see if I can get some spare time to check the master branch in an example.

[DorianGrey]

Here it is:
https://github.com/DorianGrey/svelte-parcel-example

Extremely simple, stripped down to a minimum to illustrate the preprocess usage, using node-sass in this case.
Works well!

[DeMoorJasper]

Thanks so much for reviewing and setting up an example 👍 I'll push a new released to npm in a few secs

[cdock1029]

Link to example is broken.. any resource to see how this works?

[excalibur1987]

Link to example is broken.. any resource to see how this works?

@cdock1029

The following worked for me.

You need to install a svelte pre-processor plugin to process sass, I used the following plugin

svelte-preprocess-sass

Add a file with the name svelte.config.js to your project root, with the following content to enable sass pre-processing.

const { sass } = require("svelte-preprocess-sass");

module.exports= {
  preprocess: {
    style: sass(),
  },
};

If you want to use it just add type="text/sass" to your style tags inside your svelte components