Add support for SVG

Related to wooorm/property-information#6.

Author: wooorm

index.js

@@ -1,7 +1,8 @@
 'use strict'
 
-var information = require('property-information')
-var camelcase = require('camelcase')
+var html = require('property-information/html')
+var svg = require('property-information/svg')
+var find = require('property-information/find')
 var h = require('hastscript')
 var xtend = require('xtend')
 var count = require('ccount')
@@ -32,6 +33,7 @@ function wrapper(ast, options) {
   }
 
   return transform(ast, {
+    schema: settings.space === 'svg' ? svg : html,
     file: file,
     verbose: settings.verbose,
     location: false
@@ -40,26 +42,33 @@ function wrapper(ast, options) {
 
 /* Transform a node. */
 function transform(ast, config) {
+  var schema = config.schema
   var fn = own.call(map, ast.nodeName) ? map[ast.nodeName] : element
   var children
   var node
   var pos
 
+  if (fn === element && schema.space === 'html' && ast.nodeName === 'svg') {
+    config.schema = svg
+  }
+
   if (ast.childNodes) {
     children = nodes(ast.childNodes, config)
   }
 
   node = fn(ast, children, config)
 
   if (ast.sourceCodeLocation && config.file) {
-    pos = location(node, ast.sourceCodeLocation, config.verbose)
+    pos = location(node, ast.sourceCodeLocation, config)
 
     if (pos) {
       config.location = true
       node.position = pos
     }
   }
 
+  config.schema = schema
+
   return node
 }
 
@@ -122,24 +131,27 @@ function comment(ast) {
 
 /* Transform an element. */
 function element(ast, children, config) {
+  var name = ast.tagName
+  var attributes = ast.attrs
+  var length = attributes.length
   var props = {}
-  var values = ast.attrs
-  var length = values.length
   var index = -1
-  var attr
+  var attribute
+  var prop
   var node
   var pos
   var start
   var end
 
   while (++index < length) {
-    attr = values[index]
-    props[(attr.prefix ? attr.prefix + ':' : '') + attr.name] = attr.value
+    attribute = attributes[index]
+    prop = (attribute.prefix ? attribute.prefix + ':' : '') + attribute.name
+    props[prop] = attribute.value
   }
 
-  node = h(ast.tagName, props, children)
+  node = h(name, props, children)
 
-  if (ast.nodeName === 'template' && 'content' in ast) {
+  if (name === 'template' && 'content' in ast) {
     pos = ast.sourceCodeLocation
     start = pos && pos.startTag && position(pos.startTag).end
     end = pos && pos.endTag && position(pos.endTag).start
@@ -155,13 +167,15 @@ function element(ast, children, config) {
 }
 
 /* Create clean positional information. */
-function location(node, location, verbose) {
+function location(node, location, config) {
+  var schema = config.schema
+  var verbose = config.verbose
   var pos = position(location)
   var reference
-  var values
+  var attributes
+  var attribute
   var props
   var prop
-  var name
 
   if (node.type === 'element') {
     reference = node.children[node.children.length - 1]
@@ -177,12 +191,12 @@ function location(node, location, verbose) {
     }
 
     if (verbose) {
-      values = location.attrs
+      attributes = location.attrs
       props = {}
 
-      for (prop in values) {
-        name = (information(prop) || {}).propertyName || camelcase(prop)
-        props[name] = position(values[prop])
+      for (attribute in attributes) {
+        prop = find(schema, attribute).property
+        props[prop] = position(attributes[attribute])
       }
 
       node.data = {

package.json

@@ -19,10 +19,9 @@
     "index.js"
   ],
   "dependencies": {
-    "camelcase": "^5.0.0",
     "ccount": "^1.0.3",
-    "hastscript": "^3.0.0",
-    "property-information": "^3.1.0",
+    "hastscript": "^4.0.0",
+    "property-information": "^4.0.0",
     "xtend": "^4.0.1"
   },
   "devDependencies": {
@@ -39,8 +38,8 @@
     "remark-cli": "^5.0.0",
     "remark-preset-wooorm": "^4.0.0",
     "tape": "^4.0.0",
+    "to-vfile": "^5.0.0",
     "unist-util-visit": "^1.1.3",
-    "vfile": "^3.0.0",
     "xo": "^0.21.0"
   },
   "scripts": {

test/fixtures/svg/index.html

@@ -1,5 +1,5 @@
 <div>
-  <svg width="230" height="120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <svg width="230" height="120" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <circle cx="60"  cy="60" r="50" fill="red"/>
     <circle cx="170" cy="60" r="50" fill="green"/>
   </svg>