Chrome does not support `animation-name: <string>`

[yisibl]

Chrome does not currently support animation names with quotation marks, which is not compliant with the CSS specification.

<keyframes-name> = <custom-ident> | <string>

For example, the following two @keyframes rules have the same name, so the first will be ignored:
@keyframes foo { ... }
@keyframes "foo" { ... }

When quotes are encountered, I think Autoprefixer can automatically remove them to maintain compatibility across all browsers. Otherwise the generated styles won't work in Chrome.

animation: "foo" 2s both 30 does not work in Chrome.

parcel-css will remove quotes automatically, I think @devongovett might be able to share more experience.

Input

@keyframes "foo" {
  0% {
      color: pink;
  }
  to {
      color: skyblue;
  }
}

.test {
  animation: "foo" 2s both 30;
}

Output

/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.3.6,
* Autoprefixer: v10.3.1
* Browsers: > 0%
*/

@-webkit-keyframes "foo" {
  0% {
      color: pink;
  }
  to {
      color: skyblue;
  }
}

@-moz-keyframes "foo" {
  0% {
      color: pink;
  }
  to {
      color: skyblue;
  }
}

@-o-keyframes "foo" {
  0% {
      color: pink;
  }
  to {
      color: skyblue;
  }
}

@keyframes "foo" {
  0% {
      color: pink;
  }
  to {
      color: skyblue;
  }
}

.test {
  -webkit-animation: "foo" 2s both 30;
     -moz-animation: "foo" 2s both 30;
       -o-animation: "foo" 2s both 30;
          animation: "foo" 2s both 30;
}

Expected

Converting all <string> to <custom-ident> would greatly simplify the learning curve for CSS developers, and CSS linter should add a recommended rule to always use <custom-ident>.

@-webkit-keyframes foo {
  0% {
    color: pink;
  }

  to {
    color: #87ceeb;
  }
}

@-moz-keyframes foo {
  0% {
    color: pink;
  }

  to {
    color: #87ceeb;
  }
}

@-o-keyframes foo {
  0% {
    color: pink;
  }

  to {
    color: #87ceeb;
  }
}

@keyframes foo {
  0% {
    color: pink;
  }

  to {
    color: #87ceeb;
  }
}

.test {
  -webkit-animation: foo 2s 30 both;
  -moz-animation: foo 2s 30 both;
  -o-animation: foo 2s 30 both;
  animation: foo 2s 30 both;
}

If there are whitespace characters, they should be escaped after removing the quotation marks.

@keyframes "foo bar" {}

/* output */
@keyframes foo\ bar {}

[ai]

What is expected output for this example?

[yisibl]

@ai I have updated the expected and added the relevant background https://github.com/w3c/csswg-drafts/issues/118#issuecomment-1079828983.

[ai]

There is no prefixes in example in the link.

Can you post expected output here for the same browsers settings?

[yisibl]

Okay, I'm updated.

It needs to be set to an older version number here.

[ai]

Thanks!

I will create a task for junior developer since it is a great task for new contributor. I hope it will be fixed in a week or two.

[ai]

I just reviewed expected example again and found that we need to fix unprefixed version too.

This is against Autoprefixer rules. We are not polyfills.

Looks like it is a job for postcss-preset-env or Stylelint. Should we create an issue there?

[yisibl]

I got it. It seems that a compressor like cssnano would be more appropriate to handle this.

Then Stylelint adds a rule which is of course also good.

[ai]

Closing this issue since it should be done in another part of CSS tooling.

[yisibl]

Can Autoprefixer output a warning?

[ai]

Do we should some warning already?

I think warnings is for Stylelint 😅