[vitePreprocess] Run PostCSS on other CSS language output

[WillsterJohnson]

Describe the problem

In the older svelte-preprocess preprocessor, if you configured postcss, then postcss would run on the output of the preprocessor. eg, <style lang="scss"> is passed to SCSS, and that is then passed to PostCSS.

I use postcss primarily for utilities such as autoprefixer, while I use SCSS because I'm familiar with it's syntax. There are PostCSS plugins, however they appear to be unmaintained and/or outdated.

Describe the proposed solution

It would be nice to have the ability to emulate svelte-preprocess' behavior in vitePreprocess and not have to change my coding style, or maintain a fork of a dying/dead library. Possibly under style.css.postcss there could be a always?: boolean which defaults to false (current behavior).

Alternatives considered

Not doing this Pros: costs nothing Cons: having to use both vitePreprocess and svelte-preprocess, having to change workflow, having to use dead and dated 3rd party code

Setting this to default/only behavior Pros: is what svelte-preprocess would do Cons: is breaking (new behavior for exact same code), some users may have the exact opposite of my situation (specifically want postcss to run only when they say)

Something which does not expose a one-time flag for processing everything (incl. style files) with postcss Pros: ??? Cons: does not solve this issue, potentially causes more problems in relation to this issue

Importance

i cannot use vite-plugin-svelte without it

[bluwy]

This should already happen today, is it not working for you? Vite will always run postcss after the preprocessors finish.

[WillsterJohnson]

I'm using the following style tag in a kit project, it's a scss-ified version of the demo on autoprefixer's readme

<style lang="scss">
  ::placeholder {
    color: gray;
  }
  .image {
    background-image: url("https://picsum.photos/200/300");
    @media (min-resolution: 2dppx) {
      background-image: url("https://picsum.photos/200/300");
    }
  }
</style>

(I have a .image in the svelte file)

The output after vite build (.svelte-kit/output/client/_app/immutable/assets/_page-[id].css);

.svelte-1ch8nfd::placeholder {
  color: gray;
}
.image.svelte-1ch8nfd {
  background-image: url("https://picsum.photos/200/300");
}
@media (min-resolution: 2dppx) {
  .image.svelte-1ch8nfd {
    background-image: url("https://picsum.photos/200/300");
  }
}

After vite dev;

s-ywqM5ZXM67An::placeholder {
 color:gray
}
.image.s-ywqM5ZXM67An {
 background-image:url("https://picsum.photos/200/300")
}
@media(min-resolution: 2dppx) {
 .image.s-ywqM5ZXM67An {
  background-image:url("https://picsum.photos/200/300")
 }
}
.s-ywqM5ZXM67An {
}

Expected;

.svelte-id::-moz-placeholder {
  color: gray;
}
.svelte-id::placeholder {
  color: gray;
}

.svelte-id.image {
  background-image: url(image@1x.png);
}
@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 2dppx) {
  .svelte-id.image {
    background-image: url(image@2x.png);
  }
}

The only non-standard thing about my setup is the config.kit.files;

config.kit.files = {
  appTemplate: "app/app.html",
  assets: "app/assets",
  errorTemplate: "app/error.html",
  hooks: {
    client: "app/client.hooks.ts",
    server: "app/server.hooks.ts",
  },
  lib: "app/lib",
  params: "app/params",
  routes: "app/routes",
};

However I've checked, and even on default settings it's the same.

I've pushed my setup to a repo; https://github.com/WillsterJohnson/vite-plugin-svelte-issues-589-demo There's no lockfile as I installed everything with <pkg>@latest within the last couple hours, and as part of writing this comment deleted node_modules and reinstalled everything, and got the same result.

I've left in some config stuff from the actual project I'm setting up. It's not worth bothering to remove them as they don't (at least they really shouldn't) have any effect on css preprocessing, and they're pretty easy to ignore (eg packagejson.name)

OS: Pop_OS (Ubuntu) 22.04 Node: 18.14.0 pnpm: 7.26.3

[WillsterJohnson]

I've realised the problem. Was watching a vercel deployment run and noticed a missing peer, postCSS.

PostCSS didn't run because it wasn't installed... I don't know how I messed that up.