Can'；在CSS中不使用JS来绘制CSS houdini绘画？

我在努力模仿；我有一个scss文件，我正在React/Electron项目中与模块化CSS一起使用。我想在同一个文件中定义

paint

要使用的函数，如示例所示：

.container {
  --background-canvas: (ctx, geom) => {
    // left blank for minimal example
  };
  background-image: paint(background-canvas);
  display: flex;
  margin: 4px;
  border-radius: 12px;
  height: 75px;
}

但是，这无法使用

CssSyntax错误编译：应为伪类或伪元素。（2:23）

。我没有做的是演示什么？

好吧，我基本上都在工作。唯一不起作用的部分是过渡，我不知道为什么它不起作用

--编辑：我通过以下途径获得了成功：

这个解决方案真正有趣的部分是，您仍然需要实际注册paint函数

  --background-canvas: (ctx, geom) => [ ctx.moveTo(0, 0),
    ctx.lineTo(
      var(--pad) + (geom.width - var(--slant) - var(--pad)) * var(--multiplier),
      0
    ),
    ctx.lineTo(
      var(--pad) + (geom.width - var(--slant) - var(--pad)) * var(--multiplier) +
        var(--slant),
      geom.height
    ),
    ctx.lineTo(0, geom.height), ctx.fillStyle = \`var(--color)\`, ctx.fill() ];

我这样做的方式与我之前的回答类似：哪个使用这个

需要注意的是，来自的这个解决方案使用了

eval

作为其registerPaint函数的一部分，因此从安全角度来看这可能会有问题，尽管理论上应该从主运行时对绘制代码进行沙盒处理

const Demo=styled.div`
背景：#1108a0；
填充：50px0；
`;
常量测试=styled.div`
--颜色：青色；
--乘数：0.24；
--pad:30；
--倾斜：20；
--背景画布：（ctx，geom）=>[ctx.moveTo（0,0），
ctx.lineTo(
var（--pad）+（几何宽度-var（--slant）-var（--pad））*var（--乘数），
0
),
ctx.lineTo(
var（--pad）+（几何宽度-var（--slant）-var（--pad））*var（--乘数）+
var（--倾斜），
几何高度
),
ctx.lineTo（0，geom.height），ctx.fillStyle=\`var（--color）\`，ctx.fill（）；
背景：绘画（背景画布）；
过渡：乘数0.4s；
字体：粗体6em无衬线；
颜色：黄色；
文本阴影：0 3px 1px青色；
线高：1.5em；
宽度：最大含量；
左侧填充：30px；
右边填充：50px；
隔离：隔离；
&：悬停{
--乘数：1；
}
&跨度{
混合模式：排除；
}
`;
常量应用=（）=>(
CSS中的JS
);
ReactDOM.render（，document.getElementById（'root'））；
/*如果（CSS中的“paintWorklet”）{
console.log（'here'）
const src=document.querySelector（'script[language$=“paint”]'）。innerHTML；
const blob=新blob（[src]{
键入：“text/javascript”
});
addModule（URL.createObjectURL（blob））；
}*/

@介质（最大宽度：900px）{
艾尔先生{
字号：4em；
}
}
@介质（最大宽度：500px）{
艾尔先生{
字号：2.4em；
}
}

registerPaint（“背景画布”，类{
静态获取inputProperties（）{
返回['--背景画布']；
}
涂料（ctx、geom、性能）{
eval（properties.get（'--background canvas'）.toString（））（ctx、geom、properties）；
}
})
//注册属性，使其可设置动画
CSS.registerProperty({
名称：'--乘数'，
语法：“”，
继承：false，
初始值：0
})
如果（CSS中的“paintWorklet”）{
const src=document.querySelector（'script[language$=“paint”]'）。innerHTML；
const blob=新blob（[src]{
键入：“text/javascript”
});
addModule（URL.createObjectURL（blob））；
}

实际上，我现在正试图在另一个文件中注册paint函数（拥有一个庞大的内联字符串化函数并不是最适合编辑的），如下页：，我在注册时遇到了问题。。。在我的

index.html

中，我有一个

标签，上面写着：

CSS.paintWorklet.addModule（'../src/ResultDisplay/DefaultResultDisplay/testPaint.js'），但它找不到它？可能需要开始一个新问题。您可能会更幸运地在index.html文件中内联一个样式标记，因为我在这些示例中设置了registerPaint标记，或者将testPaint放在公用文件夹中并从那里使用它。如果它被捆绑到主文件中，我相信它不会起作用。我在这里的一个新问题中发布了一个较长的解释：@IronWaffleMan，如果这个答案充分回答了这个问题，你能接受吗？
  --background-canvas: (ctx, geom) => [ ctx.moveTo(0, 0),
    ctx.lineTo(
      var(--pad) + (geom.width - var(--slant) - var(--pad)) * var(--multiplier),
      0
    ),
    ctx.lineTo(
      var(--pad) + (geom.width - var(--slant) - var(--pad)) * var(--multiplier) +
        var(--slant),
      geom.height
    ),
    ctx.lineTo(0, geom.height), ctx.fillStyle = \`var(--color)\`, ctx.fill() ];