DEV Community

Cover image for Sapper/SvelteKit + CSS Houdini
Tim Smith
Tim Smith Subscriber

Posted on • Edited on

Sapper/SvelteKit + CSS Houdini

#svelte #sveltekit #houdini #sapper

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`
Enter fullscreen mode Exit fullscreen mode

SvelteKit Setup

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" />
Enter fullscreen mode Exit fullscreen mode

Error

ReferenceError: CSS is not defined at eval (/_components/Separator.svelte.js:14:3) at eval (/_components/Separator.svelte.js:16:4) ... ...
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

IT WORKS

CSS Houdini working

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>
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
tithos profile image
Tim Smith •

You can add whatever Worklet Library you want: houdini.how/