When using stylus @require and snowpack/plugin-svelte hot reloading isn't applying style changes

[jameswoodley]

I have the following stylus declaration

<style global lang="stylus">
  @require "../public/main.styl";
</style>

The stylus file just has

body
  font-family sans-serif
  color Blue

When first running snowpack, my styles work as expected, however if I change the font color to Green, no change occurs. I have to stop the server and restart it to see the change.

Is this a bug, or have I done something wrong?

snowpack.config.js

/** @type {import("snowpack").SnowpackUserConfig } */

module.exports = {
  mount: {
    public: '/',
    ".routify": '/.routify',
    src: '/js',
  },
  plugins: [
    '@snowpack/plugin-svelte',
    '@snowpack/plugin-dotenv'
  ],
  install: [
    /* ... */
  ],
  installOptions: {
    /* ... */
  },
  devOptions: {
    /* ... */
  },
  buildOptions: {
    /* ... */
  },
  proxy: {
    /* ... */
  },
  alias: {
    /* ... */
  },
};

svelte.config.js

const sveltePreprocess = require("svelte-preprocess");

module.exports = {
  preprocess: sveltePreprocess()
}

[FredKSchott]

Interesting! I'm not suprised that this isn't working, since sveltePreprocess() would need to be telling Snowpack that that file change would affect a different file.

We have this logic already in the @snowpack/plugin-sass plugin, I wonder if we could turn that into something more generalizable that you could add as your own plugin to say "hey, this file changed, treat it as if this other file changed". Then you could tell Snowpack directly "when a public/*.styl file changes, mark this Sass file as changed".

[pngwn]

For some additional information.

Svelte preprocessors are able to return a list of dependencies which should allow us to draw a complete dependency graph. What I'm not certain about is where this breaks down, it could be svelte-preprocess or the specific stylus transformer for svelte-preprocess not returning the correct list of dependencies, or the snowpack svelte plugin not making uses of that list of dependencies. It could also be more than one of these issues.

[FredKSchott]

Yea, Snowpack needs to be told about this indirect dependency (that changes to public/main.styl impact the component that imports it). If anyone can share how that info can be collected, I can share how to connect that info into Snowpack!

[pngwn]

On snowpack's end, we need to check whether or not svelte.preprocess returns a dependencies key (svelte.preprocess signature). Here in the svelte snowpack plugin, instead of just grabbing the code we can get the dependency array too (an array of string paths) and do something similar to the sass plugin, which seems to be mapping dependencies to the file that imports them and triggering a change on the importer when the importee changes.

Does this sound about right? I'm not familiar with the snowpack plugin API but happy to take a look at this if you can point me in the right direction.

[FredKSchott]

Yup, that sounds right! That's great that svelte.preprocess returns dependencies, that's exactly what we need

[pngwn]

I'm a bit confused about the issue thing. Should I create an issue to close with the PR for tracking purposes or just make the PR?

[FredKSchott]

Issue created! #2103 (In the future, creating the PR directly after talking in a discussion like this is fine as well)