svelte-js-in-css
MIT License
Stars
7
Ecosystems:
Svelte
Svelte JS in CSS
When CSS plays uno reverse.
For RFC: https://github.com/sveltejs/rfcs/pull/51
This project is an experiment. No npm packages published at the moment.
Idea
Use JS directly in the <style> tag:
<script>
let num = 10
</script>
<div>Hello</div>
<style>
div {
width: js(num + 'px');
overflow: hidden;
}
</style>
Preprocesses to:
<script>
let num = 10
</script>
<div style="display: contents; --naVbV1: {num + 'px'}; ">
<div>Hello</div>
</div>
<style>
div {
width: var(--naVbV1);
overflow: hidden;
}
</style>
Development
$ node main.js
# Only report failed css types, no error logs
$ node main.js --queit
# Test backtick syntax
$ node main.js --backtick
Caveats
-
Hashing function is not the same as Svelte's
cssHashoption. -
A wrapping content with
display: contentsis used since it's easier to implement.
These caveats could be overcomed if this feature is built into Svelte.
License
MIT