fix: 🐛 add !important only if it is not already there

.storybook/important.stories.js

@@ -15,7 +15,14 @@ const className1 = rule({
     border: '1px solid red'
 }, 'RedBorderImportant');
 
+const className2 = rule({
+    border: '1px solid red !important'
+}, 'RedBorderImportantImportant');
+
 storiesOf('Addons/!important', module)
     .add('Default', () =>
         h('div', {className: className1}, 'Hello world')
     )
+    .add('Double !important', () =>
+        h('div', {className: className2}, 'Hello world')
+    )

addon/important.js

@@ -1,9 +1,36 @@
 'use strict';
 
+function hasImportant (rawDecl) {
+    var parts = rawDecl.split(' ');
+
+    for (var i = 0; i < parts.length; i++) {
+        var part = parts[i].trim();
+
+        if (part === '!important') return true;
+    }
+
+    return false;
+}
+
 exports.addon = function (renderer) {
     var decl = renderer.decl;
 
     renderer.decl = function (prop, value) {
-        return decl(prop, value).replace(/;/g, ' !important;');
+        var rawDecl = decl(prop, value);
+        var decls = rawDecl.split(';');
+        var css = '';
+
+        for (var i = 0; i < decls.length; i++) {
+            rawDecl = decls[i];
+
+            // Don't add "!important" if it is already added.
+            if (!hasImportant(rawDecl)) {
+                css += rawDecl + ' !important;';
+            } else {
+                css += rawDecl + ';';
+            }
+        }
+
+        return css;
     };
 };