Having issues getting example code to work as expected

[simonsteer]

Hello 👋 I'm trying to play around with the polyfill and am struggling to get the example paint module to work as expected. Hoping to get some clarity on where I'm going awry setting things up.

The site I'm working on is built with Remix, which is server-side rendered, so I can't get access to the window until after the initial mount. The way I've gotten around this is by using isomorphicLayoutEffect and node require to load in the polyfill prior to calling CSS.paintWorklet.addModule.

import { useIsomorphicLayoutEffect } from 'react-use'

export default function Index() {
  useIsomorphicLayoutEffect(() => {
    require('css-paint-polyfill')
    CSS.paintWorklet.addModule('worklets/paint/box')
  }, [])

  return (
    <div>
      <h1>Testing Houdini Polyfill</h1>
      <div
        style={{
          width: 500,
          height: 400,
          background: 'paint(box)',
          border: '1px solid blue',
        }}
      />
    </div>
  )
}

This seems to work fine; the network request fetching the module code succeeds:

The custom elements are being injected after the document body:

And inline styles are being walked after paint registration:

However, the custom paint does not seem to apply to the div; it just renders as a rectangle with a blue border, as though I had never applied the custom paint style:

I'm assuming there's something funky going on when it comes to writing the paint css rules to a stylesheet, but not entirely sure.

Browsers I've tested this locally on:

• Safari 15.5 (17613.2.7.1.8)
• Firefox 110.0.1 (64-bit)
• Chrome 110.0.5481.177 (Official Build) (x86_64)

Minimal github repo where I can reproduce the issue:
https://github.com/simonsteer/remix-houdini-test

Thanks in advance to the contributors working on this awesome project! Very exciting stuff :)