[idea] Quick-and-dirty shorthand parsing idea about theme-ui HOT 2 CLOSED

Would love to support this sort of functionality! Generally, I'm a little bit skeptical of attempting to parse string values in CSS, but I think this proposal has some legs. To start this with a smaller scope, I'd suggest starting with only handling CSS properties that include colors, so that the logic for using keys from the theme.colors object to replace strings in places like border and boxShadow can be vetted before attempting other theme keys. I also suspect this would be the biggest win in the short term.

Other things to consider:

• Color objects can be nested, so this should support values like blue.dark.2
• A decent amount of work here would probably be adding some test fixtures to make sure this works with a lot of edge cases
• The relevant source code is mostly in @styled-system/css at the moment

Related #75

from theme-ui.

Thanks so much for the idea here. This feature would be awesome to have, but introduces a lot of complexity to the parsing & a lot of edge cases for various properties, which will almost certainly slow down Theme UI further. For now, we’re going to stick to encouraging functional values (e.g. (theme) => \3px solid ${theme.colors.blue}``) & keep this on the back burner for a potential Babel plugin.

from theme-ui.