diff --git a/visual_console/src/lib.spec.ts b/visual_console/src/lib.spec.ts index 7a04049572..3670bc677f 100644 --- a/visual_console/src/lib.spec.ts +++ b/visual_console/src/lib.spec.ts @@ -1,4 +1,4 @@ -import { parseIntOr, padLeft } from "./lib"; +import { parseIntOr, padLeft, prefixedCssRules } from "./lib"; describe("function parseIntOr", () => { it("should retrieve valid int or a default value", () => { @@ -26,3 +26,15 @@ describe("function padLeft", () => { expect(padLeft("bar", 3, "foo")).toBe("bar"); }); }); + +describe("function prefixedCssRules", () => { + it("should add the prefixes to the rules", () => { + const rules = prefixedCssRules("transform", "rotate(0)"); + expect(rules).toContainEqual("transform: rotate(0);"); + expect(rules).toContainEqual("-webkit-transform: rotate(0);"); + expect(rules).toContainEqual("-moz-transform: rotate(0);"); + expect(rules).toContainEqual("-ms-transform: rotate(0);"); + expect(rules).toContainEqual("-o-transform: rotate(0);"); + expect(rules).toHaveLength(5); + }); +}); diff --git a/visual_console/src/lib.ts b/visual_console/src/lib.ts index da2ab44a08..fd5db5beec 100644 --- a/visual_console/src/lib.ts +++ b/visual_console/src/lib.ts @@ -210,3 +210,23 @@ export function linkedVCPropsDecoder( } : linkedLayoutBaseProps; } + +/** + * To get a CSS rule with the most used prefixes. + * @param ruleName Name of the CSS rule. + * @param ruleValue Value of the CSS rule. + * @return An array of rules with the prefixes applied. + */ +export function prefixedCssRules( + ruleName: string, + ruleValue: string +): string[] { + const rule = `${ruleName}: ${ruleValue};`; + return [ + `-webkit-${rule}`, + `-moz-${rule}`, + `-ms-${rule}`, + `-o-${rule}`, + `${rule}` + ]; +}