Terminology
- styleName => referrs to Style Property names width, height, color, fontSize, etc...
- propKey => Referrs to the JSX property that gets passed down. w, h, sz, fs, bg
- propKey can return a keyArray like sz => [w, h]
- propValues can be of:
- type number w={200}
- type string h='auto'
- type array maxw={[200, 500]}
- type object fs={{ sm:200, lg: 400 }}
Thoughts
// size sets width: 200, height 200, // w: overrides width with media queries?
// media queries // start with large in web or start with smallest up to 578? // the most common way of defining responsivness stuff is to start with the samllest size, mobile // but I still want to define web // 2 ways to go about it // w={100} = default / no media query / xlg // w={[200, 400]} sm, and md sizes // I think overrides are nice // w={[200, 400]} => first is default, afterwards it starts from the bottom?
/*
given sz:200, w={50} w:[100, 200] For that i need is to parse each prop sz is keyArray gives me
{width: 200px } {height: 200px }
NEXT w is value array { width: 50 } { media-query:...: { width:100px }} { media-query:...: { width:200px }} { media-query:...: { maxHeight:100px }} { media-query:...: { maxHeight:200px }}
media queries will be combined, inside objects will merged
*/