swc icon indicating copy to clipboard operation
swc copied to clipboard

[css-minifier] Correctly parsed and compressed `<keyframes-name> = <string>`

Open yisibl opened this issue 3 years ago • 2 comments

Describe the bug

Input

@keyframes "one two" {
  0% {
    left: 100px;
  }
}

@keyframes "none" {
  to {
    right: 100px;
  }
}

.foo {
  animation-name: "none", "unset", "one two";
}

Actual output

@keyframes one two is an invalid name and needs to be converted from a space to an escape character.

This WPT PR has more detailed test cases. https://github.com/web-platform-tests/wpt/pull/35903

@keyframes one two{0%{left:100px}}@keyframes"none"{to{right:100px}}.foo{animation-name:"none","unset","one two"}

Expected

@keyframes one\ two{0%{left:100px}}@keyframes"none"{to{right:100px}}.foo{animation-name:"none","unset",one\ two}

Version

0.125.9

yisibl avatar Sep 17 '22 07:09 yisibl

I have added more detailed test cases in https://github.com/parcel-bundler/lightningcss/pull/295 for reference.

yisibl avatar Sep 17 '22 15:09 yisibl

I've filed an issue in the spec about empty strings(@keyframes "" {} or @keyframes " " {}), which we can address later once the spec is clarified.

https://github.com/w3c/csswg-drafts/issues/7762

yisibl avatar Sep 19 '22 15:09 yisibl

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

swc-bot avatar Oct 23 '22 12:10 swc-bot