diff --git a/packages/otion/src/createInstance.test.ts b/packages/otion/src/createInstance.test.ts index d570bf8..62c3778 100644 --- a/packages/otion/src/createInstance.test.ts +++ b/packages/otion/src/createInstance.test.ts @@ -1,11 +1,13 @@ import { css as CSSData } from "mdn-data"; -import { PRECEDENCE_GROUP_COUNT } from "./createInstance"; +import { createInstance, PRECEDENCE_GROUP_COUNT } from "./createInstance"; import { PRECEDENCES_BY_PSEUDO_CLASS } from "./pseudos"; // eslint-disable-next-line @typescript-eslint/no-explicit-any const cssProperties = Object.entries(CSSData.properties); +jest.mock("@emotion/hash", () => () => `1f0cb2`); + test("number of precedence groups is correct", () => { const pseudoClassPrecedenceGroupCount = new Set( PRECEDENCES_BY_PSEUDO_CLASS.values(), @@ -34,3 +36,20 @@ test("number of precedence groups is correct", () => { conditionalPrecedenceGroupExistenceMultiplier, ); }); + +test.each([ + ["single", { margin: "50%" }, "{margin:50%}"], + ["multiple", { margin: "50%", width: "50%" }, "{margin:50%;width:50%}"], +])("keyframes works correctly with %s properties", (_, rules, output) => { + const defaultInstance = createInstance(); + const injector = { insert: jest.fn() }; + + defaultInstance.setup({ injector }); + + defaultInstance.keyframes({ "0%": rules }).toString(); + + expect(injector.insert).toHaveBeenCalledWith( + `@keyframes _1f0cb2{0%${output}}`, + 0, + ); +}); diff --git a/packages/otion/src/createInstance.ts b/packages/otion/src/createInstance.ts index de105ec..1d5ea9c 100644 --- a/packages/otion/src/createInstance.ts +++ b/packages/otion/src/createInstance.ts @@ -386,10 +386,11 @@ export function createInstance(): OtionInstance { if (value != null) { const property = normalizeProperty(key); - cssText += serializeDeclarationList(property, value); + cssText += `;${serializeDeclarationList(property, value)}`; } } + cssText = cssText.replace("{;", "{"); cssText += "}"; }