← 🌱 garden

I'm fairly certain this has been attempted, and I've seen it, but am having a difficult time tracking anything down.

tl;dr given CSS as an input, output components – initially React.

Bonus points if it can be driven by AVO 🥑 — A BEM Dialect Using Data Attributes (chan.dev).

[data-avatar] {
  color: 'red';
const Avatar = ({ as: Element, children, ...props }) => {
  return children ? <Element {...props}>{children}</Element> : <Element {...props} />

Potential parsers: fb55/css-what: a CSS selector parser (github.com) For testing? fb55/css-select: a CSS selector compiler & engine (github.com) servo/rust-cssparser: Rust implementation of CSS Syntax Level 3 (github.com)