transformStyle API, for manipulating style files at load

Motivation

I make many Mapbox-based maps for various clients, and almost all of them use a combination of some basemap (either Mapbox or Maptiler) specified by a style file, plus a bunch of additional layers generated dynamically.

Also solves issues like #7251, and may help with some of the use cases of #4000 and #4225.

Design Alternatives

Currently it's kind of awkward to actually do this. There are two ways:

1. Manually fetch the style file, manipulate it, then instantiate the map with it.
2. Instantiate the map with a style URL, wait till it loads, then call addLayer() and addSource()

Method 1 is fine, but usually means adding a dependency like Axios just to do this one fetch, plus the annoying code. Also, it means you can't use nice mapbox:// style URLs, you need to work out the actual URL, and are dependent on that URL structure not changing.

Method 2 is mostly fine, but means the map takes longer to load, and it's easy to hit the usual problems with map.on("load", ...)

Design

Suggestion: a function like transformRequest() which is called after the style file is fetched, before it is loaded.

const map = new mapboxgl.Map({
    element: 'map',
    style: 'mapbox://mapbox.streets',
    transformStyle: s => {
        s.sources.towns = {
            type: 'geojson',
            url: 'towns.geojson',
        };
        s.layers.push({
            id: 'town-circles',
            type: 'circle',
            source: 'towns',
            color: 'red'
        });
    }
});

An alternative would be to explicitly support multiple style files that merged together:

const map = new mapboxgl.Map({
    element: 'map',
    style: [
        'mapbox://mapbox.streets',
        {
            version: 8,
            sources: {
                towns = {
                    type: 'geojson',
                    url: 'towns.geojson',
                }
            },
            layers: [
                {
                    id: 'town-circles',
                    type: 'circle',
                    source: 'towns',
                    color: 'red'
                }
            ]
        }
    ];
});

That seems a bit more complex in that the semantics of merging would have to be clearly defined (and does each style have to be independently valid? can one style reference layers from another?), and also more limited in what you could achieve.

Start with the Map constructor and the style-loading path, then compare the proposed transformStyle hook with the existing transformRequest API. Before implementation, clarify whether transformation occurs after fetching and before loading, and settle the alternative style-merging semantics. Done means an agreed API design that supports the motivating style and layer changes.