I think “functional CSS” makes most sense when implemented without classes as you described. Tachyons and Basscss, are great for prototyping and the developer experience is what I found to be the real benefit. But I was always concerned about a lack of reusability when used with “pure CSS”. Slapping so many classes on an HTML element is cool for a quick demo, but once you need to reuse something or add breakpoint specific classes, you end up in a mess. Why are they still great? Because the implement a design system and limit the number of choices. Your approach deeply integrates this with React and makes is a fail-safe system. At the same time, the need to use React and the syntax hurts the simplicity a bit. But that’s a personal view. Eventually, I think the ultimate solution would be found in a user interface that makes working with those limitations visible and easy to use. Until designers work with the same system that developers implement, they will never work out completely. The system needs to work for everyone involved.
Again, thanks for the write up.