Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

@-webkit-keyframes rules are partially removed #747

Closed
prymitive opened this issue Aug 6, 2021 · 1 comment
Closed

@-webkit-keyframes rules are partially removed #747

prymitive opened this issue Aug 6, 2021 · 1 comment
Labels

Comments

@prymitive
Copy link

Describe the bug

When processing a file with @-webkit-keyframes rule content of that rule gets removed, except for to statement.

To Reproduce
Steps to reproduce the behavior:

  1. Have this css file:
@-webkit-keyframes shake-slow {
  2% {
    -webkit-transform: translate(7px, 8px) rotate(3.5deg);
    transform: translate(7px, 8px) rotate(3.5deg);
  }
  98% {
    -webkit-transform: translate(-4px, -6px) rotate(-2.5deg);
    transform: translate(-4px, -6px) rotate(-2.5deg);
  }
  0%,
  to {
    -webkit-transform: translate(0) rotate(0);
    transform: translate(0) rotate(0);
  }
}
@keyframes shake-slow {
  2% {
    -webkit-transform: translate(7px, 8px) rotate(3.5deg);
    transform: translate(7px, 8px) rotate(3.5deg);
  }
  98% {
    -webkit-transform: translate(-4px, -6px) rotate(-2.5deg);
    transform: translate(-4px, -6px) rotate(-2.5deg);
  }
  0%,
  to {
    -webkit-transform: translate(0) rotate(0);
    transform: translate(0) rotate(0);
  }
}
  1. run purgecss purgecss --css file.css -con build/index.html --output file.css
  2. Output file:
@-webkit-keyframes shake-slow {
  
  to {
    -webkit-transform: translate(0) rotate(0);
    transform: translate(0) rotate(0);
  }
}
@keyframes shake-slow {
  2% {
    -webkit-transform: translate(7px, 8px) rotate(3.5deg);
    transform: translate(7px, 8px) rotate(3.5deg);
  }
  98% {
    -webkit-transform: translate(-4px, -6px) rotate(-2.5deg);
    transform: translate(-4px, -6px) rotate(-2.5deg);
  }
  0%,
  to {
    -webkit-transform: translate(0) rotate(0);
    transform: translate(0) rotate(0);
  }
}

Config file in current dir:

module.exports = {
  content: ["build/index.html", "build/static/js/*.js", "src/**/*.{ts,tsx}"],
  css: ["build/static/css/*.css"],
  output: "build/static/css",
  variables: true,
  fontFace: false,
  keyframes: false,
  safelist: {
    greedy: [/^components-/, /^firing-[0-9]$/, /^alert-history-loading-/],
  },
};

Expected behavior

Either @-webkit-keyframes should be remove entirely or not modified at all.

Screenshots

Environment (please complete the following information):

  • OS: [e.g. iOS]
  • Package purgecss
  • Version 4.0.3

Additional context

@AdrianBannister
Copy link
Contributor

Just posting our working here for anyone interested:

const purgecss = new Purgecss({
    content: [], // content
    css: [], // css
    safelist: [/\d{1,3}%/, 'from', 'to']
})

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants