Support svelte.preprocess

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 };

[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