Add SVG attributes

packages/emotion/test/no-babel/__snapshots__/index.test.js.snap

@@ -101,6 +101,7 @@ exports[`css function in expression 1`] = `
 
 <h1
   className="legacy__class glamor-0"
+  scale={2}
 >
   hello world
 </h1>
@@ -120,6 +121,7 @@ exports[`css glamorous style api & composition 1`] = `
 
 <h1
   className="glamor-0"
+  fontSize={20}
 >
   hello world
 </h1>
@@ -188,6 +190,7 @@ exports[`css object as style 1`] = `
 
 <h1
   className="glamor-0"
+  fontSize={20}
 >
   hello world
 </h1>

packages/react-emotion/src/props.js

@@ -191,7 +191,269 @@ const props = {
   // as an alternative to the sandbox attribute on IE<1true
   security: true,
   // IE-only attribute that controls focus behavior
-  unselectable: true
+  unselectable: true,
+  //
+  // SVG properties: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute
+  // The following "onX" events have been omitted:
+  //
+  //  onabort
+  //  onactivate
+  //  onbegin
+  //  onclick
+  //  onend
+  //  onerror
+  //  onfocusin
+  //  onfocusout
+  //  onload
+  //  onmousedown
+  //  onmousemove
+  //  onmouseout
+  //  onmouseover
+  //  onmouseup
+  //  onrepeat
+  //  onresize
+  //  onscroll
+  //  onunload
+  accentHeight: true,
+  accumulate: true,
+  additive: true,
+  alignmentBaseline: true,
+  allowReorder: true,
+  alphabetic: true,
+  amplitude: true,
+  arabicForm: true,
+  ascent: true,
+  attributeName: true,
+  attributeType: true,
+  autoReverse: true,
+  azimuth: true,
+  baseFrequency: true,
+  baselineShift: true,
+  baseProfile: true,
+  bbox: true,
+  begin: true,
+  bias: true,
+  by: true,
+  calcMode: true,
+  capHeight: true,
+  clip: true,
+  clipPathUnits: true,
+  clipPath: true,
+  clipRule: true,
+  colorInterpolation: true,
+  colorInterpolationFilters: true,
+  colorProfile: true,
+  colorRendering: true,
+  contentScriptType: true,
+  contentStyleType: true,
+  cursor: true,
+  cx: true,
+  cy: true,
+  d: true,
+  decelerate: true,
+  descent: true,
+  diffuseConstant: true,
+  direction: true,
+  display: true,
+  divisor: true,
+  dominantBaseline: true,
+  dur: true,
+  dx: true,
+  dy: true,
+  edgeMode: true,
+  elevation: true,
+  enableBackground: true,
+  end: true,
+  exponent: true,
+  externalResourcesRequired: true,
+  fill: true,
+  fillOpacity: true,
+  fillRule: true,
+  filter: true,
+  filterRes: true,
+  filterUnits: true,
+  floodColor: true,
+  floodOpacity: true,
+  focusable: true,
+  fontFamily: true,
+  fontSize: true,
+  fontSizeAdjust: true,
+  fontStretch: true,
+  fontStyle: true,
+  fontVariant: true,
+  fontWeight: true,
+  format: true,
+  from: true,
+  fr: true, // valid SVG element but React will ask for removal
+  fx: true,
+  fy: true,
+  g1: true,
+  g2: true,
+  glyphName: true,
+  glyphOrientationHorizontal: true,
+  glyphOrientationVertical: true,
+  glyphRef: true,
+  gradientTransform: true,
+  gradientUnits: true,
+  hanging: true,
+  horizAdvX: true,
+  horizOriginX: true,
+  ideographic: true,
+  imageRendering: true,
+  in: true,
+  in2: true,
+  intercept: true,
+  k: true,
+  k1: true,
+  k2: true,
+  k3: true,
+  k4: true,
+  kernelMatrix: true,
+  kernelUnitLength: true,
+  kerning: true,
+  keyPoints: true,
+  keySplines: true,
+  keyTimes: true,
+  lengthAdjust: true,
+  letterSpacing: true,
+  lightingColor: true,
+  limitingConeAngle: true,
+  local: true,
+  markerEnd: true,
+  markerMid: true,
+  markerStart: true,
+  markerHeight: true,
+  markerUnits: true,
+  markerWidth: true,
+  mask: true,
+  maskContentUnits: true,
+  maskUnits: true,
+  mathematical: true,
+  mode: true,
+  numOctaves: true,
+  offset: true,
+  opacity: true,
+  operator: true,
+  order: true,
+  orient: true,
+  orientation: true,
+  origin: true,
+  overflow: true,
+  overlinePosition: true,
+  overlineThickness: true,
+  panose1: true,
+  paintOrder: true,
+  pathLength: true,
+  patternContentUnits: true,
+  patternTransform: true,
+  patternUnits: true,
+  pointerEvents: true,
+  points: true,
+  pointsAtX: true,
+  pointsAtY: true,
+  pointsAtZ: true,
+  preserveAlpha: true,
+  preserveAspectRatio: true,
+  primitiveUnits: true,
+  r: true,
+  radius: true,
+  refX: true,
+  refY: true,
+  renderingIntent: true,
+  repeatCount: true,
+  repeatDur: true,
+  requiredExtensions: true,
+  requiredFeatures: true,
+  restart: true,
+  result: true,
+  rotate: true,
+  rx: true,
+  ry: true,
+  scale: true,
+  seed: true,
+  shapeRendering: true,
+  slope: true,
+  spacing: true,
+  specularConstant: true,
+  specularExponent: true,
+  speed: true,
+  spreadMethod: true,
+  startOffset: true,
+  stdDeviation: true,
+  stemh: true,
+  stemv: true,
+  stitchTiles: true,
+  stopColor: true,
+  stopOpacity: true,
+  strikethroughPosition: true,
+  strikethroughThickness: true,
+  string: true,
+  stroke: true,
+  strokeDasharray: true,
+  strokeDashoffset: true,
+  strokeLinecap: true,
+  strokeLinejoin: true,
+  strokeMiterlimit: true,
+  strokeOpacity: true,
+  strokeWidth: true,
+  surfaceScale: true,
+  systemLanguage: true,
+  tableValues: true,
+  targetX: true,
+  targetY: true,
+  textAnchor: true,
+  textDecoration: true,
+  textRendering: true,
+  textLength: true,
+  to: true,
+  transform: true,
+  u1: true,
+  u2: true,
+  underlinePosition: true,
+  underlineThickness: true,
+  unicode: true,
+  unicodeBidi: true,
+  unicodeRange: true,
+  unitsPerEm: true,
+  vAlphabetic: true,
+  vHanging: true,
+  vIdeographic: true,
+  vMathematical: true,
+  values: true,
+  vectorEffect: true,
+  version: true,
+  vertAdvY: true,
+  vertOriginX: true,
+  vertOriginY: true,
+  viewBox: true,
+  viewTarget: true,
+  visibility: true,
+  widths: true,
+  wordSpacing: true,
+  writingMode: true,
+  x: true,
+  xHeight: true,
+  x1: true,
+  x2: true,
+  xChannelSelector: true,
+  xlinkActuate: true,
+  xlinkArcrole: true,
+  xlinkHref: true,
+  xlinkRole: true,
+  xlinkShow: true,
+  xlinkTitle: true,
+  xlinkType: true,
+  xmlBase: true,
+  xmlns: true,
+  xmlnsXlink: true,
+  xmlLang: true,
+  xmlSpace: true,
+  y: true,
+  y1: true,
+  y2: true,
+  yChannelSelector: true,
+  z: true,
+  zoomAndPan: true
 }
 
 module.exports = `/^((${Object.keys(props).join(

packages/react-emotion/test/__snapshots__/index.test.js.snap

@@ -169,6 +169,7 @@ exports[`styled composition 2`] = `
 
 <h1
   className="legacy__class glamor-0"
+  scale={2}
 >
   hello world
 </h1>
@@ -248,6 +249,7 @@ exports[`styled composition with objects 1`] = `
 
 <h1
   className="legacy__class glamor-0"
+  scale={2}
 >
   hello world
 </h1>
@@ -261,6 +263,7 @@ exports[`styled function in expression 1`] = `
 
 <h1
   className="legacy__class glamor-0"
+  scale={2}
 >
   hello world
 </h1>
@@ -292,6 +295,7 @@ exports[`styled glamorous style api & composition 1`] = `
 
 <h1
   className="glamor-0"
+  fontSize={20}
 >
   hello world
 </h1>
@@ -526,6 +530,7 @@ exports[`styled object as style 1`] = `
 
 <h1
   className="glamor-0"
+  fontSize={20}
 >
   hello world
 </h1>
@@ -566,6 +571,7 @@ exports[`styled objects 1`] = `
 
 <h1
   className="glamor-0"
+  display="flex"
 >
   hello world
 </h1>

packages/react-emotion/test/auto-label/__snapshots__/auto-label.test.js.snap

@@ -11,6 +11,7 @@ exports[`styled with autoLabel composition 1`] = `
 
 <h1
   className="legacy__class glamor-0"
+  scale={2}
 >
   hello world
 </h1>
@@ -52,6 +53,7 @@ exports[`styled with autoLabel composition with objects 1`] = `
 
 <h1
   className="legacy__class glamor-0"
+  scale={2}
 >
   hello world
 </h1>