The 3S - Svelte, Sass and StoryBook

I started to work on some project which I thought would help me to freelance and showcase my work. I've been working in React for years as of now. But two months before I was introduced to a framework called "svelte". Which had context, event bindings and the best is no Virtual DOMs.

So I thought why don't we implement the project using Svelte after all adapt and evolve is the best way we could deliver the best of solutions to clients. With this in my mind. I usually have a component library that showcases all of my components.

To Encourage reusability and document the UI. I Used "Storybook".

The Usual way I used the sveltejs template and bootstrapped the project.
npx degit sveltejs/template my-supercool-app

I wanted to add sass to my project. As to use a proper implementation I had to configure in three places as I will be using sass inline.

• rollup
• vscode
• storybook

Below is a simple svelte component using sass,

<script type="text/javscript" >
    export const title;
<script>
<style type="text/scss" lang="scss" >
    div{
        display: flex;
        button {
            margin:auto;
        }
    }
</style>
<div>
    <button>{title}</button>
</div>

Configure Rollup

Your cloned template uses rollup to bundle your app. So to configure it we need to install a few plugins to preprocess sass in your source.
Luckily svelte gives you a plugin svelte-preprocess which pre-process sass syntax also does more than that.

First let's install the plugin npm i -D svelte-preprocess autoprefixer
Then add it into rollup.config.js file

import svelte from 'rollup-plugin-svelte';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import livereload from 'rollup-plugin-livereload';
import autoPreprocess from 'svelte-preprocess';
import { terser } from 'rollup-plugin-terser';

const production = !process.env.ROLLUP_WATCH;

// Your Preprocess which compiles source code to sass
const preprocess = autoPreprocess({ 
    scss: { includePaths: ['src'] },
    postcss: {
        plugins: [ require('autoprefixer') ],
    },
});

export default {
    input: 'src/main.js',
    output: {
        sourcemap: true,
        format: 'iife',
        name: 'app',
        file: 'public/build/bundle.js'
    },
    plugins: [
        svelte({
            dev: !production,
            css: css => {
                css.write('public/build/bundle.css');
            },
            // adding the preprocess into svelte loader
            preprocess
        }),
        resolve({
            browser: true,
            dedupe: importee => importee === 'svelte' || importee.startsWith('svelte/')
        }),
        commonjs(),
        !production && serve(),
        !production && livereload('public'),
        production && terser()
    ],
    watch: {
        clearScreen: false
    }
};

function serve() {
    let started = false;

    return {
        writeBundle() {
            if (!started) {
                started = true;

                require('child_process').spawn('npm', ['run', 'start', '--', '--log.format','dev'], {
                    stdio: ['ignore', 'inherit', 'inherit'],
                    shell: true
                });
            }
        }
    };
}

Looking at the specific coding part in the above config. Includes sass in the src directory and use an autoprefixer for browser dependency.

const preprocess = autoPreprocess({ 
    scss: { includePaths: ['src'] },
    postcss: {
        plugins: [ require('autoprefixer') ],
    },
});

Configure VS Code

If you're using vscode it'll start reporting your CSS as errors and the confusion starts.

• For this to work open your settings.
• Search for "svelte"
• set your nodejs path in option Svelte -> Language-server: Runtime

Use below image for reference,

Then install node-sass npm i -D node-sass

Then create a file svelte.config.js in your root directory. Add the following contents.

const sass = require('node-sass');

module.exports = {
    preprocess: {
        style: async ({ content, attributes }) => {
            if (attributes.type !== 'text/scss') {
                return;
            }

            const result = await sass.renderSync({
                data: content,
                sourceMap: 'style.css.map',
                omitSourceMapUrl: true,
            });

            return {
                code: result.css.toString('utf8'),
                map: result.map.toString('utf8'),
            };
        },
    },
};

The Above code says that we want to process sass code using node-sass.

Configure Storybook

Assuming, you would've followed the default steps and add storybook to your project.

Now in .storybook folder create a file webpack.config.js to override default config with our customizations.

// import the preprocess from svelte config
const stylepreprocess = require('../svelte.config');

module.exports = async ({ config, mode }) => {
    let j;
    // Find svelteloader from the webpack config
    const svelteloader = config.module.rules.find((r, i) => {
        if (r.loader && r.loader.includes('svelte-loader')) {
            j = i;
            return true;
        }
    });

    // safely inject preprocess into the config
    config.module.rules[j] = {
        ...svelteloader,
        options: {
            ...svelteloader.options,
            style: stylepreprocess.preprocess.style
        }
    }

    // return the overridden config
    return config;
}

In the above code, we've overridden the svelte-loader options with our own preprocess.

Try running npm run storybook, This should work.

Hopefully, this will help you better set up the development environment.
Happy Coding 👩‍💻👨‍💻

The Sample implementation will be added soon.

Comments

[Paweł Kowalski]

s/sass/tailwind and you got something interesting ;-)

[Sirajul Muneer]

I'm able to compile and make scss work with svelte, but I still get validation errors in VSCode for svelte/scss, even after configuring and restarting the language server as specified. :(

[Eugene Ignatov]

So do I , have you find any solution? I can not find an answer.

[Sirajul Muneer]

No. I could only supress the error by disabling css validation all together. So now it is more like typing in a text editor.
That is not a solution but it is better than seeing the errors.