[Feature Request] Provide a sort mechanism to define render order of marks

[roch-numbered]

Hi,

Currently marks render alphabetically and I'm facing a use case where I need to have a mark render before another.

See this codesandbox.

Issue

I need elements with .border to be rendered as child of .color. Currently border mark renders first because of alphabetically sorting.

.color {
  color: red;
}

.border {
  border: 1px solid currentColor;
}

---

Proposal

Providing a marksOrder prop to force some marks to render in a specific order.
All other marks will render after.
Using '*' will define the position of all others marks ['*', 'myMark'].

const components = {
  marks: {
    color: ({children}) => <span className="color">{children}</span>,
    border: ({children}) => <span className="border">{children}</span>,
  },
  marksOrder: ['color', 'border'], // equivalent to `['color', 'border', '*']`
  // marksOrder: ['*', 'color', 'border'], // render all before those specifics marks
}

Thanks