Sapper/SvelteKit + CSS Houdini
Tags: svelte, sveltekit, houdini, sapper
Published: 2021-02-28 00:17:48

## 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`

![SvelteKit Setup](https://res.cloudinary.com/tihos/image/upload/f_auto,q_auto/v1614469159/Screen_Shot_2021-02-27_at_3.37.24_PM_m5qbh5.png)

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

![CSS Houdini working](https://res.cloudinary.com/tihos/image/upload/f_auto,q_auto/v1614889268/Screen_Shot_2021-03-04_at_12.19.49_PM_gfz9pn.png)

# 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>