Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

@modular-css/svelte

25.8.0 • Public • Published

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

Install

npm i @modular-css/svelte

DownloadsWeekly Downloads

54

Version

25.8.0

License

MIT

Unpacked Size

31.8 kB

Total Files

5

Homepage

m-css.com

Last publish

Collaborators

  • avatar