Parcel detects paint worklets automatically with `new URL(..., import.meta.url)`

https://parceljs.org/blog/rc0/#worklet-support

For example, this works with Parcel 2 (the URL constructor call has to happen in the addModule argument, and the filepath has to be a string literal):

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style>
            .demo {
                --border-radius-reverse: 10;

                --border-radius-reverse-color: orange;

                border: calc(var(--border-radius-reverse) * 1px) solid
                    transparent;
                border-image: paint(border-radius-reverse);
                border-image-slice: var(--border-radius-reverse);

                width:  100px;
                height:  100px;
            }
        </style>
    </head>
    <body>
        <div class="demo"></div>
        <script type="module">
            CSS.paintWorklet.addModule(
                new URL(
                    "npm:@houdini-modules/border-radius-reverse",
                    import.meta.url
                )
            );
        </script>
    </body>
</html>

Unrelated to that, I find the /worklet.js suffix a bit misleading, because for example @houdini-modules/border-radius-reverse doesn't contain such a file.

GoogleChromeLabs / houdini.how

Parcel detects paint worklets automatically with `new URL(..., import.meta.url)` #169