CSS attribute selectors are removed even when whitelisted

[Juneezee]

PurgeCSS version: 2.0.5

Code

style.css

.button[disabled] {
  opacity: .5;
}

postcss.config.js

const purgecss = require('@fullhuman/postcss-purgecss')

module.exports = {
  plugins: [
    purgecss({
      ...
      whitelistPatterns: [/.*\[disabled].*/],
    })
  ]
}

Expected Behavior

.button[disabled] is not removed

Actual Behavior

.button[disabled] is removed

[simllll]

I experience the same issue,
actually we upgraded to 2.x .. and I was missing some styles, the extractors are valid, and do actually work, so I tried whitelisting the css class explicity.. but style is still gone. Any idea what the root cause could be of this behaviour?

What I can say so far:

• it's not related to the extractors
• the name is also not the problem, in our case the removed css class is called "company-colors".

[simllll]

Tried to debug it,
I use scoped styles in vue, therefore my first issue was that "company-colors" as whitelist is not sufficient, as the css style gets rewritten to something like .company-colors[data-v-06391632].
So I thought using a whitelist pattern would "solve" it, but even with a white list pattern (e.g. whitelistPatterns: [/company-colors/]) the class gets removed.

So something seems to be wrong with handling selectors [ ]

[simllll]

One more update, it is defienitly related to d7f719d#diff-ab0e95239dfd1a3bb06b9cd803c90c43

e.g. d7f719d#diff-ab0e95239dfd1a3bb06b9cd803c90c43R539 this line confuses me a lot, and changing it back to return true does actually fix my issue (not the tests though).
But I can't really follow why this is a variable, and not just return true; if it is whistled, why would we check for anything else? Also if there is a match, the for loop could reset the flag in the next run back to false?

[simllll]

Alright, I got closer to the actual issue.

I found out that the attributes are now more important than before ;). I had following regex:

and assumed this was the correct behavior, but as the attributes are not handled separately, they were assumed that they do not exist.
Therefore chaging the regex to this:

solved a part of this deal (changing my regex from [A-z0-9-:\/]+ to [A-Za-z0-9-:\/]+.)

Unfortunately I couldn't find any way how to get the [data-v-*] attributes that nuxt / vue adds during build step, so my only idea to get things working again with scoped css is now to whitelist all data-vs:
whitelistPatterns: [/data-v-.*/],

Well it turned out, here is the conenction back to the original issue of this ticket. Whitelisting of attributes isn't currently working. I've created a PR #279 to fix this.
After this PR has landed, following should work (beware to NOT add [ ])
whitelist: ['disabled'],

regards and sorry for so many comments and text ;) thought maybe it helps to reproduce

[Juneezee]

The cause of this issue might be related to the fix introduced for #110

[Ffloriel]

PR for whitelisting of attributes has been merged #279