introducing postcss slows down the save to reload speed 2 orders of magnitude

[samccone]

Describe the bug For a project add:

package.json

        "postcss": "^8.2.2",
        "postcss-cli": "^8.3.1",
        "postcss-import": "^14.0.0"
        "@snowpack/plugin-postcss": "^1.0.11",
        "autoprefixer": "^10.1.0",
        "svelte-preprocess": "^4.0.0",

postcss.config.js

module.exports = {
    plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
    ],
  };

snowpack.config.js

plugins: [
        "@snowpack/plugin-postcss",
]

---

now in a svelte component do

div {
  background: red'
}

Observe that the save to reload speed go from instant to multiple seconds.

[dummdidumm]

I guess that's also a setup problem. Including tailwind in the main app.svelte will slow down things a lot. I think 1. because it goes through slower preprocessing 2. because all styles are server rendered and not delivered in a separate css file.

[benmccann]

I wonder if it might be more useful to post this at https://github.com/snowpackjs/snowpack/discussions unless there's something SvelteKit-specific at play here.

[samccone]

unless there's something SvelteKit-specific at play here.

This is a good discussion to be had. Should we provide well-lit paths for svelte kit and assume responsibility for the best way to do things? As a consumer of SvelteKit the lines of responsibility are a bit blurry between

• SvelteKit
• Rollup
• Snowpack

Spelling this out and documenting it should help better guide future issues and this class of discussion in a way that is scalable and determined, as compared to depending on the triagers personal thoughts.

WDYT?

[samccone]

@FredKSchott for visibility into this snowpack configuration setup question / potential latency footgun.

[FredKSchott]

Assuming its not a Snowpack issue at this point, but happy to help if there's anything that we can do on our end / if it gets traced back into Snowpack. I know we've had our fair share of issues around CSS processors expecting to bundle everything together, which can be hard to manage in a single-file way.

[benmccann]

I took a bit of a look at this. My best guess is that it's because @snowpack/plugin-postcss starts a new process.

https://github.com/snowpackjs/snowpack/blob/ad6162fce822d628acfe78154093d14b79f003b1/plugins/plugin-postcss/plugin.js#L13

[samccone]

Yes, this was the thinking of Fred and I as well. I am fine closing this ticket out as it is not super actionable, beyond the fact that we might get a lot of questions about this when the repo is opened up, and thus need to provide since kind of guidance.