4 ms·
I thought writing css in camel case and dealing with media queries in css-in-js was bad enough, but the boilerplate the CSS Paint API introduces just to access
by seumars 5y ago
I thought writing css in camel case and dealing with media queries in css-in-js was bad enough, but the boilerplate the CSS Paint API introduces just to access variables is absolutely atrocious:
<style>
textarea {
--checkerboard-spacing: 10;
--checkerboard-size: 32;
background-image: paint(checkerboard);
}
</style>
<script>
CSS.paintWorklet.addModule('checkerboard.js');
</script>
// checkerboard.js
class CheckerboardPainter {
paint(ctx, geom, properties) {
const size = parseInt(properties.get('--checkerboard-size').toString());
}
}
registerPaint('checkerboard', CheckerboardPainter);
More escape acts here: https://developers.google.com/web/updates/2018/01/paintapi#parameterizing_your_worklet https://developers.google.com/web/updates/2018/01/paintapi#p...
- msoad 5y agoThe proper way to read the value is actually a bit more code that `parseInt`. You should be using the Parser API's `CSSNumericValue.parse`. Realistically these are things that can make look nice by utility functions. The value of being able to paint using Canvas APIs off the main thread for super custom components is really high. In all other platforms like iOS and Qt you can take over painting if you want to. It's nice that we will be able to do this in web too.
- ihuman 5y agoFor that example, you can drop the toString(), because it's already a string. I think it's a string by default because that css variable is untyped. You can define the type with @property in css, or CSS.registerProperty in Javascript. Then you just need to call properties.get('--checkerboard-size').value, and drop the parseInt. Unfortunately, this solution also adds more boilerplate.
- seumars 5y agoThat’s the point