emitCss broken in v2

[Rich-Harris]

The ast.hash property was removed in v2, as we thought it wasn't being used anywhere (initially it was used for scoping styles, but then the scoping hash was generated from just the CSS rather than the entire component).

Turns out it was being used in svelte-loader, to provide a filename for the temporary CSS file. So now we have a bundle of different components importing svelte-undefined.css, with predictable results — only one file matches that path.

A temporary workaround is to disable emitCss.

The easy fix would be to reinstate ast.hash, or (better) compute it here. But it would be nice to have a fix that also covered #45, which probably means writing the CSS files back into the source directory:

src
  .App.css
  .Thing.css
  App.html
  Thing.html

I don't know if there's a way to clean up those files after webpack is done with them (or create them in some 'virtual' form so they don't clutter the filesystem in the first place?

[mdebbar]

Emotion does something similar. It generates <name>.emotion.css files during the webpack build. My workaround was to delete the files in the build command:

// package.json
{
  ...
  "scripts": {
    "build": "... && find . -name '*.emotion.css' | xargs -n 1 rm"
  }
}

but it would be nice to see this solved by webpack and loaders.

[kaisermann]

It seems that plugins can tap webpack's filesystem: webpack-virtual-modules.

[kaisermann]

I've made a thing: kaisermann@f7e0634 (still have to make the test work...) . It's working on the example I sent you over twitter.

The usage is something like:

// webpack.config.js
const svelteWebpack = require('svelte-loader')
module.exports = {
	...
	module: {
		rules: [
			{
				test: /\.html$/,
				exclude: /node_modules/,
				use: {
					loader: svelteWebpack.loader,
					options: {
						emitCss: true
					}
				}
			},
			{
				test: /\.css$/,
				use: ['css-loader']
			}
		]
	},
	plugins: [
		svelteWebpack.plugin,
	]
};

Let's say you have src/components/App.html. The loader/plugin combo will generate a virtual file src/components/App.<randomnumber>.css.

[kaisermann]

I wasn't able to make it work with watch until this commit on webpack-virtual-modules fixed the issue.

By adding hot: true to the svelte-webpack's webpack.config.js I was able to make it work with hot reloading as well.

But, even if hot realoding is working, I'm getting this

Edit:

Fixed. The error was occurring because the hot module plugin was being called twice (webpack.config.js and by webpack with the --hot flag).

@Rich-Harris I'm not entirely sure, but I think this would fix #45 as well 🤔🤔

[Rich-Harris]

Fixed in 2.9