fix rejected css output generation

[kevinramharak]

Proposed changes

Fix the output generation of rejected CSS

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

This is the remaining commit for #763 .

Copy from the comment there:

I added the following test case:

@media (max-width: 66666px) {
  .used-class, .unused-class {
    color: black;
  }
}

Which I was handling incorrectly.
What the rejected css 'algorithm' now does is:

• keep track of what selectors are removed from the rule
• if any selector is removed from the rule, clone the rule (or its parent if there exists one)
• replace the (deemed critical) selectors from the clone with the rejected selectors
• preserve that rule node as rejectedCss output
  So the above case would result in:

/* critical */
@media (max-width: 66666px) {
  .used-class {
    color: black;
  }
}
/* rejected */
@media (max-width: 66666px) {
  .unused-class {
    color: black;
  }
}

Purging the css is easier since you walk down the AST nodes and remove what you don't need. Keeping the rejected css is harder since once you have a node you need to preserve you then also have to preserve its ancestors to get the correct output.

Can you think of any examples where a rule node is nested more that just 1 parent deep? My understanding is that these are CSS nodes thus the selectors are flattened, but if there is a case like:

@media (min-width: 1px) {
  @media (max-width: 200px) {
    .selector {
      color: black;
    }
  }
}

I would have to add something that goes up the tree to preserve the correcct output

[Ffloriel]

LGTM! Can't think of a scenario with 2 levels of rules so I would expect this to be ok.