Publishes the component's css in its own file in case it's needed

This will let me work around some shadow DOM unfortunateness: sveltejs/svelte#3940

Author: Josh Duff

.gitignore

@@ -3,3 +3,4 @@ node_modules
 bundle.*
 public/build
 src/css
+component.css*

package.json

@@ -15,9 +15,10 @@
   },
   "scripts": {
     "pre-build": "foundation --targetDirectory=src/css",
-    "build": "npm-run-all --print-label pre-build --parallel build:*",
+    "build": "npm-run-all --print-label --parallel pre-build build-css --parallel build:*",
     "build:js": "rollup -c",
     "build-dev": "cross-env ENVIRONMENT=dev npm run build",
+    "build-css": "cross-env OUTPUT_CSS_FILE=component.css npm run build:js",
     "dev:serve": "live-server public",
     "dev:watch:js": "npm run build:js -- -w",
     "dev": "npm-run-all --print-label pre-build --parallel dev:**",

rollup.config.js

@@ -15,6 +15,7 @@ const stylePreprocessor = sveltePreprocessPostcss({
 
 const customElement = process.env.OUTPUT === "custom-element"
 const devMode = !!process.env.ROLLUP_WATCH || process.env.ENVIRONMENT === 'dev'
+const outputCssFile = process.env.OUTPUT_CSS_FILE || false
 const testApp = devMode && !customElement
 
 const outputFileName = customElement
@@ -25,6 +26,13 @@ const outputPath = devMode
 	? "./public/build/" + outputFileName
 	: "./" + outputFileName
 
+const extraSvelteOptions = outputCssFile
+	? {
+		cssOutputFilename: outputCssFile,
+		css: css => css.write(outputCssFile),
+	}
+	: {}
+
 const componentConfig = {
 	input: "src/DateRangeInput.svelte",
 	output: {
@@ -47,7 +55,8 @@ const componentConfig = {
 				}
 
 				handler(warning)
-			}
+			},
+			...extraSvelteOptions
 		}),
 		resolve({
 			browser: true,