fix: avoid parsing animation: "none" to animation: "none" none.

[yisibl]

In the animation property, special handling is required when the values of both animation-name and animation-fill-mode are none.

Input

.foo {
    animation: "none";
}

.bar {
  animation: "none" 2s;
}

Before

.foo {
  animation: "none" none;
}

.bar {
  animation: "none" 2s none;
}

After

.foo {
  animation-name: "none";
}

.bar {
  animation: "none" 2s;
}

[devongovett]

Thanks. I updated the logic slightly in df280dc and b6eec64, so that we serialize the name as a quoted string within the animation shorthand whenever it conflicts with a keyword from one of the other properties.

[yisibl]

@devongovett Nice work, but what is the reason for serializing the animation-name to the end?

Also, we might want to consider browsers that don't support animation-name: <string>, like Chrome is implementing in: https://chromium-review.googlesource.com/c/chromium/src/+/3865188

[devongovett]

Moving to the end fixed tests like this:

animation: 2s alternate reverse

In this case, alternate is the direction, and reverse is the name. Without quotes, it's ambiguous so order is important.

Hadn't considered that strings were a new syntax though. Might need to update this...

[devongovett]

Updated: 6e47cdb