Support for within brackets [] styles

[theasteve]

I have the following class being deleted by purgecss:
[class*=btn-][aria-pressed=false]
So I added REGEX to try to avoid to delete the style class from the stylesheet by adding it to the whitelistPatterns

  .pipe(postcss([
    purgecss({
      content: [
        './views/**/*.twig',
        './views/**/*.vue'
      ],
      whitelistPatterns: [
        /** Patterns */
        /o-[\S]*/g, // matches object patterns
        /c-[\S]*/g, // matches component patterns
        /** Button Patterns */
        /btn[\S]*/g, // matches "btn{{ token }}"
        /\[(class..btn-)\]\[(aria-[a-z]{7}=([a-z]{5}|[a-z]{4}))\]/g,
      /**
       * Tailwindcss Extractor
       * @source https://tailwindcss.com/docs/controlling-file-size#setting-up-purge-css-manually
       */
      defaultExtractor: content => {
        // Capture as liberally as possible, including things like `h-(screen-1.5)`
        return content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || [];
      }
    }),

The REGEX pattern when tested on an online tool seems to work as shown in the image below:

So in theory the regex /\[(class..btn-)\]\[(aria-[a-z]{7}=([a-z]{5}|[a-z]{4}))\]/ should be preventing the class [class*=btn-][aria-pressed=false] to be deleted since is added to the whitelistPatterns. However, the class is still beind removed from the stylesheet.

I wonder if this is due to the [] square brackets being used, is there any guidance on how to avoid having that class being removed?

this is how is suppose to behave:

but it is being shown like this:

[webmaster1986]

@theasteve did you found any solution for this?

[theasteve]

@webmaster1986 yes, although not a great solutioninstead of adding the REGEX I just passed the classes. I also added the use of adding the child elements as well.

[jayvanhu]

Can you reopen the issue please? Even though you found a work around, the bug still exists, and I think it's important that the repo owners see that this is still an issue for people who do want to whitelist their attribute selectors.

[divinerites]

Exactly related with #303

[divinerites]

@webmaster1986 yes, although not a great solutioninstead of adding the REGEX I just passed the classes. I also added the use of adding the child elements as well.

Thanks for the tip. I was thinking about it, but i have so many classes (fonts) that's not really doable.

But at least the regexp could be working, if there is no global option for preserving this use case.

Stay strong.

[alireza-mh]

I can confirm I face the same issue migrate from purgecss-webpack-plugin 1.6.0 to 3.0.0.
adding Regex helped but it will reduce developer experience in my opinion.

[Ffloriel]

The original issue might be related to the selectors being missing in the content.

    <div class="btn-hello" aria-pressed="false">
        <h1>Hello</h1>
    </div>

[class*=btn-][aria-pressed=false] {
  width: 500px;
}

works as expected.

If anyone has an issue with attributes, could you go to #303 and link to a repo that reproduces the issue, it will help understand what is the issue