Using PostCSS with Svelte

Option 1 - Write your own

This process is actually documented in the Svelte docs, but we’ll restate it here with the bundler case:

// rollup.config.js
const sass = require('node-sass');
// ...
export default {
  // ...
  plugins: [
    svelte({
      // ...
      preprocess: {
        style: ({ content, attributes, filename }) => {
          // only process <style lang="sass">
          if (attributes.lang !== 'sass') return;

          const { css, stats } = await new Promise((resolve, reject) => sass.render({
              file: filename,
            data: content,
            includePaths: [
              dirname(filename),
            ],
          }, (err, result) => {
            if (err) reject(err);
            else resolve(result);
          }));

          // TODO: not sure about this. maybe supposed to just return css.toString() instead
          return {
            code: css.toString(),
            dependencies: stats.includedFiles
          };
        },
      },
    }),
// ...

Option 2 - use svelte-preprocess

Setting up svelte-preprocess can help simplify this:

// rollup.config.js
import svelte from 'rollup-plugin-svelte';
import autoPreprocess from 'svelte-preprocess'
import { scss, coffeescript, pug } from 'svelte-preprocess'

export default {
  ...,
  plugins: [
    svelte({
      /**
       * Auto preprocess supported languages with
       * '<template>'/'external src files' support
       **/
      preprocess: autoPreprocess({ /* options available https://github.com/kaisermann/svelte-preprocess/#user-content-options */ })
    })
  ]
}

and you can write SCSS/SASS in your Svelte template:

<style lang="scss">
	$color: red;
	div {
		color: $color;
	}
</style>

The same is true for PostCSS as well, which also applies to any PostCSS plugins, like TailwindCSS (see Tailwind demo here).

Svelte setup with Tailwind CSS

Here is a specific guide for adding TailwindCSS to a Svelte app (which inclues adding PostCSS).