rollup-plugin-svelte - npm Package Compare versions

Comparing version 1.7.0 to 1.8.0

CHANGELOG.md

 # rollup-plugin-svelte changelog
 
+## 1.8.0
+
+* Allow `options.css` to be a function that is called with extracted CSS when bundle is generated
+
 ## 1.7.0
@@ -4,0 +8,0 @@

dist/rollup-plugin-svelte.cjs.js

@@ -20,3 +20,3 @@ 'use strict';
 
-var pluginOptions = {
+const pluginOptions = {
 	include: true,
@@ -30,9 +30,9 @@ exclude: true,
 
-	var filter = rollupPluginutils.createFilter( options.include, options.exclude );
+	const filter = rollupPluginutils.createFilter( options.include, options.exclude );
 
-	var extensions = options.extensions || [ '.html', '.svelte' ];
+	const extensions = options.extensions || [ '.html', '.svelte' ];
 
-	var fixedOptions = {};
+	const fixedOptions = {};
 
-	Object.keys( options ).forEach( function (key) {
+	Object.keys( options ).forEach( key => {
 		// add all options except include, exclude, extensions
@@ -45,7 +45,7 @@ if ( pluginOptions[ key ] ) { return; }
 	fixedOptions.shared = require.resolve( 'svelte/shared.js' );
-	fixedOptions.onerror = function (err) {
-		var message = ( err.loc ? ("(" + (err.loc.line) + ":" + (err.loc.column) + ") ") : '' ) + err.message;
-		if ( err.frame ) { message += "\n" + (err.frame); }
+	fixedOptions.onerror = err => {
+		let message = ( err.loc ? `(${err.loc.line}:${err.loc.column}) ` : '' ) + err.message;
+		if ( err.frame ) { message += `\n${err.frame}`; }
 
-		var err2 = new Error( message );
+		const err2 = new Error( message );
 		err2.stack = err.stack;
@@ -56,13 +56,44 @@
 
+	// handle CSS extraction
+	if ( 'css' in options ) {
+		if ( typeof options.css !== 'function' && typeof options.css !== 'boolean' ) {
+			throw new Error( 'options.css must be a boolean or a function' );
+		}
+	}
+
+	let css = options.css && typeof options.css === 'function' ? options.css : null;
+	const cssLookup = new Map();
+
+	if ( css ) {
+		fixedOptions.css = false;
+	}
+
 	return {
 		name: 'svelte',
 
-		transform: function transform ( code, id ) {
+		transform ( code, id ) {
 			if ( !filter( id ) ) { return null; }
 			if ( !~extensions.indexOf( path.extname( id ) ) ) { return null; }
 
-			return svelte.compile( code, Object.assign( {}, fixedOptions, {
+			const compiled = svelte.compile( code, Object.assign( {}, fixedOptions, {
 				name: capitalize( sanitize( id ) ),
 				filename: id
 			}));
+
+			if ( css ) { cssLookup.set( id, compiled.css ); }
+
+			return compiled;
+		},
+
+		ongenerate () {
+			if ( css ) {
+				// write out CSS file. TODO would be nice if there was a
+				// a more idiomatic way to do this in Rollup
+				let result = '';
+				for ( let chunk of cssLookup.values() ) {
+					result += chunk;
+				}
+
+				css( result );
+			}
 		}
@@ -69,0 +100,0 @@ };

dist/rollup-plugin-svelte.es.js

@@ -18,3 +18,3 @@ import { basename, extname } from 'path';
 
-var pluginOptions = {
+const pluginOptions = {
 	include: true,
@@ -28,9 +28,9 @@ exclude: true,
 
-	var filter = createFilter( options.include, options.exclude );
+	const filter = createFilter( options.include, options.exclude );
 
-	var extensions = options.extensions || [ '.html', '.svelte' ];
+	const extensions = options.extensions || [ '.html', '.svelte' ];
 
-	var fixedOptions = {};
+	const fixedOptions = {};
 
-	Object.keys( options ).forEach( function (key) {
+	Object.keys( options ).forEach( key => {
 		// add all options except include, exclude, extensions
@@ -43,7 +43,7 @@ if ( pluginOptions[ key ] ) { return; }
 	fixedOptions.shared = require.resolve( 'svelte/shared.js' );
-	fixedOptions.onerror = function (err) {
-		var message = ( err.loc ? ("(" + (err.loc.line) + ":" + (err.loc.column) + ") ") : '' ) + err.message;
-		if ( err.frame ) { message += "\n" + (err.frame); }
+	fixedOptions.onerror = err => {
+		let message = ( err.loc ? `(${err.loc.line}:${err.loc.column}) ` : '' ) + err.message;
+		if ( err.frame ) { message += `\n${err.frame}`; }
 
-		var err2 = new Error( message );
+		const err2 = new Error( message );
 		err2.stack = err.stack;
@@ -54,13 +54,44 @@
 
+	// handle CSS extraction
+	if ( 'css' in options ) {
+		if ( typeof options.css !== 'function' && typeof options.css !== 'boolean' ) {
+			throw new Error( 'options.css must be a boolean or a function' );
+		}
+	}
+
+	let css = options.css && typeof options.css === 'function' ? options.css : null;
+	const cssLookup = new Map();
+
+	if ( css ) {
+		fixedOptions.css = false;
+	}
+
 	return {
 		name: 'svelte',
 
-		transform: function transform ( code, id ) {
+		transform ( code, id ) {
 			if ( !filter( id ) ) { return null; }
 			if ( !~extensions.indexOf( extname( id ) ) ) { return null; }
 
-			return compile( code, Object.assign( {}, fixedOptions, {
+			const compiled = compile( code, Object.assign( {}, fixedOptions, {
 				name: capitalize( sanitize( id ) ),
 				filename: id
 			}));
+
+			if ( css ) { cssLookup.set( id, compiled.css ); }
+
+			return compiled;
+		},
+
+		ongenerate () {
+			if ( css ) {
+				// write out CSS file. TODO would be nice if there was a
+				// a more idiomatic way to do this in Rollup
+				let result = '';
+				for ( let chunk of cssLookup.values() ) {
+					result += chunk;
+				}
+
+				css( result );
+			}
 		}
@@ -67,0 +98,0 @@ };

package.json

 {
   "name": "rollup-plugin-svelte",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "description": "Compile Svelte components with Rollup",
@@ -17,2 +17,3 @@ "main": "dist/rollup-plugin-svelte.cjs.js",
     "build": "rollup -c",
+    "dev": "rollup -c -w",
     "prebuild": "npm test",
@@ -36,3 +37,4 @@ "lint": "eslint src"
     "rollup": "^0.41.5",
-    "rollup-plugin-buble": "^0.15.0"
+    "rollup-plugin-buble": "^0.15.0",
+    "rollup-watch": "^3.2.2"
   },
@@ -39,0 +41,0 @@ "dependencies": {

README.md

@@ -17,2 +17,3 @@ # rollup-plugin-svelte
 // rollup.config.js
+import * as fs from 'fs';
 import svelte from 'rollup-plugin-svelte';
@@ -22,3 +23,3 @@
   entry: 'src/main.js',
-  dest: 'bundle.js',
+  dest: 'public/bundle.js',
   format: 'iife',
@@ -38,5 +39,7 @@ plugins: [
 
-      // If you're doing server-side rendering, you may want
-      // to prevent the client-side compiler from duplicating CSS
-      css: false
+      // Extract CSS into a separate file (recommended).
+      // See note below
+      css: function ( css ) {
+        fs.writeFileSync( 'public/main.css', css );
+      }
     })
@@ -47,4 +50,14 @@ ]
 
+
+## Extracting CSS
+
+If your Svelte components contain `<style>` tags, by default the compiler will add JavaScript that injects those styles into the page when the component is rendered. That's not ideal, because it adds weight to your JavaScript, prevents styles from being fetched in parallel with your code, and can even cause CSP violations.
+
+A better option is to extract the CSS into a separate file. Using the `css` option as shown above would cause a `public/main.css` file to be generated each time the bundle is built (or rebuilt, if you're using rollup-watch), with the normal scoping rules applied.
+
+Alternatively, if you're handling styles in some other way and just want to prevent the CSS being added to your JavaScript bundle, use `css: false`.
+
+
 ## License
 
 MIT

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

9306

increased by33.78%

Lines of code

151

increased by46.6%

Number of lines in readme file

60

increased by27.66%

Worsened metrics

Dev dependency count

5

increased by25%

No dependency changes