Value between rounded brackets for nth-child and nth-of-type pseudo-class gets purged if it starts with 'n' or '-n'

[ZiggyV]

I came across an issue in a project of mine where the value of both nth-child and nth-of-type pseudo-classes are removed but only when the value between the rounded brackets starts with n, -n or -an, meaning these CSS rules are not valid and will not be shown:

Input

.selector:nth-child(n+6) {
    // my css here
}

.selector:nth-child(-n+6) {
    // my css here
}

.selector:nth-child(-3n+4) {
    // my css here
}

Output

.selector:nth-child {
    // my css here
}

I am using the gulp-purgecss plugin in this project and when I comment out the line where I use it, my output is as expected so I am fairly certain it is a purgecss issue.

To be sure I forked purgecss and added some tests for nth-child and nth-of-type that confirm it does not behave as expected.

Positive 'n' values

For now you can circumvent a part of the problem by adding a 1 before the n. This way purgecss behaves as expected and does not remove the value between the rounded brackets. This only works when using positive values though. -n and -an values still get removed.

Although you should be able to use :nth-child(n+b) or :nth-of-type(-n+b), since the csswg draft states the 1 may be omitted and that the value may be negative.

Desktop

• OS: Windows 10
• Node: v8.11.2
• Purgecss: v1.0.0

[levonlin]

I have met the same bug. When I use gulp-purgecss, the nth-child and nth-last-child pseudo-class in my css would miss parameters in the output file.

• os: macOSX 10.13.4
• node: v8.9.0
• gulp-purgecss: v1.0.0

[yoanmalie]

I'm currently trying gulp-purgecss and i have the same bug…
:nth-child(n+3) become :nth-child.

I can't change this selector to make it work, i have more others selectors with nth-child().

An example of a full selector i'm using is .posts-list__item:nth-child(n+3) { … } and i can't whitelist posts-list__item, that don't work and Purgecss keep it, with deleting the nth-child value :/

EDIT Workaround: If your value start by n you can make it work by writing 1n. So my selector become .posts-list__item:nth-child(1n+3) { … }.
Problem: css optimiser rewrite 1n by n…

It's always crash for value start by - as @ZiggyV said.

OS: macOS 10.12.6
Node: 9.4.0
gulp-purgecss: 1.0.0

[chood531]

@Ffloriel - thanks for the fix!

Is there a way for us to pull this in already, or do we need to wait for the next release?

[Ffloriel]

Release in 1.1.0
I'll now update the plugins to use the new version of purgecss.