Merge pull request #364 from FormidableLabs/perf/disable-data-styles

remove style whitelist filter

src/victory-primitives/circle.js

@@ -1,7 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
 import Collection from "../victory-util/collection";
-import { sanitizeSvgStyle } from "../victory-util/style";
 
 export default class Circle extends React.Component {
   static propTypes = {
@@ -31,7 +30,7 @@ export default class Circle extends React.Component {
         className={className}
         clipPath={clipPath}
         transform={transform}
-        style={sanitizeSvgStyle(style)}
+        style={style}
         role={role || "presentation"}
         shapeRendering={shapeRendering || "auto"}
         vectorEffect="non-scaling-stroke"

src/victory-primitives/line.js

@@ -1,7 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
 import Collection from "../victory-util/collection";
-import { sanitizeSvgStyle } from "../victory-util/style";
 
 export default class Line extends React.Component {
   static propTypes = {
@@ -32,7 +31,7 @@ export default class Line extends React.Component {
         className={className}
         clipPath={clipPath}
         transform={transform}
-        style={sanitizeSvgStyle(style)}
+        style={style}
         role={role || "presentation"}
         shapeRendering={shapeRendering || "auto"}
         vectorEffect="non-scaling-stroke"

src/victory-primitives/path.js

@@ -1,7 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
 import Collection from "../victory-util/collection";
-import { sanitizeSvgStyle } from "../victory-util/style";
 
 export default class Path extends React.Component {
   static propTypes = {
@@ -27,7 +26,7 @@ export default class Path extends React.Component {
         transform={transform}
         className={className}
         clipPath={clipPath}
-        style={sanitizeSvgStyle(style)}
+        style={style}
         role={role || "presentation"}
         shapeRendering={shapeRendering || "auto"}
         {...events}

src/victory-primitives/rect.js

@@ -1,7 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
 import Collection from "../victory-util/collection";
-import { sanitizeSvgStyle } from "../victory-util/style";
 
 export default class Rect extends React.Component {
   static propTypes = {
@@ -34,7 +33,7 @@ export default class Rect extends React.Component {
         x={x} y={y} rx={rx} ry={ry} width={width} height={height}
         className={className}
         clipPath={clipPath}
-        style={sanitizeSvgStyle(style)}
+        style={style}
         transform={transform}
         role={role || "presentation"}
         shapeRendering={shapeRendering || "auto"}

src/victory-primitives/text.js

@@ -1,7 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
 import Collection from "../victory-util/collection";
-import { sanitizeSvgStyle } from "../victory-util/style";
 
 export default class Text extends React.Component {
   static propTypes = {
@@ -35,7 +34,7 @@ export default class Text extends React.Component {
     return (
       <text
         className={className} x={x} dx={dx} y={y} dy={dy}
-        transform={transform} style={sanitizeSvgStyle(style)}
+        transform={transform} style={style}
         {...events}
       >
         {title && <title>{title}</title>}

src/victory-primitives/tspan.js

@@ -1,7 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
 import Collection from "../victory-util/collection";
-import { sanitizeSvgStyle } from "../victory-util/style";
 
 export default class TSpan extends React.Component {
   static propTypes = {
@@ -28,7 +27,7 @@ export default class TSpan extends React.Component {
       <tspan
         x={x} y={y} dx={dx} dy={dy} textAnchor={textAnchor}
         className={className}
-        style={sanitizeSvgStyle(style)}
+        style={style}
         {...events}
       >
         {content}

src/victory-util/style.js

@@ -1,49 +1,3 @@
-import { pick } from "lodash";
-
-/**
- * Acceptable CSS/SVG style attributes
- * https://reactjs.org/docs/dom-elements.html#all-supported-html-attributes
- * non-style properties have been removed from this list
- */
-
-const svgStyleWhitelist = [
-  "clipPath",
-  "cursor",
-  "fill",
-  "fillOpacity",
-  "filter",
-  "fontFamily",
-  "fontSize",
-  "fontWeight",
-  "height",
-  "markerEnd",
-  "markerMid",
-  "markerStart",
-  "mask",
-  "opacity",
-  "pointerEvents",
-  "points",
-  "stroke",
-  "strokeDasharray",
-  "strokeDashoffset",
-  "strokeLinecap",
-  "strokeLinejoin",
-  "strokeOpacity",
-  "strokeWidth",
-  "textAnchor",
-  "textDecoration",
-  "transform"
-];
-
-/**
- * Given an object with CSS/SVG style attributes, return a new object containing
- * only keys that are also on our SVG style whitelist.
- * @param {Object} style An object of user-input style attributes.
- * @returns {Object} An object containing only valid style data.
- */
-export const sanitizeSvgStyle = function (style) {
-  return pick(style, svgStyleWhitelist);
-};
 
 /**
  * Given an object with CSS/SVG transform definitions, return the string value

test/client/spec/victory-util/style.spec.js

@@ -1,11 +1,4 @@
-import Style, { sanitizeSvgStyle } from "src/victory-util/style";
-
-describe("sanitizeSvgStyle", () => {
-  it("drop invalid svg attributes", () => {
-    const data = { tree: "blue", stroke: "#c43a31" };
-    expect(sanitizeSvgStyle(data)).to.deep.equal({ stroke: "#c43a31" });
-  });
-});
+import Style from "src/victory-util/style";
 
 describe("toTransformString", () => {
   it("returns an empty string if no transform definitions are given", () => {