Merge dbe2d8f into ecaf056

src/view/stylesmap.js

@@ -208,8 +208,12 @@ export default class StylesMap {
 	 * @param {String} name Style name.
 	 */
 	remove( name ) {
-		unset( this._styles, toPath( name ) );
+		const path = toPath( name );
+
+		unset( this._styles, path );
 		delete this._styles[ name ];
+
+		this._cleanEmptyObjectsOnPath( path );
 	}
 
 	/**
@@ -407,6 +411,35 @@ export default class StylesMap {
 		return parsed;
 	}
 
+	/**
+	 * Removes empty objects upon removing an entry from internal object.
+	 *
+	 * @param {String} path
+	 * @private
+	 */
+	_cleanEmptyObjectsOnPath( path ) {
+		const pathParts = path.split( '.' );
+		const isChildPath = pathParts.length > 1;
+
+		if ( !isChildPath ) {
+			return;
+		}
+
+		const parentPath = pathParts.splice( 0, pathParts.length - 1 ).join( '.' );
+
+		const parentObject = get( this._styles, parentPath );
+
+		if ( !parentObject ) {
+			return;
+		}
+
+		const isParentEmpty = !Array.from( Object.keys( parentObject ) ).length;
+
+		if ( isParentEmpty ) {
+			this.remove( parentPath );
+		}
+	}
+
 	/**
 	 * Returns global StylesProcessor instance.
 	 *

tests/view/styles/border.js

@@ -230,6 +230,40 @@ describe( 'Border styles normalization', () => {
 		expect( styles.getAsString( 'border-left' ) ).to.equal( '1px' );
 	} );
 
+	it( 'should properly remove border properties one by one', () => {
+		styles.setTo( 'border:1px solid blue;' );
+
+		expect( styles.toString() ).to.equal(
+			'border-bottom:1px solid blue;' +
+			'border-left:1px solid blue;' +
+			'border-right:1px solid blue;' +
+			'border-top:1px solid blue;'
+		);
+
+		styles.remove( 'border-color' );
+
+		expect( styles.toString() ).to.equal(
+			'border-bottom:1px solid;' +
+			'border-left:1px solid;' +
+			'border-right:1px solid;' +
+			'border-top:1px solid;'
+		);
+
+		styles.remove( 'border-style' );
+
+		expect( styles.toString() ).to.equal(
+			'border-bottom:1px;' +
+			'border-left:1px;' +
+			'border-right:1px;' +
+			'border-top:1px;'
+		);
+
+		styles.remove( 'border-width' );
+
+		expect( styles.isEmpty ).to.be.true;
+		expect( styles.toString() ).to.equal( '' );
+	} );
+
 	describe( 'normalized values getters', () => {
 		it( 'should output border-*-color', () => {
 			styles.setTo( 'border:1px solid #f00;' );

tests/view/stylesmap.js

@@ -5,7 +5,7 @@
 
 import StylesMap, { StylesProcessor } from '../../src/view/stylesmap';
 import encodedImage from './_utils/encodedimage.txt';
-import { addPaddingRules } from '../../src/view/styles/padding';
+import { addMarginRules } from '../../src/view/styles/margin';
 import { getBoxSidesValueReducer } from '../../src/view/styles/utils';
 
 describe( 'StylesMap', () => {
@@ -25,7 +25,7 @@ describe( 'StylesMap', () => {
 		} ) );
 		stylesProcessor.setReducer( 'foo', getBoxSidesValueReducer( 'foo' ) );
 
-		addPaddingRules( stylesProcessor );
+		addMarginRules( stylesProcessor );
 		StylesMap._setProcessor( stylesProcessor );
 		stylesMap = new StylesMap();
 	} );
@@ -49,9 +49,9 @@ describe( 'StylesMap', () => {
 
 	describe( 'setTo()', () => {
 		it( 'should reset styles to a new value', () => {
-			stylesMap.setTo( 'color:red;margin:1px;' );
+			stylesMap.setTo( 'color:red;padding:1px;' );
 
-			expect( stylesMap.getNormalized() ).to.deep.equal( { color: 'red', margin: '1px' } );
+			expect( stylesMap.getNormalized() ).to.deep.equal( { color: 'red', padding: '1px' } );
 
 			stylesMap.setTo( 'overflow:hidden;' );
 
@@ -232,6 +232,27 @@ describe( 'StylesMap', () => {
 
 			expect( stylesMap.getAsString( 'margin-top' ) ).to.be.undefined;
 		} );
+
+		it( 'should remove normalized properties one by one', () => {
+			stylesMap.setTo( 'margin:1px' );
+
+			stylesMap.remove( 'margin-top' );
+			stylesMap.remove( 'margin-right' );
+			stylesMap.remove( 'margin-bottom' );
+			stylesMap.remove( 'margin-left' );
+
+			expect( stylesMap.toString() ).to.equal( '' );
+		} );
+
+		it( 'should remove path-like property', () => {
+			stylesMap.setTo( 'text-align:left' );
+
+			expect( stylesMap.toString() ).to.equal( 'text-align:left;' );
+
+			stylesMap.remove( 'text-align' );
+
+			expect( stylesMap.toString() ).to.equal( '' );
+		} );
 	} );
 
 	describe( 'getStyleNames()', () => {