Skip to content

feat: add injectCss option to opt out of global CSS - #307

Open
Hossein-Mirazimi wants to merge 2 commits into
nuxt-modules:mainfrom
Hossein-Mirazimi:feat/inject-css-option
Open

feat: add injectCss option to opt out of global CSS#307
Hossein-Mirazimi wants to merge 2 commits into
nuxt-modules:mainfrom
Hossein-Mirazimi:feat/inject-css-option

Conversation

@Hossein-Mirazimi

Copy link
Copy Markdown

🔗 Linked issue

resolves #306

❓ Type of change

  • 📖 Documentation (updates to the documentation or readme)
  • 🐞 Bug fix (a non-breaking change that fixes an issue)
  • 👌 Enhancement (improving an existing functionality)
  • ✨ New feature (a non-breaking change that adds functionality)
  • 🧹 Chore (updates to the build process or auxiliary tools and libraries)
  • ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

The module pushes leaflet/dist/leaflet.css into nuxt.options.css unconditionally, so
Leaflet's stylesheet ends up in the global entry CSS and is render-blocking on every
route. In an app where maps live on one or two pages, all the other pages still download
and parse it before they can paint, with no way to opt out.

This adds an injectCss module option, defaulting to true, so the current behaviour is
unchanged for existing users:

export default defineNuxtConfig({
  modules: ['@nuxtjs/leaflet'],
  leaflet: {
    injectCss: false
  }
})

With injectCss: false, the module ships no stylesheet and you import it yourself in the
components that render a map, letting Vite bundle it only into the chunks that need it:

import 'leaflet/dist/leaflet.css'

The option also gates the two leaflet.markercluster stylesheets, so injectCss: false
consistently means "the module injects no global CSS" — otherwise the option would have no
effect for markercluster users. The guide documents the manual imports for that case.

Documentation: adds a "Performance" page to the Guide section
(docs/guide/performance.md, linked in the VitePress sidebar) explaining why the global
injection is render-blocking, how to opt out, the caveat that you then own the imports, and
the plugin stylesheets.

Tests: adds a no-inject-css fixture (injectCss: false, with the app importing the
stylesheet itself) and test/no-inject-css.test.ts, which renders the page and asserts
leaflet/dist/leaflet.css is absent from nuxt.options.css.

@netlify

netlify Bot commented Aug 31, 2026

Copy link
Copy Markdown

Deploy Preview for nuxt-leaflet ready!

Name Link
🔨 Latest commit 463f671
🔍 Latest deploy log https://app.netlify.com/projects/nuxt-leaflet/deploys/6a95ad6cc557f5000817e824
😎 Deploy Preview https://deploy-preview-307--nuxt-leaflet.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

leaflet.css is pushed into nuxt.options.css unconditionally, shipping map CSS globally on every route with no opt-out

1 participant