Support of paints array

Motivation

Its a common requirement to add multiple layers to provide a stack of paints like a circle with a circle underneath (maybe a blurred circle to create a shadow effect.)

export const unclusteredPointLayerShadow = {
  id: "unclustered-point-shadow",
  type: "circle",
  filter: unclusteredPointFilter,
  paint: {
    "circle-radius": ["+", 10, ["to-number", ["get", "size"]]],
    "circle-color": "#000000",
    "circle-blur": 0.5,
  },
}

export const unclusteredPointLayer = {
  id: "unclustered-point",
  type: "circle",
  filter: unclusteredPointFilter,
  paint: {
    "circle-radius": { type: "identity", property: "size" },
    "circle-color": { type: "identity", property: "color" },
    "circle-stroke-width": { type: "identity", property: "strokeSize" },
    "circle-stroke-color": { type: "identity", property: "scolor" },
  },
}

Design Alternatives

For those paints where the filter conditions are the same, it makes sense to define them in an array instead of two different layers.

...
paints: [{
    "circle-radius": { type: "identity", property: "size" },
    "circle-color": { type: "identity", property: "color" },
    "circle-stroke-width": { type: "identity", property: "strokeSize" },
    "circle-stroke-color": { type: "identity", property: "scolor" },
  }, {
    "circle-radius": ["+", 10, ["to-number", ["get", "size"]]],
    "circle-color": "#000000",
    "circle-blur": 0.5,
}]

Its just an idea from my humble developer point of view, but maybe it could also be a performance improvement for the described cases.

Start by reviewing how mapbox-gl-js currently defines and processes a layer's paint property, then compare that with the proposed paints array examples in this issue. Determine the required style representation, rendering behavior, validation, and compatibility expectations before implementation; done means multiple paint layers work with the same filter and preserve existing single-paint behavior.