Autoreset didn't work after adding keyframes.

[stableowl]

I have some problem with big project. I use react, webpack, sass, postcss (postcss-autoreset and postcss-initial). All works fine. But after adding keyframes animation like this in my mixins sass file:

@keyframes mouse_down-animation {
   0% {
  opacity: 0;
   }
   50% {
  opacity: 1;
   }
   100% {
     opacity: 0;
   }
 }

All my css files haven't reset. It's not big problem, if this keyframes not work in this code. But i added this in one file and all my project got different small bugs, because some properties didn't reset. I hadn't any warrnings in webpack or something else. I was very lucky that saw catch this problem quickly, because some UI bugs be very diffucult to understanding. How can i solve this problem? Why after adding maybe wrong line in one file i get problem in all files (maybe this happen, because it is mixin file, and after import it in other files postcss-autoreset crash and not work after this line?). Could you get some recomendation about it? Thank you.

[maximkoretskiy]

Hi! and thank U for the issue! What version of postcss-autoreset do You use? It had the problem connected with keyframes before and it was fixed in version 2.0.1.

Please, let me know if the problem is present in the last version of the library.

[stableowl]

I use:

"postcss-autoreset": "^2.0.1",
"postcss-initial": "^2.0.0",
"postcss-cssnext": "^3.0.2",
"webpack": "3.8.1",
"node-sass": "^4.7.2"

Honeslty I never get this issue before. Can't help with this question.

[maximkoretskiy]

I'll try to investigate this problem a bit later. We will have a better chance of success if You provide a minimal project that reproduces the problem.

[stableowl]

In my working project i have many included sass files and react modules, but after some testing I think problem in crash after add keyframes animation in common files. But i haven't any warnings from webpack or postcss. I created repo with simple example. This example have working and no-working code and my webpack and postcss working configuration and minimal packages for working. I hope it will help you.

https://github.com/akalightowl/postcss-autoreset-issue

[maximkoretskiy]

Hi! I've found the problem. You use cssnext and it uses autoprefixer which adds prefixed versions of keyframes. autoreset does not filter a prefixed version of keyframes.

I see two solutions for Your case(First is recommended):

• move autoreset upper in postcss.config.js
• switch off autoprefixer in cssnext

I think we should not solve the problem of prefixes twice and add support of prefixed keyframes to autoreset.

BTW. cssnext also includes postcss-initial so You should not install additionally.

[stableowl]

Thank you for you awesome work. Honestly, my knowledge would not be enough to solve this problem. Future I'll try to be more careful with postcss plugins order:)