Keyframes key point treated like class names

copycut commented 7 years ago

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

in combination with

require('postcss-autoreset')({
  reset: {
    boxSizing: 'border-box'
  }
}),

give after build:

0%,
100%,
.changePassword--1RUhp,
.changePassword--1RUhp .logo--MTlfo,
.title--1jDOc,
.form--3A4Qh,
.field--12t7f,
.label--3qBxI,
.input--oN5FM,
.link--3hkxd {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

Even with from, to, theses key names are taken like class name.

copycut commented 7 years ago

More details: The issues appear when my @keyframes rule is set in a common file call in another file through @import rule. ('postcss-partial-import' and 'postcss-each'). So I think we can close it.

maximkoretskiy commented 7 years ago

@copycut Hi! And thank U for suggestion. Are U able to make a PR for this issue?

copycut commented 7 years ago

I'm still trying to reproduce that in a isolate project. But if it can be fixed, yes.

maximkoretskiy commented 7 years ago

I'll try to check the bug today.

maximkoretskiy commented 7 years ago

@copycut hi! Just published fixed version to npm.

maximkoretskiy / postcss-autoreset

Keyframes key point treated like class names #22