Custom animations

[jondlm]

Rather than do a big explanation, I'll give you a new failing test case:

it('should work with custom animations', function() {
    return testPlugin('./test/fixtures/custom-animation.css', './test/fixtures/custom-animation.expected.css');
});

custom-animation.css

@keyframes my-animation {
    from {
        background-color: red;
    }

    to {
        background-color: yellow;
    }
}

.my-class {
    animation: my-animation 1s;
}

custom-animation.expected.css

@keyframes my-animation {
    from {
        background-color: red;
    }

    to {
        background-color: yellow;
    }
}

:root:root:root .my-class {
    animation: my-animation 1s;
}

I don't think it should be adding :root inside the @keyframe section.

Thanks! // Jon

[MadLittleMods]

@jondlm Adding the actual output would help me understand the issue easier.

Feel free to submit a PR

[laucheukhim]

@MadLittleMods This plugin wrongly prepends :root:root:root to animation declarations:

@keyframes my-animation {
    :root:root:root from {
        background-color: red;
    }

    :root:root:root to {
        background-color: yellow;
    }
}

This breaks all custom animations.

[MadLittleMods]

@laucheukhim 😢 Feel free to submit a PR to filter the rule if it is a @keyframes at-rule, https://github.com/MadLittleMods/postcss-increase-specificity/blob/cf8cad46f38942d5e5f4bc5e79338ef5c3975289/index.js#L21

[jondlm]

Looks like this was fixed with #14

[MadLittleMods]

Thanks for following up @jondlm. It looks like this issue wasn't closed because the PR was technically closed