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

Usage

`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 = 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.

Shared Options

All options are passed to the underlying Processor instance, see Options.