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

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

Start by tracing how marks are sorted and rendered in the React components, using the App.js example in the linked CodeSandbox to reproduce the ordering problem. Implement the proposed marksOrder behavior, including the '*' position, and verify that specified marks render in order while unspecified marks follow the defined rule.