Use vanilla extract

[philschatz]

Try vanilla-extract because it does not need a custom babel config and seems like it's very similar to styleX.

With StyleX

I was curious about the sourcemaps-point-to-typescript claim in StyleX but I couldn't find it. I added a red background to a link and got this:

the source seems to point to layout.css (see debugger):

---

---

---

---

---

With Vanilla-extract

I get pretty much the same... not a great sourcemap experience but the styles have some typechecking

[chrisbendel]

this looks nice and simple - love it! Bonus points for the failed check actually showing up in the changed files diff too - thats a neat feature

[nathanstitt]

yes, I've used vanilla extract previously and liked it, the only thing I liked better about stylex is that stylex lets you define styles in the same file as the components, vanilla requires them to be in a *.styles.ts file. But I also suspect the same-file allowance is why you also have to tweak babel, so that it can extract them.

[philschatz]

RE Failed checks showing up in the diff: Yeah, there's a format for writing to stdout in CI jobs that GitHub will listen to and make those messages! https://github.com/openstax/ce/issues/2214#issuecomment-2085722332