feat(jsx): support style tag

Refers gregberge/svgr#7

Author: gregberge

packages/h2x-plugin-jsx/src/generator.js

@@ -1,7 +1,13 @@
+import stringToObjectStyle from './stringToObjectStyle'
+
 const formatAttribute = jsxAttribute => {
   if (jsxAttribute.spread) return `{...${jsxAttribute.name}}`
   if (jsxAttribute.litteral)
     return `${jsxAttribute.name}={${jsxAttribute.value}}`
+  if (jsxAttribute.name === 'style')
+    return `${jsxAttribute.name}={${JSON.stringify(
+      stringToObjectStyle(jsxAttribute.value),
+    )}}`
   return `${jsxAttribute.name}="${jsxAttribute.value}"`
 }
 

packages/h2x-plugin-jsx/src/index.test.js

@@ -55,7 +55,7 @@ describe('transformJsx', () => {
 
     expect(transform(code, { plugins: [transformJsx] }).trim())
       .toBe(`{/*?xml version="1.0" encoding="UTF-8"?*/}
-<svg width="88px" height="88px" viewBox="0 0 88 88" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
+<svg width="88px" height="88px" viewBox="0 0 88 88" version={1.1} xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
   {/*Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch*/}
   <title>
     Dismiss
@@ -70,18 +70,25 @@ describe('transformJsx', () => {
     </linearGradient>
     <filter id="b" width="157.1%" height="180%" x="-28.6%" y="-20%" filterUnits="objectBoundingBox">
       <feOffset dy={1} in="SourceAlpha" result="shadowOffsetOuter1" />
-      <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation=".5" />
+      <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation={.5} />
       <feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.2 0" />
     </filter>
   </defs>
   <g id="Blocks" stroke="none" strokeWidth={1} fill="none" fillRule="evenodd" strokeLinecap="square">
     <g id="Dismiss" stroke="#063855" strokeWidth={2}>
       <path d="M51,37 L37,51" id="Shape" />
       <path d="M51,51 L37,37" id="Shape" />
-      <circle cx="43.5" cy="42.5" r="31.5" fill="url(#a)" opacity=".1" />
-      <circle fill="#f00" cx="43.5" cy="42.5" r="21.5" filter="url(#b)" opacity={1} />
+      <circle cx={43.5} cy={42.5} r={31.5} fill="url(#a)" opacity={.1} />
+      <circle fill="#f00" cx={43.5} cy={42.5} r={21.5} filter="url(#b)" opacity={1} />
     </g>
   </g>
 </svg>`)
   })
+
+  it('should handle convert style attribute to object', () => {
+    const code = `<div id="foo" style="font-size: 10px; line-height: 1.2;"></div>`
+    expect(transform(code, { plugins: [transformJsx] }).trim()).toBe(
+      `<div id="foo" style={{"fontSize":10,"lineHeight":1.2}} />`,
+    )
+  })
 })

packages/h2x-plugin-jsx/src/stringToObjectStyle.js

@@ -0,0 +1,60 @@
+// Inspired by https://github.com/reactjs/react-magic/blob/master/src/htmltojsx.js
+import { hyphenToCamelCase, isNumeric, trimEnd } from './util'
+
+/**
+ * Determines if the CSS value can be converted from a
+ * 'px' suffixed string to a numeric value.
+ *
+ * @param {string} value CSS property value
+ * @return {boolean}
+ */
+function isConvertiblePixelValue(value) {
+  return /^\d+px$/.test(value)
+}
+
+/**
+ * Format style key into JSX style object key.
+ *
+ * @param {string} key
+ * @return {string}
+ */
+function formatKey(key) {
+  key = key.toLowerCase()
+  // Don't capitalize -ms- prefix
+  if (/^-ms-/.test(key)) key = key.substr(1)
+  return hyphenToCamelCase(key)
+}
+
+/**
+ * Format style value into JSX style object value.
+ *
+ * @param {string} key
+ * @return {string}
+ */
+function formatValue(value) {
+  if (isNumeric(value)) return Number(value)
+  if (isConvertiblePixelValue(value)) return Number(trimEnd(value, 'px'))
+  return value
+}
+
+/**
+ * Handle parsing of inline styles.
+ *
+ * @param {string} rawStyle
+ * @returns {object}
+ */
+function stringToObjectStyle(rawStyle) {
+  const entries = rawStyle.split(';')
+  return entries.reduce((styles, style) => {
+    style = style.trim()
+    const firstColon = style.indexOf(':')
+    const value = style.substr(firstColon + 1).trim()
+    const key = style.substr(0, firstColon)
+    if (key !== '') {
+      styles[formatKey(key)] = formatValue(value)
+    }
+    return styles
+  }, {})
+}
+
+export default stringToObjectStyle

