https://github.com/starptech/sveltejs-brunch

Compile Svelte components inside Brunch projects
https://github.com/starptech/sveltejs-brunch

Last synced: 20 days ago
JSON representation

Compile Svelte components inside Brunch projects

• Host: GitHub
• URL: https://github.com/starptech/sveltejs-brunch
• Owner: StarpTech
• License: mit
• Created: 2017-12-10T11:39:14.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2021-12-21T17:54:22.000Z (almost 3 years ago)
• Last Synced: 2024-10-03T23:42:16.371Z (about 1 month ago)
• Language: JavaScript
• Size: 26.4 KB
• Stars: 6
• Watchers: 3
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# sveltejs-brunch

[![npm](https://img.shields.io/npm/v/sveltejs-brunch.svg?maxAge=3600)](https://www.npmjs.com/package/sveltejs-brunch)

[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](#badge)

Compile [Svelte 3](https://github.com/sveltejs/svelte) components inside [Brunch](https://github.com/brunch/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 sveltejs-brunch

```

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

# Advanced usage

```js

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

    ...

  }

}

```

# Caveats

There are some [limitation](https://github.com/Rich-Harris/svelte-preprocessor-demo#future-work) regarding to sourcemaps. Svelte precompilation step does not consume sourcmaps that's the reason why your code does not point to the exact original code.