Better implementation of setStyle

- handle overridding of styles by itself

src/style.js

@@ -44,32 +44,50 @@ export default class Style {
         this.styleEl.remove();
     }
 
-    setStyle(selector, styleMap, index = -1) {
+    setStyle(selector, styleObject) {
-        const styles = Object.keys(styleMap)
+        if (selector.includes(',')) {
-            .map(prop => {
+            selector.split(',')
-                if (!prop.includes('-')) {
+                .map(s => s.trim())
-                    prop = camelCaseToDash(prop);
+                .forEach(selector => {
-                }
+                    this.setStyle(selector, styleObject);
-                return `${prop}:${styleMap[prop]};`;
+                });
-            })
+            return;
-            .join('');
-        let prefixedSelector = selector
-            .split(',')
-            .map(r => `.${this.scopeClass} ${r}`)
-            .join(',');
-
-        let ruleString = `${prefixedSelector} { ${styles} }`;
-
-        if (!this.stylesheet) return;
-
-        let _index = this.stylesheet.cssRules.length;
-        if (index !== -1) {
-            this.stylesheet.deleteRule(index);
-            _index = index;
         }
 
-        this.stylesheet.insertRule(ruleString, _index);
+        this._styleRulesMap = this._styleRulesMap || {};
-        return _index; // eslint-disable-line
+        const prefixedSelector = this._getPrefixedSelector(selector);
+
+        if (this._styleRulesMap[prefixedSelector]) {
+            // find and remove
+            const index = Array.from(this.stylesheet.cssRules)
+                .findIndex(rule => rule.selectorText === prefixedSelector);
+            this.stylesheet.deleteRule(index);
+
+            // merge with old styleobject
+            styleObject = Object.assign({}, this._styleRulesMap[prefixedSelector], styleObject);
+        }
+
+        const styleString = this._getRuleString(styleObject);
+        const ruleString = `${prefixedSelector} { ${styleString} }`;
+
+        this._styleRulesMap[prefixedSelector] = styleObject;
+        this.stylesheet.insertRule(ruleString);
+    }
+
+    _getPrefixedSelector(selector) {
+        return `.${this.scopeClass} ${selector}`;
+    }
+
+    _getRuleString(styleObject) {
+        return Object.keys(styleObject)
+            .map(prop => {
+                let dashed = prop;
+                if (!prop.includes('-')) {
+                    dashed = camelCaseToDash(prop);
+                }
+                return `${dashed}:${styleObject[prop]};`;
+            })
+            .join('');
     }
 
     setDimensions() {
@@ -232,11 +250,16 @@ export default class Style {
         this.datamanager.getColumns()
             .map(column => {
                 // alignment
-                if (['left', 'center', 'right'].includes(column.align)) {
+                if (!column.align) {
-                    this.setStyle(`.dt-cell--col-${column.colIndex}`, {
+                    column.align = 'left';
-                        'text-align': column.align
-                    });
                 }
+                if (!['left', 'center', 'right'].includes(column.align)) {
+                    column.align = 'left';
+                }
+                this.setStyle(`.dt-cell--col-${column.colIndex}`, {
+                    'text-align': column.align
+                });
+
                 // width
                 this.columnmanager.setColumnHeaderWidth(column.colIndex);
                 this.columnmanager.setColumnWidth(column.colIndex);