Vendor a glyphicons-only stylesheet instead of the full Bootstrap 3 base - #2257
Vendor a glyphicons-only stylesheet instead of the full Bootstrap 3 base#2257adarshsm wants to merge 2 commits into
Conversation
folium loaded netdna's bootstrap-glyphicons.css for the Awesome Markers glyphicon font. Despite its name that file is a full Bootstrap 3 base stylesheet: alongside the @font-face/.glyphicon rules it ships a normalize reset and global body styles (font, colour, background, margin). Loaded after Bootstrap 5, those body rules leaked onto the host page and, e.g., mispositioned user-added Bootstrap 5 components (python-visualizationGH-1820). Ship a vendored folium/templates/glyphicons.css with only the @font-face and .glyphicon/.glyphicon-* rules (fonts served from jsDelivr), referenced the same way as leaflet.awesome.rotate.css. Icon(prefix="glyphicon") markers keep working; the page-wide body/reset pollution is gone. Closes python-visualization#1820
…DN file The previous approach linked the vendored glyphicons stylesheet from `cdn.jsdelivr.net/gh/.../folium/templates/glyphicons.css`. That URL is served from the default branch, so it 404s until this PR is merged — a chicken-and-egg that fails the snapshot job (the `.glyphicon` rules never load) and, for a released package, would point at a mutable `main`. Inline the glyphicons-only rules into every `Map` as a `<style>` block, read once from the packaged `folium/templates/glyphicons.css`. Markers keep working with no external stylesheet request and no page-wide side effects, which is the python-visualizationGH-1820 goal; the glyph font still loads from the stable `bootstrap@3.3.7` npm files. Update the vendoring test to assert the rules are inlined rather than linked.
|
Pushed a follow-up that should fix the failing snapshot job. What was wrong: the vendored stylesheet was linked from Fix ( One thing that still needs doing: the 7 snapshot baselines legitimately change, because dropping the leaked Bootstrap body-reset alters rendering even for non-glyphicon maps (e.g. |
Closes #1820. Thanks @hansthen for the steer.
folium loads netdna's
bootstrap-glyphicons.cssfor the Awesome Markers glyphicon font. Despite the name, that file is a full Bootstrap 3 base stylesheet — alongside the@font-face/.glyphiconrules it ships a normalize reset and globalbodyrules (font, colour, background,margin). Loaded after Bootstrap 5, thosebodyrules leak onto the host page and, for example, mis-position a user-added Bootstrap 5 modal (the original report).This vendors
folium/templates/glyphicons.csscontaining only the@font-faceand.glyphicon/.glyphicon-*rules (fonts served from jsDelivr), referenced the same way as the existingleaflet.awesome.rotate.css.Icon(prefix="glyphicon")markers keep working exactly as before; the page-widebody/reset pollution is gone.Not a customer-facing change — glyphicon markers are unaffected; the only difference is that folium stops overriding the host page's
bodystyles. Added a regression test asserting the vendored file is used and the netdna URL is gone.