From 8bd124186e1f18a3b899e01a47447036f84ffea8 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          | 37 ++++++++++++++++++++++++-----------
 test/plugins/prefixIds.01.svg |  4 ++--
 test/plugins/prefixIds.06.svg | 28 ++++++++++++++++++++++++++
 3 files changed, 56 insertions(+), 13 deletions(-)
 create mode 100644 test/plugins/prefixIds.06.svg

diff --git a/plugins/prefixIds.js b/plugins/prefixIds.js
index fd7b0ea66..61a55666c 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;
@@ -164,14 +173,18 @@ exports.fn = function(node, opts, extra) {
         var idPrefixed = '';
         csstree.walk(cssAst, function(node) {
 
-            // #ID, .class
-            if ((node.type === 'IdSelector' ||
-                 node.type === 'ClassSelector') &&
-                 node.name) {
+            // #ID,
+            if (node.type === 'IdSelector' && node.name) {
                 node.name = addPrefix(node.name);
                 return;
             }
 
+            // .class
+            if (node.type === 'ClassSelector' && node.name) {
+                node.name = node.name.split(/\s+/).map(addPrefix).join(' ');
+                return;
+            }
+
             // url(...) in value
             if (node.type === 'Url' &&
                 node.value.value && node.value.value.length > 0) {
@@ -197,14 +210,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..7fdb199e5
--- /dev/null
+++ b/test/plugins/prefixIds.06.svg
@@ -0,0 +1,28 @@
+<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
+    <style>
+        .test {
+            color: blue;
+        }
+        .test2 {
+            color: green;
+        }
+        #test {
+            color: red;
+        }
+
+    </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="" 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}
+    </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="" id="prefixIds_06_svg__test" x="10" y="10" width="100" height="100"/>
+</svg>