diff --git a/src/style_manager/model/Properties.js b/src/style_manager/model/Properties.js index 33253ad81f..d8ff5182e1 100644 --- a/src/style_manager/model/Properties.js +++ b/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; diff --git a/src/style_manager/model/Property.js b/src/style_manager/model/Property.js index 2604fed108..150edc57e1 100644 --- a/src/style_manager/model/Property.js +++ b/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 || ''; } }); diff --git a/test/specs/grapesjs/index.js b/test/specs/grapesjs/index.js index 4457f341e3..fe84599410 100644 --- a/test/specs/grapesjs/index.js +++ b/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() {},