svelte-compose-preprocessors
v0.1.0
Published
Composes multiple Svelte preprocessor functions into one
Downloads
5
Readme
svelte-compose-preprocessors
Composes an array of Svelte preprocessor functions into a single one, while composing source maps and merging dependencies.
Install
npm install --save-dev svelte-compose-preprocessors
Usage
If you're using the Svelte compiler API directly:
import * as svelte from 'svelte';
import compose from 'svelte-compose-preprocessors';
// assuming you've also imported the individual preprocessors below from somewhere
const processed = await svelte.preprocess(source, {
markup: compose([
pug(),
minify()
]),
style: compose([
sass(),
postcss()
]),
script: compose([
coffeescript(),
terser()
])
});
If you're using Rollup with rollup-plugin-svelte:
import svelte from 'rollup-plugin-svelte';
import compose from 'svelte-compose-preprocessors';
// assuming you've also imported the individual preprocessors below from somewhere
export default {
// ...
plugins: [
// ...
svelte({
preprocess: {
markup: compose([
pug(),
minify()
]),
style: compose([
sass(),
postcss()
]),
script: compose([
coffeescript(),
terser()
])
}
}),
// ...
],
// ...
};
API
svelte-compose-preprocessors
exports a single function, compose
, that takes an array of preprocessor functions that have the following function signature:
type Preprocessor = (options: PreprocessorOptions) => Promise<PreprocessorResult>;
where PreprocessorOptions
and PreprocessorResult
are defined as follows:
interface PreprocessorOptions {
content: string;
attributes: Record<string, string | boolean>;
filename?: string;
}
interface PreprocessorResult {
code: string;
map?: SourceMap | string;
dependencies?: Array<string>;
}
... and returns a single function with that signature:
import compose from 'svelte-compose-preprocessors';
const combined_preprocessor = compose([
preprocessor_one,
preprocessor_two,
preprocessor_three
]);
The returned function composes intermediate source maps and merges all dependencies.
License
MIT