Fix broken styling of map attributions

[emilykl]

Closeshttps://github.com/plotly/plotly-studio/issues/1175

Map attributions were styled incorrectly for plots using MapLibre (scattermap, densitymap, scattermap traces).

This was because a MapLibre stylesheet was missing due to being incorrectly handled in the bundling process.

The bug was introduced by the migration to esbuild (#6909) and present as of Plotly.js 3.0.0.

This PR fixes that issue by using a different tool to inline the missing CSS directly into the JS bundle.

Before fix:

After fix:

---

This commit demonstrates the resulting difference in the dist/plotly.js file (not included in this PR since we only update dist/ during the release process).

---

As an aside, this was not caught by the image tests because the Plotly.toImage() function for MapLibre plots calls map.getCanvas() which does not include the attribution, so Plotly.js manually adds the attribution to the generated image.

[camdecoster]

As we discussed, with this change, I think that this section can be removed:

plotly.js/tasks/util/bundle_wrapper.mjs

Lines 49 to 57 in 04441f9

	if(pathToBundle.endsWith('.js')){
	varlen=pathToBundle.length;
	varcssOutput=pathToBundle.slice(0,len-3)+'.css';
	// remove unwanted css file
	if(fs.existsSync(cssOutput)){
	fs.unlinkSync(cssOutput);
	}
	}

[emilykl]

@birkskyum What's your take on the best way to include the MapLibre stylesheet in the Plotly.js bundle? It turns out the CSS was never being correctly included following the switch to ESbuild, since we distribute only a single .js file for Plotly.js, but the CSS was being extracted into separate files which were simply ignored.

[camdecoster]

For future reference if we want to understand the history this issue:

• Remove inline styles that break plots in strict CSP setups #7109
• Plotly tries to access maplibre-gl.css #7139
• Inline maplibre css from node_modules #7140
• fix require path to resource in node_modules #7146
• https://github.com/maplibre/maplibre-gl-js

[emilykl]

Some notes on this change:

• This fix will likely not work in strict CSP environments which disallow inline CSS. However, it also doesn't make the status quo worse except for adding additional console noise. Those unable to use inline CSS may include the stylesheet https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.css in a way permitted by their CSP.

• It seems that some of the work done in Remove inline styles that break plots in strict CSP setups #7109 to make Plotly.js work better in strict CSP environments was undone by the migration to ESBuild. For example, we no longer produce a separate plotly.css file (see recent comments on that PR). We should revisit and fix when we have the bandwidth.

• This approach adds about 45 kB to the Plotly.js bundle size; ideally we should consider including only the styles which are strictly necessary for rendering Maplibre charts correctly in Plotly.js (which seems to be about 4 kB for the attributions). But, that adds additional complexity to the build process as we'd need to include a script to parse and subset the MapLibre CSS, so I'm choosing not to do it for now.

cc @gvwilson@camdecoster

[camdecoster]

Looks good. This will fix things for all but those that disallow inline CSS, and I don't think that's a big number of users. Could you please create an issue to follow up on this in the future and either trim the CSS or address the inline CSS?

[emilykl]

Issues opened:

It seems that some of the work done in #7109 to make Plotly.js work better in strict CSP environments was undone by the migration to ESBuild. For example, we no longer produce a separate plotly.css file (see recent comments on that PR). We should revisit and fix when we have the bandwidth.

#7543

This approach adds about 45 kB to the Plotly.js bundle size; ideally we should consider including only the styles which are strictly necessary for rendering Maplibre charts correctly in Plotly.js (which seems to be about 4 kB for the attributions). But, that adds additional complexity to the build process as we'd need to include a script to parse and subset the MapLibre CSS, so I'm choosing not to do it for now.

#7544

[gvwilson]

yay!