L.esri.Vector.vectorTileLayer: setting `style.layers` in the `style` property not working

[gavinr-maps]

Describe the bug

When setting the style layers in the following format, at esri-leaflet-vector v4.2.1 it does not work anymore:

L.esri.Vector.vectorTileLayer(
        myUrl,
        {
          style: function (style) {
            style.layers[0].paint = ...;
            return style;
          }
        }
);

Reproduction

1. Go to https://jsbin.com/xohapiz/2/edit?html,output which uses esri-leaflet-vector v4.2.0.

   • Expected: parcels have different colors: yellow, green, red, blue.
   • Actual: parcels have different colors: yellow, green, red, blue ✅

2. Go to https://jsbin.com/xohapiz/3/edit?html,output which uses esri-leaflet-vector v4.2.1.

   • Expected: parcels have different colors: yellow, green, red, blue.
   • Actual: parcels are not styled - all blue:

Logs

No response

System Info

leaflet@1.9.4
esri-leaflet@3.0.12
esri-leaflet-vector@4.2.1

Additional Information

v4.2.1 was an update to Maplibre v3, https://github.com/Esri/esri-leaflet-vector/pull/201 ... so that is most likely the cause of this. Here is the changelog for that: https://github.com/maplibre/maplibre-gl-js/releases/tag/v3.0.0

[gavinr-maps]

It seems like a workaround is to clone the JSON style object instead of just modifying it directly:

L.esri.Vector.vectorTileLayer(
        myUrl,
        {
          style: function (style) {
            const styleClone = JSON.parse(JSON.stringify(style)); // < ADDED LINE!
            styleClone.layers[0].paint = ...;
            return styleClone;
          }
        }
);

Here is a sample showing it working at esri-leaflet-vector@4.2.1: https://jsbin.com/xohapiz/7/edit?html,output

We think this may be an issue with maplibre-gl ... so we may need to log a bug over there if we can pull together a replicable test case. Until then, we will use this workaround.

[gavinr-maps]

I logged a bug for this in maplibre-gl-js: https://github.com/maplibre/maplibre-gl-js/issues/4472

[gavinr-maps]

A fix for this in maplibre-gl-js was merged: https://github.com/maplibre/maplibre-gl-js/pull/4488 .. so this should be fixed once that is released. I'll leave this open until I'm able to verify with the new version, then I'll close this item.

[gavinr-maps]

This is fixed in esri-leaflet-vector v4.2.5, see here: https://jsbin.com/pulocim/2/edit?html,output