Problem with @keyframes

[lucasmotta]

Source:

body {
  background: red;
}
@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

Result:

.my-prefix {
  background: red;
}
@keyframes fade-out {
  .my-prefix 0% {
    opacity: 1;
  }
  .my-prefix 100% {
    opacity: 0;
  }
}

For some reason this utility is also prefixing the "selectors" inside the @Keyframes. Is there a way to ignore when inside this block (@Keyframes)?

[jonathanong]

i haven't spent a bunch of time into this module. would you like to help maintain it? there might be better modules now.

[valentin-radulescu-hs]

This was fixed in #1, you can specify selectors that will be ignored using the exclude option

[valentin-radulescu-hs]

@lucasmotta FYI in 1.3.0 @keyframes selectors will get ignored by default, since there's no scenario where they'd need to be prefixed, AFAIK. Hope it helps 😄

[darkopetreski]

I am experiencing the same problem

Here is what I get

@-moz-keyframes shake{
    .the-app 59%{
        margin-left:0
    }
    .the-app 60%,.the-app 80%{
        margin-left:2px
    }
    .the-app 70%,.the-app 90%{
        margin-left:-2px
    }
}

I am using the newest version of postcss-prefix-selector

Here is a segment of the config

const prefixer = require('postcss-prefix-selector');
module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          prefixer({
            prefix: '.the-app',
            exclude: ['.the-app', '@keyframes', '@-moz-keyframes'],
            transform: function (prefix, selector, prefixedSelector) {
              if (selector === 'html') {
                return 'html' + prefix;
              } else {
                return prefixedSelector;
              }
            }
          })
        ]
      }
    }
  },

am I doing something wrong or the bug is still there ?

[RadValentin]

@darkopetreski Thanks for reporting this, I'll look into it tomorrow. It may be due to you using a vendor prefixed selector @-moz-keyframes, a use case that's never been covered by this plugin, it's expected that you'll use autoprefixer in conjunction with postcss. Still, I'm OK with dropping this expectation and making it work right :P

[darkopetreski]

@RadValentin I already have this css generated by other framework and I need to add a prefix in order to use it in an existing cms. Thank you for your effort :)

[RadValentin]

@darkopetreski I published a patch to fix the issue, all @keyframes rules should now be ignored by the prefixer. You can drop the '@keyframes', '@-moz-keyframes' part when passing the exclude option. Let me know how it works for you and if you encounter any other issues.