When CSS plays uno reverse.
For RFC: sveltejs/rfcs#51
This project is an experiment. No npm packages published at the moment.
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>
$ node main.js
# Only report failed css types, no error logs
$ node main.js --queit
# Test backtick syntax
$ node main.js --backtick
-
Hashing function is not the same as Svelte's
cssHash
option. -
A wrapping content with
display: contents
is used since it's easier to implement.
These caveats could be overcomed if this feature is built into Svelte.
MIT