svelte-preprocess: PostCSS configuration was not passed or is invalid

Moving the postcss config to the svelte.config.js

import adapter from "@sveltejs/adapter-vercel";
import preprocess from "svelte-preprocess";
import { resolve } from "path";
import tailwindcss from "tailwindcss";
import autoprefixer from "autoprefixer";

/** @type {import('@sveltejs/kit').Config} */
const config = {
  preprocess: [
    preprocess({
      postcss: {
        plugins: [tailwindcss(), autoprefixer()],
      },
    }),
  ],
  kit: {
    adapter: adapter(),
    target: "#svelte",
    vite: {
      css: {
        postcss: {
          plugins: [tailwindcss(), autoprefixer()], // <-- here
        },
      },
      ssr: {
        noExternal: ["svelte-hero-icons"], // <-- and also here
      },
      resolve: {
        alias: {
          $components: resolve("src/components"),
          $icons: resolve("src/components/icons"),
        },
      },
    },
  },
};

export default config;

and deleting postcss.config.cjs fixed it 🤷

Interesting clues, it is starting to look like the issue is that sometimes the hot reload code path does not look for the configuration file, tries to use a cached version but fails, or looks for the wrong file/setup. (resetting the hole dev env fixes it for a while, duplicating configuration into two places solves it, …)

I can confirm that I need both configuration blocks mentioned above set to have a smooth workflow again.

No, it is not really a fix but at least I can continue working with that 😅 I tested both variants and only if I add the plugins to both, it works.

I’m not sure what the postcss plugin array requires. I also checked what tailwind and autoprefixer actually returns and it looks like, both are functions (tw for sure)

I would like to understand more what is going on behind.

Same here 😃

On the shoulders of @wiesson solution I had to modify svelte.config.js for svelte-kit 1.0

import preprocess from 'svelte-preprocess';
import tailwindcss from 'tailwindcss';
import autoprefixer from 'autoprefixer';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	preprocess: [
		preprocess({
			postcss: {
				plugins: [tailwindcss(), autoprefixer()]
			}
		})
	]
};

export default config;

and vite.config.js

import { sveltekit } from '@sveltejs/kit/vite';
import { resolve } from 'path';
import tailwindcss from 'tailwindcss';
import autoprefixer from 'autoprefixer';


/** @type {import('vite').UserConfig} */
const config = {
	plugins: [sveltekit()],
	test: {
		include: ['src/**/*.{test,spec}.{js,ts}']
	},
	css: {
		postcss: {
			plugins: [tailwindcss(), autoprefixer()] // <-- here
		}
	},
	ssr: {
		noExternal: ['svelte-hero-icons'] // <-- and also here
	},
	resolve: {
		alias: {
			$components: resolve('src/components'),
			$icons: resolve('src/components/icons')
		}
	}
};

export default config;

Closing my editor, terminal and browser tab seems to fix it until the next time it happens. I personally prefer that to a config change.