Implementation of output-unused-css

[kevinramharak]

Proposed changes

This PR implements an option to output the purged css alongside the regular output. This is a feature request mentioned in #131.

Types of changes

What types of changes does your code introduce?
Put an x in the boxes that apply

• Bugfix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)

Checklist

Put an x in the boxes that apply. You can also fill these out after creating the PR. If you're unsure about any of them, don't hesitate to ask. We're here to help! This is simply a reminder of what we are going to look for before merging your code.

• Lint and unit tests pass locally with my changes
• I have added tests that prove my fix is effective or that my feature works
• I have added necessary documentation (if appropriate)

Further comments

Old comments

• a few tests are failing because of Windows files paths. The tests fail because they check for / seperators instead of \\.
• other tests are performance related. Not sure what is causing them to fail sometimes. Maybe my laptop is just a bit to slow to hit the 5 second threshold everytime? These changes should only have a performace penalty if the option is actually being used, but since they are off by default I can't see how they could.
• some tests are failing on these type of lines, I really don't get how these changes could have impacted those.

+
    - /*!************************************************************************!*\
    + /*!************************************************************************!*\
    -   !*** css ../../../node_modules/css-loader/dist/cjs.js!./src/style.css ***!
    +   !*** css ../../../node_modules/css-loader/dist/cjs.js!./src/style.css ***!
    -   \************************************************************************/
    +   \************************************************************************/
    

• the last test that is failing seems to choke on a JSON.parse line. I'm checking to see if these changes have anything to do with it.

  ● PurgeCSS CLI › should print the correct output

    SyntaxError: Unexpected end of JSON input
        at JSON.parse (<anonymous>)

      13 |     );
      14 |     const result = JSON.parse(response.stdout);
    > 15 |     expect(result[0].css).toBe(".hello {\n  color: red;\n}\n");
         |                             ^
      16 |   });
      17 | });
      18 |

I'm looking for feedback on:

• What the CLI and programmatic API changes should look like. Currently its rejectedCss and --rejected-css
• What the tests should look like, I'm not sure what the edge cases are that tests should cover in regard to this feature.
• The performance hit that will occur when enabling this feature.

[kevinramharak]

Seems like the Github CI tests are passing. So I'm going to assume the failing tests are caused by running on a windows machine.

[kevinramharak]

I did a test on a project im working on:

# ls -l dist/*.css
105086 - dist/style.critical.css
606847 - dist/style.css
492651 - dist/style.rejected.css

These added up:

all               == 606_847
critical + rejected
105_086 + 492_651 == 597_737

So about 9000 bytes seem to be missing, but that seems pretty close.

[kevinramharak]

@Ffloriel Can this get a review? I added tests and updated the documentation. I would like to discuss the API, plugin integrations and if more tests are needed.

[Ffloriel]

Thanks for taking the time to take care of the most requested feature!
There's one little comment about the parent node not being in the rejected CSS but apart from that, LGTM!

[kevinramharak]

@Ffloriel Wups I see you already merged it but I found a flaw in my output generation. I was about to push a commit that fixes it. Thanks for the fast response tough

see: #799