Use this.emitFile to generate css files (#72)

Author: shirotech

README.md

@@ -62,9 +62,10 @@ export default {
         console.log(css.code); // the concatenated CSS
         console.log(css.map); // a sourcemap
 
-        // creates `main.css` and `main.css.map` — pass `false`
-        // as the second argument if you don't want the sourcemap
-        css.write('public/main.css');
+        // creates `main.css` and `main.css.map`
+        // using a falsy name will default to the bundle name
+        // — pass `false` as the second argument if you don't want the sourcemap
+        css.write('main.css');
       },
 
       // Warnings are normally passed straight to Rollup. You can

index.js

@@ -69,22 +69,10 @@ function exists(file) {
 	}
 }
 
-function mkdirp(dir) {
-	const parent = path.dirname(dir);
-	if (parent === dir) return;
-
-	mkdirp(parent);
-
-	try {
-		fs.mkdirSync(dir);
-	} catch (err) {
-		if (err.code !== 'EEXIST') throw err;
-	}
-}
-
 class CssWriter {
-	constructor (code, map, warn) {
+	constructor (code, filename, map, warn, bundle) {
 		this.code = code;
+		this.filename = filename;
 		this.map = {
 			version: 3,
 			file: null,
@@ -94,26 +82,24 @@ class CssWriter {
 			mappings: map.mappings
 		};
 		this.warn = warn;
+		this.bundle = bundle;
 	}
 
-	write(dest, map) {
-		dest = path.resolve(dest);
-		mkdirp(path.dirname(dest));
-
+	write(dest = this.filename, map) {
 		const basename = path.basename(dest);
 
 		if (map !== false) {
-			fs.writeFileSync(dest, `${this.code}\n/*# sourceMappingURL=${basename}.map */`);
-			fs.writeFileSync(`${dest}.map`, JSON.stringify({
+			this.bundle.emitFile({type: 'asset', fileName: dest, source: `${this.code}\n/*# sourceMappingURL=${basename}.map */`});
+			this.bundle.emitFile({type: 'asset', fileName: `${dest}.map`, source: JSON.stringify({
 				version: 3,
 				file: basename,
 				sources: this.map.sources.map(source => path.relative(path.dirname(dest), source)),
 				sourcesContent: this.map.sourcesContent,
 				names: [],
 				mappings: this.map.mappings
-			}, null, '  '));
+			}, null, '  ')});
 		} else {
-			fs.writeFileSync(dest, this.code);
+			this.bundle.emitFile({type: 'asset', fileName: dest, source: this.code});
 		}
 	}
 
@@ -297,7 +283,7 @@ module.exports = function svelte(options = {}) {
 				return compiled.js;
 			});
 		},
-		generateBundle() {
+		generateBundle(options, bundle) {
 			if (css) {
 				// write out CSS file. TODO would be nice if there was a
 				// a more idiomatic way to do this in Rollup
@@ -332,11 +318,13 @@ module.exports = function svelte(options = {}) {
 					}
 				}
 
-				const writer = new CssWriter(result, {
+				const filename = Object.keys(bundle)[0].split('.').shift() + '.css';
+
+				const writer = new CssWriter(result, filename, {
 					sources,
 					sourcesContent,
 					mappings: encode(mappings)
-				}, this.warn);
+				}, this.warn, this);
 
 				css(writer);
 

package-lock.json

@@ -30,7 +30,7 @@
     "eslint": "^6.8.0",
     "locate-character": "^2.0.5",
     "mocha": "^7.1.1",
-    "rollup": "^0.67.4",
+    "rollup": "^1.32.1",
     "sander": "^0.6.0",
     "source-map": "^0.7.3",
     "svelte": "^3.0.0-beta.5"
@@ -42,6 +42,6 @@
   },
   "peerDependencies": {
     "svelte": "*",
-    "rollup": ">=0.60.0"
+    "rollup": ">=1.19.2"
   }
 }

package.json

@@ -294,7 +294,7 @@ describe('rollup-plugin-svelte', () => {
 				plugin({
 					css: value => {
 						css = value;
-						css.write('test/deterministic-css/dist/bundle.css');
+						css.write('bundle.css');
 					}
 				})
 			],
@@ -331,7 +331,7 @@ describe('rollup-plugin-svelte', () => {
 					plugin({
 						css: value => {
 							css = value;
-							css.write('test/filename-test/dist/bundle.css');
+							css.write('bundle.css');
 						}
 					})
 				],