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`

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>