Components are sensitive to props order

[kettanaito]

What:

The library analyzes given props to all of exported components (Box, Composition) and performs two things:

1. Generates respective CSS string to pass to styled-components;
2. Generates areas component to render (in case of Composition).

When given a set of props in a random order (not logical order), the outcome of this analyzis is wrong:

<Composition
  areasLg="left right"
  areas="left"
  areasMd="left right"
/>

Atomic Layout won't be able to properly construct the areas components taking the scenario above. areas props would need to be listed in logical order: areas -> areasMd -> areasLg.

Why:

The issue is that prop analyzis takes the props in the order they were declared. There is also no reliable way to determine in which sequence the props must be sorted.

Expected behavior:

It would be more resilient to changes if the library could understand the logical flow of props on its own. This would support arbitrary props order and allow some corner-case dynamic props composition.

[kettanaito]

I open this issue because #226 will involve some changes in how CSS is generated based on the props. As a part of those changes it may be possible to group sibling prop aliases before generating the CSS. Approximately, it may look as:

interface PropAliasGroup {
  [propName: string]: Array<{
    record: AreaRecord
    value: any
  }>
}

Perhaps such grouping may help to understand in which logical order to sort the props.

[kettanaito]

Bear in mind this may not be an issue per say. Similar to how CSS rules are sensitive to the declaration order, having such order sensitivity for responsive props may give more control over how responsive behavior is applied. Since responsive props are parsed in the order they are declared, latest rules would have higher priority over the rules declared before.

[kettanaito]

I don't think this is an issue. Put in another way, it's virtually impossible to reliably sort a set of props by their breakpoint suffixes, because those may describe different media queries (how would one sort width/height query against min/max resolution one?).

I'm closing this, but feel free to voice your opinion.