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

Negative values in the animation shorthand are treated as identifiers #67

Closed
subzey opened this issue Nov 6, 2023 · 1 comment · Fixed by #68
Closed

Negative values in the animation shorthand are treated as identifiers #67

subzey opened this issue Nov 6, 2023 · 1 comment · Fixed by #68

Comments

@subzey
Copy link

subzey commented Nov 6, 2023

It looks like negative values like animation-delay in the animation shorthand are treated as identifiers.

Please try adding this into the index.test.js:

  {
    name: "handle negative animation-delay in animation shorthand",
    input: ".foo { animation: 1s -500ms; }",
    expected: ":local(.foo) { animation: 1s -500ms; }",
    // actual: ":local(.foo) { animation: 1s :local(-500ms); }"
  },

More info:
If the -500ms is written as -500.0ms, it works correctly and stays the same.

@subzey
Copy link
Author

subzey commented Nov 6, 2023

Looks like it can be fixed with a lookahead in the regexp:

     const validIdent =
-      /^-?([a-z\u0080-\uFFFF_]|(\\[^\r\n\f])|-)((\\[^\r\n\f])|[a-z\u0080-\uFFFF_0-9-])*$/i;
+      /^-?([a-z\u0080-\uFFFF_]|(\\[^\r\n\f])|-(?![0-9]))((\\[^\r\n\f])|[a-z\u0080-\uFFFF_0-9-])*$/i;

Tested on:

  {
    name: "handle negative animation-delay in animation shorthand",
    input: [
      ".foo { animation: 1s -500ms; }", // numeric
      ".foo { animation: 1s -42xyz; }", // unknown unit
      ".foo { animation: 1s -5.0s; }", // decimal
      ".foo { animation: 1s -9001; }", // unitless
      ".foo { animation: 1s -.0; }", // unitless
      ".foo { animation: 1s x-500; }", // identifier
    ].join('\n'),
    expected: [
      ":local(.foo) { animation: 1s -500ms; }",
      ":local(.foo) { animation: 1s -42xyz; }",
      ":local(.foo) { animation: 1s -5.0s; }",
      ":local(.foo) { animation: 1s -9001; }",
      ":local(.foo) { animation: 1s -.0; }",
      ":local(.foo) { animation: 1s :local(x-500); }",
    ].join('\n'),
  },

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