Svelte CSS Scoper

A Svelte preprocessor that allows to add a suffix to every class The svelte scoped class mechanism works great to prevent our component classes to mess with other css on the page. Adding a random suffix to the classes prevent the contrary case, when css on the page interferes with your components css.

My use case was the creation of a widget with a modal popup on non svelte websites, classes names like button or modal were already being used on some of those websites and clashed with my own

The library is a preprocessor that for now takes a simple parameter, it's the value to append to every css class

if you use any kind of preprocessing you will need to use svelte-sequential-preprocessor

Installation

Using npm:

$ npm i -D svelte-sequential-preprocessor

Usage

With rollup-plugin-svelte and svelte-sequential-preprocessor

import sveltePreprocess from 'svelte-preprocess';
import seqPreprocessor from 'svelte-sequential-preprocessor';
import cssScoper from 'svelte-css-scoper';

export default {
    input: 'src/main.ts',
    output: {
        sourcemap: true,
        format: 'iife',
        name: 'app',
        file: `public/app.js`
    },
    plugins: [
        svelte({
            preprocess: seqPreprocessor([sveltePreprocess(), cssScoper({ staticSuffix: '-QWERTY'})])
    })]
}

Sample

input

<script>
    let error = false;
    let isValid = true;
    let rounded = true;
</script>

<div class="button {rounded ? 'btn-rounded' : 'btn-squared'}" class:error class:roundedError={rounded && error}>
    test 1 2 3
</div>

<style>
    .error {}
    .btn-rounded {}
    .btn-squared {}
    .button {}
    .roundedError {}
</style>

output

<script>
    let error = false;
    let isValid = true;
    let rounded = true;
</script>

<div class="button-QWERTY {(rounded ? 'btn-rounded' : 'btn-squared') + '-QWERTY'}" class:error-QWERTY={error} class:roundedError-QWERTY={rounded && error}>
    test 1 2 3
</div>

<style>
    .error-QWERTY {}
    .btn-rounded-QWERTY {}
    .btn-squared-QWERTY {}
    .button-QWERTY {}
    .roundedError-QWERTY {}
</style>