purgecss-from-pug doesn't handle class attribute with multiple values correctly

[Nauja]

Describe the bug

Unlike purgecss-from-html, purgecss-from-pug treat a class attribute containing multiple values as a single value.

For example if you have a div with a single class:

div(class="one-class")

Then "one-class" is correctly extracted.

But if you have a div with multiple classes:

div(class="first-class second-class")

Then "first-class second-class" is extracted instead of ["first-class", "second-class"]

To Reproduce

Modify packages/purgecss-from-pug/__tests__/data.ts to have a div with multiple classes:

export const TEST_1_CONTENT = `
html
  head
    title It's just a test
  body
    div(class="test-container") Well
    div(class="test-footer" id="an-id") I see a div
    a(class="a-link" id="a-link" href="#") and a link
+   div(class="first-class second-class") This div has two classes
    input#blo.enabled(type="text" disabled)
`;

export const TEST_1_TAG = [
  "html",
  "head",
  "title",
  "body",
  "div",
  "a",
  "input",
];

export const TEST_1_CLASS = [
  "test-container",
  "test-footer",
  "a-link",
+ "first-class",
+ "second-class",
  "enabled",
];

Running npm run test you get:

 FAIL  packages/purgecss-from-pug/__tests__/index.test.ts
  ● purgePug › from a normal html document › finds classes selectors

    expect(received).toBe(expected) // Object.is equality

    Expected: true
    Received: false

      15 |       const received = purgePug(TEST_1_CONTENT);
      16 |       for (const item of TEST_1_CLASS) {
    > 17 |         expect(received.includes(item)).toBe(true);
         |                                         ^
      18 |       }
      19 |     });
      20 |

      at Object.<anonymous> (packages/purgecss-from-pug/__tests__/index.test.ts:17:41)

  ● purgePug › from a normal html document › finds all selectors

    expect(received).toBe(expected) // Object.is equality

    Expected: true
    Received: false

      30 |       const selectors = [...TEST_1_TAG, ...TEST_1_CLASS, ...TEST_1_ID];
      31 |       for (const item of selectors) {
    > 32 |         expect(received.includes(item)).toBe(true);
         |                                         ^
      33 |       }
      34 |     });
      35 |   });

      at Object.<anonymous> (packages/purgecss-from-pug/__tests__/index.test.ts:32:41)

Now change:

export const TEST_1_CONTENT = `
html
  head
    title It's just a test
  body
    div(class="test-container") Well
    div(class="test-footer" id="an-id") I see a div
    a(class="a-link" id="a-link" href="#") and a link
    div(class="first-class second-class") This div has two classes
    input#blo.enabled(type="text" disabled)
`;

export const TEST_1_TAG = [
  "html",
  "head",
  "title",
  "body",
  "div",
  "a",
  "input",
];

export const TEST_1_CLASS = [
  "test-container",
  "test-footer",
  "a-link",
- "first-class",
- "second-class",
+ "first-class second-class",
  "enabled",
];

And you get:

 PASS  packages/purgecss-from-pug/__tests__/index.test.ts

Expected behavior

purgecss-from-pug should handle class attributes with multiple values correctly as purgecss-from-html does.

Environment (please complete the following information):

• OS: Windows 10
• Package purgecss-from-pug
• Version 4.0.3