Recover reject css with webpack plugin

[Quidam74]

Proposed changes

Recover purged css in separete css file for webpack plugin.

see #816 and #763.

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

First time for me and my coworker (@Firologame) working on a public repo. Also discovering how webpack plugin work and first contact with typescript. We don't know how to create tests, but our developement didn't create any error on the existing tests. Please be gentle !

Feel free to upgrade those few changes and give us feedback, thank you for your attention !

[kevinramharak]

The rejectedCss feature is already being tested by its own tests. I'll take a look and test it out. You can add a case in this array. I'll take a shot at it if I find the time.

[kevinramharak]

You should also make sure the src/types/index.ts are updated correctly as these will provide proper code completion when using the plugin

Just add the option in the appropriate interface like:

export interface UserDefinedOptions {
 // ...
  output?: string;
  rejected?: boolean;
  rejectedCss?: boolean;
  // ...
}

[kevinramharak]

Not sure how complicated it would be, but I imagine it would be more webpack friendly if it uses their template string configuration options.

So it would allow for something like:

const options = {
  output: '[name].rejected.[ext]'
}

[kevinramharak]

Any reason why you are re-using the source variable? I would suggest something more in the original style like:

compilation.updateAsset(name, new ConcatSource(purged.css));
if (purged.rejectedCss !== undefined) {
  const rejectedName = path.dirname(name) + '/' + path.basename(name, '.css') + '-rejected' + path.extname(name);
  const source = new ConcatSource(purged.rejectedCss);
  if (compilation.getAsset(rejectedName) {
    compilation.emitAsset(rejectedName, source);  
  } else {
   compilation.updateAsset(rejectedName, source);
  }
}

Some minor nitpick would be to maintain consistent with use of semi-colons in the file.

[kevinramharak]

@Quidam74 I made a PR to your branch that adds a test case for this feature. I'm going to take a shot at using the TemplatePathPlugin API. If those 2 are merged I think it is good to go.

[kevinramharak]

@Quidam74 Added the webpack template string option in this PR. It would allow the following:

// Output the rejected css as `[base]-rejected.[ext]`
new PurgeCSSPlugin({
  rejectedCss: true,
});
// or use a custom output path
new PurgeCSSPlugin({
  rejectedCss: '[base].rejected.css',
});

[github-actions]

This PR is stale because it has been open 90 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[kevinramharak]

@Quidam74 Is there any interest in closing this issue? If so please review my PR to your fork so we can revisit this PR.

[Quidam74]

hi there, Sorry for the long time afk.

i don't understand what you want me to do, not used to work with forks.

You want me to merge your pull request on my fork ? in this place : Quidam74#2 ?

[kevinramharak]

@Quidam74 Well I just realized I made a PR on your main branch, and not the feature branch. I will have to change the branch and check the changes first. But after that yes, if you could merge my PR then this feature would be ready for purgecss

[kevinramharak]

@Quidam74 I checked it and it seems good. What it does is add test coverage and allows for naming the output file (with your foo.css -> foo-rejected.css as default). Once its merged I will check the conflicts and poke FullHuman to merge it into purgecss

[Quidam74]

Done ! thank you for your help !

[github-actions]

This PR is stale because it has been open 90 days with no activity. Remove stale label or comment or this will be closed in 5 days.