Svelte Style Directive

Archive Note

Archived because Svelte added support for style directives.

• What is it?
• Usage
• Why?
• Performance
• Examples
  • Using state
  • CSS variables

What is it?

A custom Svelte preprocessor to add support for style directive.

<span
  style:font-size="16px"
  style:color={color}
  style:text-transform="lowercase"
  >

Usage

Add to package.json

npm i --save-dev svelte-style-directive

Add to rollup.config.js

import svelte from 'rollup-plugin-svelte'
import { svelteStyleDirective } from 'svelte-style-directive'

export default {
  plugins: [
    svelte({
      preprocess: [
        svelteStyleDirective()
      ]
    })
  ]
}

Why?

It's very convenient to apply classes based on state/prop in Svelte.

<script>
  let hidden = false;
  let bold = true;
</script>

<style>
  .hidden {
    display: none;
  }
  .bold {
    font-weight: bold;
  }
</style>

<span class:hidden={hidden} class:bold={bold}>Heading</span>

class directive makes things much easier. But, what if you wanted to make this work with style attributes? This plugin adds support style directive to achieve similar functionality.

So you can do this:

<script>
  let bold = true;
  let color = 'red';
</script>

<span style:font-weight={bold} style:color={color}>Heading</span>

instead of this:

<script>
  let bold = true;
  let color = 'red';
</script>

<span style={`${bold ? 'font-weight: bold; ' : ''}${color ? 'color: red; ' : ''}`}>Heading</span>

It also works for CSS Variables!

Performance

As this is a preprocessor, it is just a syntactic sugar. It has no runtime overhead.

Examples

Using state

<script>
  let progress = 0.5;
</script>

<!-- Without style directive -->
<div class="progress-bar">
  <div class="cursor" style={`left: ${progress * 100 + '%'};`}></div>
</div>

<!-- With style directive -->
<div class="progress-bar">
  <div class="cursor" style:left={progress * 100 + '%'}></div>
</div>

<!-- Assume styles for progress-bar and cursor are already declared -->

CSS variables

<script>
  let textColor = '#9c9c9c';
</script>

<style>
  span {
    color: var(--text-color);
  }
</style>

<div style:--text-color={textColor}>
  <span>Some text with color</span>
</div>