Visual Console Client: added a function to prefix css rules

Former-commit-id: a920845d44bc7b29899c1213347e0967c071e44d

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);
+  });
+});

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}`
+  ];
+}