Add plugin for extracting component CSS to a separate file

postcss/fork-css.js

@@ -0,0 +1,26 @@
+const fs = require('fs')
+const path = require('path')
+
+const getInputPath = (root) => root.source.input.file
+
+module.exports = (options = { outputFolder: 'build', match: /^((?!\.(stories|test)).)*\.svelte/gi, dropExtension: true }) => {
+  const getOutputFile = (inputFile) => {
+    const fileName = path.basename(inputFile, options.dropExtension ? path.extname(inputFile) : undefined);
+    const relativePath = path.relative('.', path.resolve(inputFile, '..'))
+    return path.join(options.outputFolder, relativePath, fileName + '.css');
+  }
+
+  return {
+    postcssPlugin: 'fork-css',
+    OnceExit: (root) => {
+      const inputFile = getInputPath(root);
+      if (!options.match.test(inputFile)) return;
+
+      const outputFile = getOutputFile(inputFile);
+      fs.mkdirSync(path.dirname(outputFile), { recursive: true });
+      fs.writeFileSync(outputFile, root.toString());
+    }
+  }
+}
+
+module.exports.postcss = true;

rollup.config.js

@@ -25,7 +25,13 @@ export default {
     plugins: [
         svelteTypes(),
         svelte({
-            preprocess: sveltePreprocess(),
+            preprocess: sveltePreprocess({
+                postcss: {
+                    plugins: [
+                        require('./postcss/fork-css')
+                    ]
+                }
+            }),
             compilerOptions: {
                 customElement: true
             },