packages/h2x-plugin-jsx/src/stringToObjectStyle.test.js

@@ -0,0 +1,43 @@
+import stringToObjectStyle from './stringToObjectStyle'
+
+describe('stringToObjectStyle', () => {
+  it('should handle single line', () => {
+    expect(stringToObjectStyle('display: none')).toEqual({
+      display: 'none',
+    })
+  })
+
+  it('should handle multi lines', () => {
+    expect(
+      stringToObjectStyle(`
+      display: none;
+      margin: 0 0 20px;
+    `),
+    ).toEqual({
+      display: 'none',
+      margin: '0 0 20px',
+    })
+  })
+
+  it('should convert pixel value into number', () => {
+    expect(stringToObjectStyle('margin: 20px')).toEqual({ margin: 20 })
+  })
+
+  it('should keep numeric values', () => {
+    expect(stringToObjectStyle('line-height: 1.2')).toEqual({ lineHeight: 1.2 })
+  })
+
+  it('should handle prefixes', () => {
+    expect(
+      stringToObjectStyle(`
+      -webkit-transition: all;
+      -mz-transition: all;
+      -ms-transition: all;
+    `),
+    ).toEqual({
+      WebkitTransition: 'all',
+      MzTransition: 'all',
+      msTransition: 'all',
+    })
+  })
+})

packages/h2x-plugin-jsx/src/util.js

@@ -0,0 +1,33 @@
+/**
+ * Determines if the specified string consists entirely of numeric characters.
+ *
+ * @param {*} [value]
+ * @returns {boolean}
+ */
+export function isNumeric(value) {
+  return !isNaN(value - parseFloat(value))
+}
+
+/**
+ * Convert a hyphenated string to camelCase.
+ *
+ * @param {string} string
+ * @returns {string}
+ */
+export function hyphenToCamelCase(string) {
+  return string.replace(/-(.)/g, (match, chr) => chr.toUpperCase())
+}
+
+/**
+ * Trim the specified substring off the string. If the string does not end
+ * with the specified substring, this is a no-op.
+ *
+ * @param {string} haystack String to search in
+ * @param {string} needle   String to search for
+ * @return {string}
+ */
+export function trimEnd(haystack, needle) {
+  return haystack.endsWith(needle)
+    ? haystack.slice(0, -needle.length)
+    : haystack
+}

packages/h2x-plugin-jsx/src/visitor.js

@@ -2,6 +2,7 @@ import JSXElement from './JSXElement'
 import JSXAttribute from './JSXAttribute'
 import JSXComment from './JSXComment'
 import JSXText from './JSXText'
+import { isNumeric, hyphenToCamelCase } from './util'
 
 const ATTRIBUTE_MAPPING = {
   for: 'htmlFor',
@@ -114,19 +115,7 @@ const ELEMENT_TAG_NAME_MAPPING = {
   use: 'use',
   video: 'video',
   view: 'view',
-  vkern: 'vkern'
-};
-
-function isNumeric(input) {
-  return (
-    input !== undefined &&
-    input !== null &&
-    (typeof input === 'number' || parseInt(input, 10) == input) // eslint-disable-line eqeqeq
-  )
-}
-
-function hyphenToCamelCase(string) {
-  return string.replace(/-(.)/g, (match, chr) => chr.toUpperCase())
+  vkern: 'vkern',
 }
 
 function getAttributeName(attribute, node) {
@@ -146,8 +135,8 @@ function getAttributeName(attribute, node) {
 }
 
 function transformTagName(tagName) {
-  const lowercaseTagName = tagName.toLowerCase();
-  return ELEMENT_TAG_NAME_MAPPING[lowercaseTagName] || lowercaseTagName;
+  const lowercaseTagName = tagName.toLowerCase()
+  return ELEMENT_TAG_NAME_MAPPING[lowercaseTagName] || lowercaseTagName
 }
 
 function getAttributeValue(attribute) {