3rd library css gets removed

[mapsgeek]

I'm importing mapbox-gl.js library into a vue component using

<style>
@import "mapbox-gl/dist/mapbox-gl.css";
#map {
  height: 500px;
  width: 500px;
}
</style>

as the library needs all its css stuff to render the map and controls right, purgecss removes all of them, i tried to use whilelist with no luck preventing this from happening as so:

in nuxt.config.js

 purgeCSS: {
    whitelist: [
      'swiper-container',
      'mapbox-gl',
      'mapboxgl-canvas-container',
      'mapboxgl'
    ],
    whitelistPatterns: [/mapboxgl\-/, /map\-/]
  },

i tried to use / purgecss ignore / in the css file itself but also got no luck, in production no css for the library is available, any suggestions ? thanks

Environment:

    "nuxt": "^2.9.2",
    "nuxt-purgecss": "^0.2.1",

[Scaalees]

I had the same issue whitelisting the class didn't do anything for me.

I've ended up using whitelistPatterns and selecting all with regex - .*

purgeCSS: {
        whitelistPatterns: [/mgl-map-wrapper.*/, /mapboxgl.*/]
}

Hope this helps.

[mapsgeek]

@Scaalees thank you, i ended up removing purgecss completely since it keeps interfering with other UI libraries like Ant Design and cause breakings in its stylings for components.