Archive Note
Archived because Svelte added support for style directives.
What is it?
A custom Svelte preprocessor to add support for
styledirective.
<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>