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)](https://chan.dev/posts/avo-a-bem-dialect-using-data-attributes/). ```css [data-avatar] { color: 'red'; } ``` ```jsx 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)](https://github.com/fb55/css-what#readme) For testing? [fb55/css-select: a CSS selector compiler & engine (github.com)](https://github.com/fb55/css-select) [servo/rust-cssparser: Rust implementation of CSS Syntax Level 3 (github.com)](https://github.com/servo/rust-cssparser)