Updated Mar 4, 2021
added solution for Sapper
https://github.com/timscodebase/newest-tim
I struggled for a time to get CSS Houdini working with SvelteKit. I finally figured it out!
Here is how to get it going.
Step 1
Setup Svelte kit
mkdir project && cd project
npm init svelte@next
npm install -D @sveltejs/adapter-node
npm install -D @sveltejs/adapter-static
npm install -D @sveltejs/adapter-netlify
npm install -D @sveltejs/adapter-vercel`
Setup sveltekit how you like.
Step 2
Import CSS Houdini
My first mistake attempting to use CSS Houdini in Svelte was trying to import CSS Houdini at the component level. That gave me the following error.
separator.svelte
<script>
if ("paintWorklet" in CSS) {
CSS.paintWorklet.addModule(
"https://rawcdn.githack.com/CSSHoudini/css- houdini/74a3e2482adf18b41882de48f601a5fc18fd9d5c/src/lines/dit/lines.js"
);
}
</script>
<div class="css-houdini lines" />
Error
ReferenceError: CSS is not defined
at eval (/_components/Separator.svelte.js:14:3)
at eval (/_components/Separator.svelte.js:16:4)
...
...
I found that even if I use onLoad I would get the error. I decided it would be best if I import CSS Houdini at the highest possible level.
app.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
%svelte.head%
</head>
<body>
<div id="svelte">%svelte.body%</div>
<script>
(async function () {
if ('paintWorklet' in CSS) {
CSS.paintWorklet
.addModule('https://rawcdn.githack.com/CSSHoudini/csshoudini/74a3e2482adf18b41882de48f601a5fc18fd9d5c/src/lines/dist/lines.s');
}
})();
</script>
</body>
</html>
Step 3
Apply CSS Houdini
separator.svelte
...
...
<style>
:root {
--size: 300px;
}
@media (min-width: 600px) {
:root {
--size: 600px;
}
}
.css-houdini {
height: var(--size);
padding: 1em;
box-sizing: content-box;
width: var(--size);
}
.lines {
--lines-colors: #f94144, #f3722c, #f8961e, #f9844a, #f9c74f, #90be6d,
#43aa8b, #4d908e, #577590, #277da1;
--lines-widths: 10, 2, 3, 8;
--lines-gaps: 20, 4, 3, 7;
--lines-rotate: 0; /* In degrees */
background-image: paint(lines);
}
</style>
IT WORKS
Sapper
When adding CSS Houdini in Sapper is a bit different. Here is the solution that has worked for me.
Template.html '
Add css-paint-polyfill to the <head>.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="theme-color" content="#333333">
%sapper.base%
<!-- <link rel="stylesheet" href="global.css"> -->
<link rel="stylesheet" href="min.css">
<link rel="manifest" href="manifest.json" crossorigin="use-credentials">
<link rel="icon" type="image/png" href="favicon.png">
<script src="https://unpkg.com/css-paint-polyfill">
...
...
<script>
(async function () {
if ('paintWorklet' in CSS) {
CSS.paintWorklet.addModule('https://rawcdn.githack.com/CSSHoudini/css-houdini/74a3e2482adf18b41882de48f601a5fc18fd9d5c/src/lines/dist/lines.js');
}
})();
</script>
Top comments (1)
You can add whatever Worklet Library you want: houdini.how/