Description

keyframes with multiple properties are not inserted correctly.

Reproduction

https://codesandbox.io/s/otion-keyframes-multiple-properties-3d98i

Expected behavior

keyframes should output correct style rules like the following:

@keyframes _1sk3gu2 {0%{margin:5% 0;width:90%}50%{margin:18% 0;width:60%}100%{margin:5% 0;width:90%}}

Actual behavior

keyframes output is the following:

@keyframes _1sk3gu2 {0%{margin:5% 0width:90%}50%{margin:18% 0width:60%}100%{margin:5% 0width:90%}}

Notice the missing semicolons.

Environment

System:

• OS: macOS 10.15.7
• CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
• Memory: 398.66 MB / 16.00 GB
• Shell: 5.8 - /usr/local/bin/zsh

Binaries:

• Node: 14.16.1 - ~/.nvm/versions/node/v14.16.1/bin/node
• Yarn: 1.22.10 - /usr/local/bin/yarn
• npm: 6.14.12 - ~/.nvm/versions/node/v14.16.1/bin/npm
• Watchman: 2021.06.07.00 - /usr/local/bin/watchman

Browsers:

• Chrome: 91.0.4472.106
• Firefox: 85.0.2
• Safari: 14.0.1

npmPackages:

• otion: ^0.6.2 => 0.6.2