From 537ab02cd60dee6fe81ce314eb58d623be9c184f Mon Sep 17 00:00:00 2001 From: Neil Kistner Date: Fri, 18 Jun 2021 14:17:32 -0600 Subject: [PATCH 1/3] test(otion): add failing test case for multiple keyframe properties --- packages/otion/src/createInstance.test.ts | 21 ++++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) 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, + ); +}); From f85872c1612951fdc463dc661eaf44c10f32e430 Mon Sep 17 00:00:00 2001 From: Neil Kistner Date: Fri, 18 Jun 2021 14:20:53 -0600 Subject: [PATCH 2/3] fix(otion): properly insert keyframe rule with multiple properties --- packages/otion/src/createInstance.ts | 24 ++++++++++++++---------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/packages/otion/src/createInstance.ts b/packages/otion/src/createInstance.ts index de105ec..aabb2dc 100644 --- a/packages/otion/src/createInstance.ts +++ b/packages/otion/src/createInstance.ts @@ -379,16 +379,20 @@ export function createInstance(): OtionInstance { const declarations = rules[time as keyof typeof rules]; - // TODO: Replace var with const once it minifies equivalently - // eslint-disable-next-line guard-for-in, no-restricted-syntax, no-var, vars-on-top - for (var key in declarations) { - const value = declarations[key as keyof typeof declarations]; - - if (value != null) { - const property = normalizeProperty(key); - cssText += serializeDeclarationList(property, value); - } - } + cssText += Object.keys(declarations ?? {}) + .map((key) => { + const value = + declarations?.[key as keyof typeof declarations]; + + if (value != null) { + const property = normalizeProperty(key); + return serializeDeclarationList(property, value); + } + + return null; + }) + .filter(Boolean) + .join(";"); cssText += "}"; } From e0e6b522f5e375408f6959351b7c600bdb3379c0 Mon Sep 17 00:00:00 2001 From: Neil Kistner Date: Fri, 18 Jun 2021 22:22:19 -0600 Subject: [PATCH 3/3] refactor(otion): revert to for..in implementation --- packages/otion/src/createInstance.ts | 25 +++++++++++-------------- 1 file changed, 11 insertions(+), 14 deletions(-) diff --git a/packages/otion/src/createInstance.ts b/packages/otion/src/createInstance.ts index aabb2dc..1d5ea9c 100644 --- a/packages/otion/src/createInstance.ts +++ b/packages/otion/src/createInstance.ts @@ -379,21 +379,18 @@ export function createInstance(): OtionInstance { const declarations = rules[time as keyof typeof rules]; - cssText += Object.keys(declarations ?? {}) - .map((key) => { - const value = - declarations?.[key as keyof typeof declarations]; - - if (value != null) { - const property = normalizeProperty(key); - return serializeDeclarationList(property, value); - } - - return null; - }) - .filter(Boolean) - .join(";"); + // TODO: Replace var with const once it minifies equivalently + // eslint-disable-next-line guard-for-in, no-restricted-syntax, no-var, vars-on-top + for (var key in declarations) { + const value = declarations[key as keyof typeof declarations]; + + if (value != null) { + const property = normalizeProperty(key); + cssText += `;${serializeDeclarationList(property, value)}`; + } + } + cssText = cssText.replace("{;", "{"); cssText += "}"; }