search

jackall3n / postcss-scope

🔭 A small plugin to allow you to scope your css with a custom selector
5 stars 2 forks source link

Keyframes get incorrectly scoped #21

Open maxemilian-jco opened 1 month ago

maxemilian-jco commented 1 month ago

Hey, I have an issue with this plugin, specifically when using animations/keyframes, and also Tailwinds animations.

With the following code (copied from Tailwind to reproduce issue):

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}
.animate-spin {
    animation: spin 1s linear infinite;
}

The output becomes (example scope: '.test'):

@keyframes spin {
    .test to {
        transform: rotate(360deg);
    }
}
.test .animate-spin {
    animation: spin 1s linear infinite;
}

If you notice the .test before the to in the keyframe, this unfortunately breaks the animation.

I can get around this by copying the CSS to a new file and ignoring that file. However, it is not an elegant solution when dealing with external CSS libraries such as Tailwind.

maxemilian-jco commented 1 month ago

Just saw that this issue has already been fixed by #9, is there any chance that a new version could be released with that?