# [Houdini] js in css


demo: https://codepen.io/bnmghjtyu/pen/gOgeWov

<h1 class="fancy">My Cool Header</h1>
<ul>
  <li>12312</li>
    <li>12312</li>
    <li>12312</li>
    <li>12312</li>
    <li>12312</li>
</ul>

.fancy {
  background-image: paint(headerHighlight);
}

li {
   background-image: paint(boxbg);
   // --boxColor: hsla(55, 90%, 60%, 1.0);
}

li:nth-of-type(3n) {
   --boxColor: hsla(155, 90%, 60%, 1.0);
   --widthSubtractor: 20;
}

li:nth-of-type(3n+1) {
   --boxColor: hsla(255, 90%, 60%, 1.0);
   --widthSubtractor: 40;
}

// css 變數的預設值 --boxColor

CSS.registerProperty({
  name: "--boxColor",
  syntax: "<color>", //<color>, <number>
  inherits: false,
  initialValue: "red" // advice on syntax
});

class headerHighlight {
  static get contextOptions() {
    return { alpha: true };
  }
  // 開始畫圖，canvas syntax
  paint(ctx, size) {
    ctx.fillStyle = "hsla(55, 90%, 60%, 1.0)";
    ctx.fillRect(0, size.height / 3, size.width * 0.4, size.height * 0.6);
  }
}

class boxbg {
  static get contextOptions() {
    return { alpha: true };
  }
  // 定義 css 變數 get inputProperties
  static get inputProperties() {
    return ["--boxColor", "--widthSubtractor"];
  }
  paint(ctx, size, props) {
    ctx.fillStyle = props.get("--boxColor");
    ctx.fillRect(
      0,
      size.height / 3,
      size.width * 0.4 - props.get("--widthSubtractor"),
      size.height * 0.6
    );
  }
}

const worklet = `
if (typeof registerPaint !== "undefined") {
  registerPaint('headerHighlight', ${headerHighlight}),
  registerPaint('boxbg', ${boxbg})
}

`;

let workletBlob = URL.createObjectURL(
  new Blob([worklet], { type: "application/javascript" })
);

window.CSS.paintWorklet.addModule(workletBlob);

### reference
+ 掘金 https://juejin.cn/post/6950209377403928584?utm_source=gold_browser_extension#heading-9
+ mdn https://developer.mozilla.org/en-US/docs/Web/API/CSS/RegisterProperty