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

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

Closed
yisibl opened this issue Sep 17, 2022 · 1 comment
Closed

Comments

@yisibl
Copy link
Contributor

yisibl commented Sep 17, 2022

Spec

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

https://drafts.csswg.org/css-animations/#typedef-keyframes-name

Often <string> can be compressed to <custom-ident>, However, CSS-wide keywords and none must remain in quotation marks.

Input

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

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

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

Actual output

This WPT PR has more detailed test cases. web-platform-tests/wpt#35903

@keyframes ""{0%{left:100px}}@keyframes ""{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}
@yisibl
Copy link
Contributor Author

yisibl commented Sep 19, 2022

Thanks for the quick fix, but this issue is also expected to compress <string> and handle CSS-wide keywords correctly.

The ultimate goal is for esbuild to parse <keyframes-name> in its entirety.

I think @CGQAQ's PR #2556 is working on these issues and hopefully will reopen this issue.

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