Svelte preprocessor support for modular-css. Process inline <style>s or <link> references inside your Svelte components using the full power of modular-css while also providing compile-time optimizations for smaller bundles and even faster runtime performance!
Turns this
<div class="{css.main}">
<h1 class="{css.title}">Title</h1>
</div>
<style>
.main {
...
}
.title {
...
}
</style>into what is effectively this
<div class="abc123_main">
<h1 class="abc123_title">Title</h1>
</div>while allowing you to use all of the usual modular-css goodies.
Alternatively you can use <link href="./file.css" /> tags to reference CSS external to the component.
$ npm i modular-css-svelte
const filename = "./Component.html";
const { processor, preprocess } = require("modular-css-svelte")({
// Processor options
});
const processed = await svelte.preprocess(
fs.readFileSync(filename, "utf8"),
Object.assign({}, preprocess, { filename })
);
const result = processor.output();
fs.writeFileSync("./dist/bundle.css", result.css);const rollup = require("rollup").rollup;
const { preprocess, processor } = require("modular-css-svelte")({
// Processor options
});
const bundle = await rollup({
input : "./Component.html",
plugins : [
require("rollup-plugin-svelte")({
preprocess,
}),
require("modular-css-rollup)({
processor,
common : "common.css",
}),
]
});
// bundle.write will also write out the CSS to the path specified in the `css` arg
bundle.write({
format : "es",
file : "./dist/bundle.js"
});const { preprocess, processor } = require("modular-css-svelte")({
// Processor options
});
module.exports = {
input : "./Component.html",
output : {
format : "es",
file : "./dist/bundle.js"
},
plugins : [
require("rollup-plugin-svelte")({
preprocess,
}),
require("modular-css-rollup)({
processor,
common : "common.css",
}),
]
};If true whenever a missing replacement is found like {css.doesnotexist} an error will be throw aborting the file processing. Defaults to false.
All options are passed to the underlying Processor instance, see Options.