Can't pass extra args to CSS Houdini paint function?

Question

I have a React/Electron app (with .scss files and CSS modules) where I'm trying to use CSS Houdini paint() function. I've successfully managed to call it, but it appears adding a second argument to paint() is causing it to fail.

styles.module.scss:

.container {
  --bubble-color: #ccc;
  background-image: paint(testPaint, selected);
  display: flex;
  margin: 4px;
  border-radius: 12px;
  height: 75px;
}

testPaint.js:

registerPaint(
  "testPaint",
  class {
    static get inputProperties() {
      return ["--bubble-color"];
    }
    static get inputArguments() {
      return ["*"];
    }
    paint(ctx, geom, properties, args) {
      console.log('args', args); // NOTHING LOGGED HERE
      const isSelected = args[0].toString() === "selected";
    }
  }
);

If I exclude selected from the paint(testPaint, selected) call, it works fine, but with args being an empty array. If I call it with selected, instead it doesn't get called at all (no console log, no breakpoint trigger). I'd been following this guide and didn't see it mentioning any other requirements to get this to work...

Answer 1

Seems like passing arguments to paint is not supported by all browsers (tested on FF and Chrome on mac).

With arguments

Without arguments

Note: It would be great to parameterize the colors, too, wouldn’t it? The spec allows for the paint() function to take a list of arguments. This feature is not implemented in Chrome yet, as it heavily relies on Houdini’s Properties and Values API, which still needs some work before it can ship.

source