Parse important declarations in style properties. Fixes GrapesJS#1179

Author: artf

src/style_manager/model/Properties.js

@@ -119,6 +119,7 @@ module.exports = require('backbone')
       const values = value.split(' ');
       values.forEach((value, i) => {
         const property = this.at(i);
+        if (!property) return;
         properties.push({ ...property.attributes, ...{ value } });
       });
       return properties;

src/style_manager/model/Property.js

@@ -1,4 +1,4 @@
-import { isUndefined } from 'underscore';
+import { isUndefined, isString } from 'underscore';
 
 module.exports = require('backbone').Model.extend({
   defaults: {
@@ -14,6 +14,9 @@ module.exports = require('backbone').Model.extend({
     visible: true,
     fixedValues: ['initial', 'inherit'],
 
+    // If true to the value will be added '!important'
+    important: 0,
+
     // If true, will be hidden by default and will show up only for targets
     // which require this property (via `stylable-require`)
     // Use case:
@@ -89,13 +92,19 @@ module.exports = require('backbone').Model.extend({
    */
   parseValue(value) {
     const result = { value };
+    const imp = '!important';
+
+    if (isString(value) && value.indexOf(imp) !== -1) {
+      result.value = value.replace(imp, '').trim();
+      result.important = 1;
+    }
 
     if (!this.get('functionName')) {
       return result;
     }
 
     const args = [];
-    let valueStr = `${value}`;
+    let valueStr = `${result.value}`;
     let start = valueStr.indexOf('(') + 1;
     let end = valueStr.lastIndexOf(')');
     args.push(start);
@@ -134,6 +143,10 @@ module.exports = require('backbone').Model.extend({
       value = `${fn}(${value})`;
     }
 
+    if (this.get('important')) {
+      value = `${value} !important`;
+    }
+
     return value || '';
   }
 });

test/specs/grapesjs/index.js

@@ -415,7 +415,7 @@ describe('GrapesJS', () => {
       expect(css).toEqual(`${protCss}.test2{color:red;}.test3{color:blue;}`);
     });
 
-    describe.only('Component selection', () => {
+    describe('Component selection', () => {
       let editor, wrapper, el1, el2, el3;
 
       beforeEach(() => {
@@ -481,7 +481,6 @@ describe('GrapesJS', () => {
       });
 
       test('Selection events', () => {
-        //selectAdd selectRemove selectToggle
         const toSpy = {
           selected() {},
           deselected() {},