DEV Community

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

Posted on • Edited on

6 4

Sapper/SvelteKit + CSS Houdini

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

Speedy emails, satisfied customers

Postmark Image

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (1)

Collapse
 
tithos profile image
Tim Smith

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

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more