@modular-css/svelte 
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!
Example
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.
Install
> npm i @modular-css/svelte -DUsage
svelte.preprocess()
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 = await processor.output();
fs.writeFileSync("./dist/bundle.css", result.css);
@modular-css/rollup
API
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"
});
rollup.config.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",
}),
]
};Options
strict
If true whenever a missing replacement is found like {css.doesnotexist} an error will be throw aborting the file processing. Defaults to false.
clean
If true will re-process any previously handled files (and remove any files that dependended on them). Might be useful, but currently also dangerous (see #522). Defaults to false.
Shared Options
All options are passed to the underlying Processor instance, see Options.