::v-deep code disappear

[vvvhung]

My ::v-deep code to style the child things was purged. Is there any solution to prevent that?

[TheAlexLichter]

Yes - probably whitelisting the selector. ☺️

[vvvhung]

I tried without success. It did not work with static generating. This is the scss:

::v-deep .card-hoder-name {
  .input-wrapper {
    border: 1px solid #6d64a4;
    position: relative;
    background: #494184;

    input {
      background-color: #352a7a00 !important;
      color: #ffffff !important;
    }
  }
}

I tried whitelisting like this:

purgeCSS: {
    whitelist: ['.card-hoder-name', 'card-hoder-name'],
  }

[TheAlexLichter]

Try adding ::v-deep as regex to the whitelist.

like: whitelist: [/::v-deep/]

[vvvhung]

still no luck
and I'm using Nuxt2

[TheAlexLichter]

In case these won't work, please try https://purgecss.com/safelisting.html#in-the-css-directly

If that doesn't work either, could you provide a minimal reproduction?
Happy to reopen the issue then

[vvvhung]

Still no luck. I created this repo as a minimal reproduction: https://github.com/vvvhung/purgecss-vdeep

[TheAlexLichter]

Could you try:

purgeCSS: {
    whitelistPatterns: [/::v-deep.*/]
  }

PS: In case you only want to purge Tailwind classes, then you can use the built-in purger of Tailwind ☺️
PPS: if you want to see support of the latest PurgeCSS version for Nuxt2 too, then please vote on #127 ☺️

[vvvhung]

�Yeah, it works. Thanks.
Sure.