rollup-plugin-svelte
Compile Svelte components.
Installation
npm install --save-dev svelte rollup-plugin-svelte
Note that we need to install Svelte as well as the plugin, as it's a 'peer dependency'.
Usage
import svelte from 'rollup-plugin-svelte';
import resolve from '@rollup/plugin-node-resolve';
export default {
input: 'src/main.js',
output: {
file: 'public/bundle.js',
format: 'iife'
},
plugins: [
svelte({
extensions: ['.my-custom-extension'],
include: 'src/components/**/*.svelte',
preprocess: {
style: ({ content }) => {
return transformStyles(content);
}
},
emitCss: false,
onwarn: (warning, handler) => {
if (warning.code === 'a11y-distracting-elements') return;
handler(warning);
},
compilerOptions: {
generate: 'ssr',
hydratable: true,
customElement: false
}
}),
resolve({ browser: true }),
]
}
NOTICE: You will need additional Rollup plugins.
Alone, this plugin translates Svelte components into CSS and JavaScript files.
You will need to include @rollup/plugin-node-resolve
– and probably @rollup/plugin-commonjs
– in your Rollup config.
Preprocessing and dependencies
If you are using the preprocess
feature, then your callback responses may — in addition to the code
and map
values described in the Svelte compile docs — also optionally include a dependencies
array. This should be the paths of additional files that the preprocessor result in some way depends upon. In Rollup 0.61+ in watch mode, any changes to these additional files will also trigger re-builds.
pkg.svelte
If you're importing a component from your node_modules folder, and that component's package.json has a "svelte"
property...
{
"name": "some-component",
"svelte": "src/MyComponent.svelte"
}
...then this plugin will ensure that your app imports the uncompiled component source code. That will result in a smaller, faster app (because code is deduplicated, and shared functions get optimized quicker), and makes it less likely that you'll run into bugs caused by your app using a different version of Svelte to the component.
Conversely, if you're publishing a component to npm, you should ship the uncompiled source (together with the compiled distributable, for people who aren't using Svelte elsewhere in their app) and include the "svelte"
property in your package.json.
If you are publishing a package containing multiple components, you can create an index.js
file that re-exports all the components, like this:
export { default as Component1 } from './Component1.svelte';
export { default as Component2 } from './Component2.svelte';
and so on. Then, in package.json
, set the svelte
property to point to this index.js
file.
By default (when emitCss: true
) the CSS styles will be emitted into a virtual file, allowing another Rollup plugin – for example, rollup-plugin-css-only
, rollup-plugin-postcss
, etc. – to take responsibility for the new stylesheet. In fact, emitting CSS files requires that you use a Rollup plugin to handle the CSS. Otherwise, your build(s) will fail! This is because this plugin will add an import
statement to import the emitted CSS file. It's not valid JS to import a CSS file into a JS file, but it allows the CSS to be linked to its respective JS file and is a common pattern that other Rollup CSS plugins know how to handle.
If you set emitCss: false
and your Svelte components contain <style>
tags, the compiler will add JavaScript that injects those styles into the page when the component is rendered. That's not the default, because it adds weight to your JavaScript, prevents styles from being fetched in parallel with your code, and can even cause CSP violations.
License
MIT