Negative values in the animation shorthand are treated as identifiers

[subzey]

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]

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'),
  },