Repository files navigation

Efficiently apply inline styles to Svelte components.

NPM users: please consider theGithub README for the latest description of this package (as updating the docs would otherwise always require a new NPM package version)

Just a small note: if you like this module and plan to use it, consider "starring" this repository (you will find the "Star" button on the top right of this page), so that I know which of my repositories to take most care of.

npm install svelte-inline-style

It is recommended to import the package within a module context:

<scriptcontext="module">importstylefrom'svelte-inline-style'</script><script>letstyles={fontSize:'22px',// use camel-cased CSS property names...fontWeight:'bold'// ...and start with a small letter}</script><divuse:style={styles}>...</div>

Experiment withsvelte-inline-style using theSvelte REPL

Sometimes it is necessary to add inline styles to a Svelte component rather than to rely on a stylesheet and just switch classes.

A straightforward approach could be to usestyle attributes:

<divstyle="font-size:{fontsize}px; font-weight:{fontweight}">...</div>

but this one would first require to construct a string which would then have to parsed by the browser before the actual changes could be made.

Another solution has been shown bymouse484 in packagesvelte-inline-css: with the aid of Svelte "actions" inline styles may be directly set on the HTML elements created to represent Svelte components:

<script>importstylefrom'svelte-inline-css'exportletstyles={'font-size':'22px','font-weight':'bold'}</script><divuse:style={styles}>...</div>

This solution works great, but - again - requires some string processing before the actual style can be applied:svelte-inline-css expects kebab-cased CSS property names which first have to be converted to camel-cased identifiers before they may be set.

This implementation therefore suggests a third alternative, which seems "more natural": start with camel-cased CSS property names right away and apply them to HTML elements without prior conversion.

<script>importstylefrom'./svelte-inline-style.js'exportletstyles={fontSize:'22px',fontWeight:'bold'}</script><divuse:style={styles}>...</div>

You may easily build this package yourself.

Just installNPM according to the instructions for your platform and follow these steps:

1. either clone this repository usinggit ordownload a ZIP archive with its contents to your disk and unpack it there
2. open a shell and navigate to the root directory of this repository
3. runnpm install in order to install the complete build environment
4. executenpm run build to create a new build

You may also look into the author'sbuild-configuration-study for a general description of his build environment.

MIT License