@firstfleet/sveltejs-brunch

Compile Svelte components inside Brunch projects

Usage no npm install needed!

<script type="module">
  import firstfleetSveltejsBrunch from 'https://cdn.skypack.dev/@firstfleet/sveltejs-brunch';
</script>

README

sveltejs-brunch

Forked from sveltejs-brunch. May include additional changes, newer versions of dependencies, and/or bug fixes that are not in the upstream repo. Changes will be submitted via pull request.

Compile Svelte 3 components inside Brunch projects.

  • Extract the CSS into a separate file
  • Support CSS & JS Sourcemaps
  • Preprocessing of markup, style, script
  • Define file extensions which should be compiled
  • Pass any Svelte compiler option

Installation

npm install --save-dev @firstfleet/sveltejs-brunch

By default all *.svelte.html, .svelte files are compiled, unless you use the pattern option.

Advanced usage

module.exports.plugins = {
  sveltejs: {
    // To extract the CSS into files, simply include to extractCSS option in your Brunch config like so...
    extractCSS: true,
    // To combine the sourcemaps from all components into one
    combineSourceMapCSS: true,
    // The generated combined css file
    out: './public/components.css',
    // By default, svelte, svelte.html are used.
    pattern: /\.(svelte|html)$/
    // Optionally, preprocess components with svelte.preprocess:
    // https://github.com/sveltejs/svelte#preprocessor-options
    preprocess: {
      style: ({ content }) => {
        return transformStyles(content)
      }
    },
    // Other compiler options https://github.com/sveltejs/svelte#compiler-options
    ...
  }
}

Current list of deviations from origional sveltejs-brunch repo

  1. Bug fix for sourcemap generation in brunch PR
  2. Bug fix for svelte preprocessor. The preprocessor call was not correctly passing through the filename to the preprocessor plugin.