improve svelte.preprocess docs

[mvolkmann]

The documentation on svelte.preprocess at https://svelte.dev/docs#svelte_preprocess shows some code examples to configure it. But it doesn't provide the expected name and location of those files. Is this just Node code that can be in any .js file and must be run manually? Is there a way for svelte.preprocess to be run automatically as part of the normal watch/live-reload cycle?

IIUC, this can be used to enable use of TypeScript inside <script> tags, perhaps with some limitations to be addressed in the future. It would be great to show an example of how to configure that!

[ghost]

I agree that the documentation could be better on this subject, just to make it more obvious where to put the code at least.

To answer your questions though, the svelte.preprocess function can be run on any Svelte source code you like in any way you want.

So yes, you're correct that it could be used for things like TypeScript support, and in fact, that's what the svelte-preprocess package on npm does already. That package just provides preprocess options to a loader, like like in the case of webpack.

To set up your own preprocessor in webpack that would be run whilst webpack is watching files, for example, you can just provide your preprocess options to the svelte-loader and the loader will run svelte.preprocess internally for you.

For example, lets say we hate the colour red, and want to replace all instances of the word with blue in our CSS. We could achieve that by doing the following in the svelte-loader options:

{
  loader: 'svelte-loader',
  options: {
    css: true,
    preprocess: {
      style ({ content }) {
        // This will replace all instances of the word "red" with "blue" in any styles found in Svelte files
        return {
          code: content.replace(/red/gi, 'blue')
        }
      }
    }
  }
}

In this example the preprocess option is set to a single object of options, but it can also be an array of multiple preprocessors where the code from one will be fed into the content of the next, as stated in the docs.

[mvolkmann]

Thanks! I was able to get your example to work using Rollup.

Now I'd like to want to enable use of Sass and TypeScript (with limitations).
The documentation at https://github.com/kaisermann/svelte-preprocess#with-rollup-plugin-svelte shows configuring it for Rollup like this:

import { scss, postcss } from 'svelte-preprocess'

svelte.preprocess(input, [
  scss(),
  postcss({
    plugins: [
      require('autoprefixer')({
        browsers: 'last 2 versions',
      }),
    ],
  }),
])

But I thought the second argument to svelte.preprocess was supposed to be an object, not an array. I haven't been able to get Sass to work. I did npm install -D node-sass, but I think I don't have the configuration right yet. Are you able to configure it to use Sass?

[ghost]

The second argument to svelte.preprocess can be either an object or an array.

If it's an array then it will loop through each preprocessor in order passing the output of the previous one to the next.

As for SASS I'm not sure why it won't work for you. I don't use it myself so I've never configured it before.

[mvolkmann]

I forgot to mention that I'm using Sapper. Here are the relevant parts of my rollup.config.js file that show what I'm currently trying that does not work:

import sveltePreprocess from 'svelte-preprocess';
...

const preprocess = sveltePreprocess({
  sass: true,
  typescript: true
});

export default {
  client: {
    ...
    plugins: [
      ...
      svelte({
        ...
        preprocess
      }),
      ...
  },

  server: {
    ...
    plugins: [
      ...
      svelte({
        ...
        preprocess
      }),
      ...
    ],
    ...
  },
  ...
  }
};

[mvolkmann]

This is mostly working for me know using the configuration I showed above. However, it seems that TypeScript doesn't know what do with export statements for props or $: labels for reactive statements. Is there a way to get it to properly handle those?

[pngwn]

That doesn't have anything to do with the preprocess method. If you are using a third party TypeScript preprocess library then you could ask the author, if it is homebaked then you could ask in chat but it is unlikely many people will have much experience with this.