Short hand properties in dev mode

[vivek12345]

Thinking aloud here to get some ideas around this issue.
Currently when we set the value of a property as a short hand, for example:

borderRadius: 5px;

stitches would convert this into long hand properties like

border-top-left-radius:  5px;
border-top-right-radius:  5px;
border-bottom-left-radius:  5px;
border-bottom-right-radius:  5px;

Now this from atomic css perspective is considered to be good as @peduarte mentioned on the discord chat and helps us reduce specificity wars.

But from a developer(DX) perspective, this becomes problematic because now when I have to change these values instead of just changing one value of border-radius as we would usually do on our chrome inspector, now I would have to change it at 4 places.

This is time-consuming considering we are experimenting with what values work best. So changing them at 4 places can get painful.

It would be good from a DX perspective if we can figure out a solution to make changing short hand properties easier.

One solution that occurs to me is not splitting them into long hand properties unless the dev has specifically mentioned them as long-hand.

So we can may be replace the code here https://github.com/modulz/stitches/blob/canary/packages/core/src/shorthand-parser/index.ts#L330 with something like this

css.borderRadius = tokens.radii[value] || value;

[peduarte]

Thanks for raising this. I can see where you're coming from. Other people have raised similar debugging issues, that are caused as a result of atomic CSS.

I'd like to hear opinions on whether we're better off fixing this in code or introducing a Stitches dev tools?

[peduarte]

Stitches 0.1.0 is out and no longer produces atomic classes.