diff --git a/src/utilities/classNames.js b/src/utilities/classNames.js
index 72e1102..5c30f6b 100644
--- a/src/utilities/classNames.js
+++ b/src/utilities/classNames.js
@@ -35,6 +35,18 @@ export const makeUniqFirstClassName = (uuid, id) => (item, index) => {
   return index === 0 ? `${item}__${uuid}-${id}` : item
 }
 
+/**
+ * Compiles cssRules from token points.
+ *
+ * @param   {string} rule
+ * @param   {string} token
+ * @param   {function} compiler
+ * @returns {string}
+ */
+export const compileRule = (rule, token, compiler) => {
+  return rule.split(token).map(compiler).join(token)
+}
+
 /**
  * Creates a unique namespaced className selector.
  *
@@ -51,20 +63,17 @@ export const makeUniqClassName = (selector, uuid, id) => {
 
     if (index === 0) {
       if (item.indexOf(':') >= 0) {
-        className = item.split(':').map(generateClassName).join(':')
+        className = compileRule(item, ':', generateClassName)
       }
       if (item.indexOf(',') >= 0) {
-        className = item.split(',').map(generateClassName).join(',')
+        className = compileRule(item, ',', generateClassName)
       }
     }
 
     return className
   }
 
-  return selector
-    .split(' ')
-    .map(generate)
-    .join(' ')
+  return compileRule(selector, ' ', generate)
 }
 
 /**
@@ -77,10 +86,8 @@ export const makeUniqClassName = (selector, uuid, id) => {
  * @returns {string}
  */
 export const makeUniqSelectorForCombinator = (combinator, selector, uuid, id) => {
-  return selector
-    .split(combinator)
-    .map(s => makeUniqClassName(s.trim(), uuid, id))
-    .join(combinator)
+  const compiler = s => makeUniqClassName(s.trim(), uuid, id)
+  return compileRule(selector, combinator, compiler)
 }
 
 /**