Add emitCss option

[cristinecula]

Hey there!

I added support for emitting the CSS as separate modules. The idea is to create temporary files containing the css output and altering the compiled code to require the temp files. This approach has the advantage that the resulting css modules are handled by webpack just as regular files, so the configured rules and plugins apply as normal. This way you can chain postcss-loader or extract the css as a separate output file, using the ExtractTextPlugin:

module: {
  rules: [
    {
      test: /\.(html|js)$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: [
            [
              'env',
              {
                targets: {
                  ie: '11',
                  browsers: ['last 2 versions'],
                },
                modules: false,
                useBuiltIns: true,
              },
            ],
          ],
        },
      },
    },
    {
      test: /\.html$/,
      exclude: /node_modules/,
      use: {
        loader: 'svelte-loader',
        options: {
          emitCss: true,
        },
      },
    },
    {
      test: /\.css$/,
      use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: 'css-loader',
      }),
    },
  ],
},
plugins: [
  new ExtractTextPlugin('widget.css'),
]

What do you think?

[cristinecula]

As soon as I can, I will update this pull request with the discussed changes (via gitter chat):

• fix js sourcemaps
• integrate css sourcemaps

[cristinecula]

Hello @Rich-Harris!

I have updated the pull request with the requested changes! Both JS and CSS source maps work as expected. I have also added some documentation and config samples for extracting the CSS>

[kazzkiq]

Does this work only for webpack or any other bundler/task-runner could benefit from this implementation too?

[cristinecula]

@kazzkiq This code in particular is specific to webpack, but it's a thin layer on top of Svelte's support for css extraction. You can find more information here: https://svelte.technology/guide#rendering-css.

[Rich-Harris]

So sorry for leaving this PR unattended for this crazy length of time — I have no excuse other than a chronic lack of organisation. Anyway, I finally started trying to get my head round svelte+webpack this evening, and the first thing I noticed was the missing feature that this PR addresses. So, thank you very much!

I had to hack around this ridiculous webpack bug, but other than that it looks great. (Ignore the erroneously-deleted line, which must have been a git fail on my part.)

[cristinecula]

Thank you for taking the time to look over this! I know you are extremely busy and I appreciate the extraordinary work you're doing with Svelte (dynamic components are a dream come true). I'll update my dependencies right away.