README

@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
Usage
Options

Install

> npm i @modular-css/svelte -D

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

Usage no npm install needed!