Svelte Sugar

Add some syntax sugar to Svelte and SvelteKit.

About

I was looking for ways to enhance the syntaxes of CSS, HTML, and JS in order to reduce redundancy and remove the little things that often annoy me – but without sacrificing readability or ending up in a mess of unnecessary cleverness.

There are more rules in the pipeline that I’m already using, but I’ll only add them here once I’m 100% sure they’re solid.

If you find a bug or have feedback/suggestions, feel free to send me an email: [email protected]

Table of Contents

• Plugin Configuration
• CSS Rules
• HTML Rules

Plugin Configuration

To enable the plugin, add it to your vite.config like so:

// vite.config.js
import { sveltekit }    from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
import svelteSugar      from 'svelte-sugar';

export default defineConfig({
  plugins: [
    svelteSugar(),
    sveltekit()
  ]
});

Important: You need to place svelteSugar() before sveltekit(), because the code must be transformed before Svelte(Kit) processes it. (If you use other similar plugins, you may need to adjust the order accordingly.)

CSS Rules

These rules apply to CSS code inside <style>...</style> of .svelte-files, and to .css-files as a whole.

Wrapperless Custom Property Notation

Use CSS Variables ("Custom Properties") on the right-hand side of a declaration without wrapping them in var(), as long as you don’t need to provide a fallback value.

#example {
  background-color: --bg;
  margin: --mar-y --mar-x;
  --box-border: 1px solid var(--primary-color);
}

This becomes:

#example {
  background-color: var(--bg);
  margin: var(--mar-y) var(--mar-x);
  --box-border: 1px solid var(--primary-color);
}

Multiple Properties Notation

Assign a value to multiple properties at once.

#example {
  [color,border-color]: black;
  gap,margin,padding: 10px;
}

This becomes:

#example {
  color: black;
  border-color: black;
  gap: 10px;
  margin: 10px;
  padding: 10px;
}

Note: This rule supports two formats because both are intuitive and work well. Personally, I find the bracketed format a bit clearer overall.

HTML Rules

These rules apply to the HTML code inside .svelte-files.

Multiple Attributes Notation

Assign a value to multiple attributes at once.

<div class='box' [id,data-key,name]='example'>...</div>

This becomes:

<div class='box' id='example' data-key='example' name='example'>...</div>