Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including @modular-css/svelte with all npm packages installed. Try it out:

require("svelte/package.json"); // svelte is a peer dependency. var svelte = require("@modular-css/svelte")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@modular-css/svelte v25.8.0

Add modular-css support to svelte

@modular-css/svelte NPM Version NPM License NPM Downloads

Gitter

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

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free