From 5d29b2e04078462ff9ff2c83b7f5d14884f546cd Mon Sep 17 00:00:00 2001
From: vzaidman <vzaidman@gmail.com>
Date: Tue, 24 Apr 2018 14:45:26 +0300
Subject: [PATCH] fixed #948 - adds prefixes to each class individually

---
 plugins/prefixIds.js          | 25 ++++++++++++++++-------
 test/plugins/prefixIds.01.svg |  4 ++--
 test/plugins/prefixIds.06.svg | 38 +++++++++++++++++++++++++++++++++++
 3 files changed, 58 insertions(+), 9 deletions(-)
 create mode 100644 test/plugins/prefixIds.06.svg

diff --git a/plugins/prefixIds.js b/plugins/prefixIds.js
index fd7b0ea66..7d2b8c832 100644
--- a/plugins/prefixIds.js
+++ b/plugins/prefixIds.js
@@ -61,13 +61,13 @@ var prefixId = function(val) {
 
 // attr.value helper methods
 
-// prefixes a normal attribute value
-var addPrefixToAttr = function(attr) {
+// prefixes a class attribute value
+var addPrefixToClassAttr = function(attr) {
     if (!attrNotEmpty(attr)) {
         return;
     }
 
-    attr.value = addPrefix(attr.value);
+    attr.value = attr.value.split(/\s+/).map(addPrefix).join(' ');
 };
 
 // prefixes an ID attribute value
@@ -76,6 +76,15 @@ var addPrefixToIdAttr = function(attr) {
         return;
     }
 
+    attr.value = addPrefix(attr.value);
+};
+
+// prefixes a href attribute value
+var addPrefixToHrefAttr = function(attr) {
+    if (!attrNotEmpty(attr)) {
+        return;
+    }
+
     var idPrefixed = prefixId(attr.value);
     if (!idPrefixed) {
         return;
@@ -197,14 +206,16 @@ exports.fn = function(node, opts, extra) {
     }
 
     // ID
-    addPrefixToAttr(node.attrs.id);
+    addPrefixToIdAttr(node.attrs.id);
+
     // Class
-    addPrefixToAttr(node.attrs.class);
+    addPrefixToClassAttr(node.attrs.class);
 
     // href
-    addPrefixToIdAttr(node.attrs.href);
+    addPrefixToHrefAttr(node.attrs.href);
+
     // (xlink:)href (deprecated, must be still supported)
-    addPrefixToIdAttr(node.attrs['xlink:href']);
+    addPrefixToHrefAttr(node.attrs['xlink:href']);
 
     // referenceable properties
     for (var referencesProp of referencesProps) {
diff --git a/test/plugins/prefixIds.01.svg b/test/plugins/prefixIds.01.svg
index ea23b2f0b..e99c2ea48 100644
--- a/test/plugins/prefixIds.01.svg
+++ b/test/plugins/prefixIds.01.svg
@@ -1,6 +1,6 @@
 <svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
     <style>
-        .test2 {
+        .test {
             color: blue;
         }
         #test {
@@ -16,7 +16,7 @@
 
 <svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
     <style>
-        .prefixIds_01_svg__test2{color:blue}#prefixIds_01_svg__test{color:red}
+        .prefixIds_01_svg__test{color:blue}#prefixIds_01_svg__test{color:red}
     </style>
     <rect class="prefixIds_01_svg__test" x="10" y="10" width="100" height="100"/>
     <rect class="" id="prefixIds_01_svg__test" x="10" y="10" width="100" height="100"/>
diff --git a/test/plugins/prefixIds.06.svg b/test/plugins/prefixIds.06.svg
new file mode 100644
index 000000000..9bd4f7643
--- /dev/null
+++ b/test/plugins/prefixIds.06.svg
@@ -0,0 +1,38 @@
+<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
+    <style>
+        .test {
+            color: blue;
+        }
+        .test2 {
+            color: green;
+        }
+        #test {
+            color: red;
+        }
+        .test3 .test4 {
+            color: black;
+        }
+        .test5.test6 {
+            color: brown;
+        }
+        .test5.test6 #test7 {
+            color: yellow;
+        }
+    </style>
+    <rect class="test" x="10" y="10" width="100" height="100"/>
+    <rect class="test test2" x="10" y="10" width="100" height="100"/>
+    <rect class="test  test2" x="10" y="10" width="100" height="100"/>
+    <rect class="" id="test" x="10" y="10" width="100" height="100"/>
+</svg>
+
+@@@
+
+<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
+    <style>
+        .prefixIds_06_svg__test{color:blue}.prefixIds_06_svg__test2{color:green}#prefixIds_06_svg__test{color:red}.prefixIds_06_svg__test3 .prefixIds_06_svg__test4{color:black}.prefixIds_06_svg__test5.prefixIds_06_svg__test6{color:brown}.prefixIds_06_svg__test5.prefixIds_06_svg__test6 #prefixIds_06_svg__test7{color:yellow}
+    </style>
+    <rect class="prefixIds_06_svg__test" x="10" y="10" width="100" height="100"/>
+    <rect class="prefixIds_06_svg__test prefixIds_06_svg__test2" x="10" y="10" width="100" height="100"/>
+    <rect class="prefixIds_06_svg__test prefixIds_06_svg__test2" x="10" y="10" width="100" height="100"/>
+    <rect class="" id="prefixIds_06_svg__test" x="10" y="10" width="100" height="100"/>
+</svg>