🐛Bug: Fix for monorepo postcss setup broken

[jzillmann]

Describe the bug Having a mono repo where Svelte is included in one package together with PostCSS and Tailwind. Earlier using !important or :hover in an @apply inside style section

<style lang="postcss">
  .active {
    @apply bg-base-100 !important;
...

caused an error like Semicolon or block is expectedsvelte(css-syntax-error).

I was able to fix this by setting the absolute config path in svelte.config.js:

import sveltePreprocess from 'svelte-preprocess';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
import path from 'path';
import { fileURLToPath } from 'url';

const __dirname = path.dirname(fileURLToPath(import.meta.url));
const postcssConfig = path.join(__dirname, 'postcss.config.cjs');

export default {
  preprocess: [
    vitePreprocess(),
    sveltePreprocess({
      postcss: {
        configFilePath: postcssConfig
      }
    })
  ]
};

See https://github.com/sveltejs/language-tools/blob/1d53bdca579b3c6353fcea329c8f9abab10fa98e/docs/preprocessors/scss-less.md#troubleshooting--faq

However once I setup the melt-ui preprocessor, I'm getting again the Semicolon or block is expectedsvelte(css-syntax-error) error.

import sveltePreprocess from 'svelte-preprocess';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
import sequence from 'svelte-sequential-preprocessor';
import { preprocessMeltUI } from '@melt-ui/pp';

import path from 'path';
import { fileURLToPath } from 'url';

const __dirname = path.dirname(fileURLToPath(import.meta.url));
const postcssConfig = path.join(__dirname, 'postcss.config.cjs');

export default {
  preprocess: [
    vitePreprocess(),
    sveltePreprocess(
      sequence([
        {
          postcss: {
            configFilePath: postcssConfig
          }
        },
        preprocessMeltUI()
      ])
    )
  ]
};

Any thoughts on what I can do fix this?

[AdrianGonz97]

Hi @jzillmann, it seems that your config is setup incorrectly. You're calling sequence as an argument inside of the sveltePreprocess invocation, which is incorrect. Here's the correct configuration:

import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
import sequence from 'svelte-sequential-preprocessor';
import { preprocessMeltUI } from '@melt-ui/pp';

import path from 'path';
import { fileURLToPath } from 'url';

const __dirname = path.dirname(fileURLToPath(import.meta.url));
const postcssConfig = path.join(__dirname, 'postcss.config.cjs');

export default {
    preprocess: sequence([
        vitePreprocess({
            style: {
                css: {
                    postcss: postcssConfig
                }
            }
        }),
        preprocessMeltUI()
    ])
};

I also noticed that you're using sveltePreprocess and viteProprocess simultaneously. Is there a particular reason for this? vitePreprocess can handle the preprocessing for both typescript and postcss, so you don't actually need sveltePreprocess. The above code block also fixes this as well.

[jzillmann]

Works like a charm! Thank you very much, also for the sveltePreprocess removal... I guess I'm a bit sloppy when it comes to building the build!