无法将额外的参数传递给CSS Houdini函数？

Question

我有一个React/Electron应用程序(带有.scss文件和CSS模块)，我正在尝试使用CSS Houdini paint()函数。我已经成功地调用了它，但似乎向paint()添加第二个参数会导致它失败。

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";
    }
  }
);

如果我从paint(testPaint, selected)调用中排除selected，它可以正常工作，但args是一个空数组。如果我用selected调用它，它根本不会被调用(没有控制台日志，没有断点触发器)。我一直在关注this guide，并没有看到它提到了让它工作的任何其他要求……

Answer 1

似乎并不是所有浏览器都支持向paint传递参数(在mac上的FF和Chrome上进行了测试)。

带参数的

​

​

不带参数的

​

​

注:将颜色参数化也是很棒的，不是吗？该规范允许paint()函数接受一组参数。这个特性还没有在Chrome中实现，因为它严重依赖于Houdini的属性和值API，在它可以发布之前还需要一些工作。

source