Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix component css reloading on any change #133

Closed
wants to merge 1 commit into from

Conversation

non25
Copy link
Contributor

@non25 non25 commented Sep 9, 2020

This fixes #131 in a weird way. But it works!

@non25 non25 force-pushed the fix-css-reloading-on-any-change branch from 1b46793 to d7c1068 Compare September 9, 2020 22:05
@non25
Copy link
Contributor Author

non25 commented Sep 13, 2020

Webpack 4 relies on compiler.fileTimestamps Map to decide if it should reload & rebuild file.
This code inserts virtual file timestamp when virtual file has been created and restores virtual file timestamps after they had been overriden by this code, which doesn't account for virtual files:
https://github.com/webpack/webpack/blob/4a1f068828c2ab47537d8be30d542cd3a1076db4/lib/Watching.js#L147-L156

Maybe there's less hacky way involving inheriting NodeWatchFileSystem and doing that there, but this way is shortest and does the job. Much like having plugin functionality providing virtual files in the loader.

Here's some more context:
sysgears/webpack-virtual-modules#66

@rogueyoshi
Copy link

Any side-effects?

@non25
Copy link
Contributor Author

non25 commented Sep 14, 2020

I have yet to find them in 4 days of using patched svelte-loader.
Guy who suffered from 40s long rebulds on any change with 20 components using postcss+tailwind+svelte-preprocess tells the same.

It was fixed upstream.
sysgears/webpack-virtual-modules#66 (comment)
You can read my detailed explanation below maintainer's response.

Keep in mind that by no means I'm an expert in webpack's internals.

@trash-and-fire
Copy link

Any updates on this PR?

It is hard to understand why this loader uses hacky way to inject virtual files into fs. This work is not just for the loader, it needs to be in loader+plugin (as in minicss-extract-plugin). It is much easier to maintain this loader with ability to update VirtualModulesPlugin using package.json instead of copy/paste some parts of plugin in svelte-loader code directly.

@syvb
Copy link
Contributor

syvb commented Oct 8, 2020

@trash-and-fire See #59 (comment) for an explanation as to why it wasn't added as a dependency. Also see #136, which pulls in all of the relevant upstream updates, which allows reloading and Webpack 5 support.

@larixer
Copy link

larixer commented Oct 22, 2020

@Smittyvb I would be open to pull request on webpack-virtual-modules side to export some interface that allow it to be usable inside the svelte loader. Probably the source code in webpack-virtual-modules should be converted into TypeScript as well (this is a separate concern). I really didn't expect that this webpack plugin will be used by more than a couple dozens of people. But since it is being used, lets make it usable in more scenarios, if you are open to it.

@syvb
Copy link
Contributor

syvb commented Jan 11, 2021

This is now superseded by #146.

@non25 non25 closed this Jan 11, 2021
@non25 non25 deleted the fix-css-reloading-on-any-change branch January 13, 2021 20:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Component css gets reloaded with css-loader on any file change
5 participants