fix generatedCss

gambitph · Sep 4, 2024 · abd5594 · abd5594
1 parent 217dbf2
commit abd5594
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 6 deletions.
diff --git a/src/components/block-css/css-save-compiler.js b/src/components/block-css/css-save-compiler.js
@@ -13,6 +13,7 @@ class CssSaveCompiler {
 		this.styles = null
 		this.isDirty = false
 		this.previousCss = ''
+		this.addedStyles = {}
 	}
 
 	addStyle( selector, rule, value = undefined, device = 'desktop' ) {
@@ -34,13 +35,30 @@ class CssSaveCompiler {
 			this.styles[ device ][ selector ][ rule ] = value
 			this.isDirty = true // Make sure our next compile will return a new result.
 		}
+
+		this.addedStyles[ `${ device }|${ selector }|${ rule }` ] = true
+	}
+
+	removeStyle( selector, rule, device = 'desktop' ) {
+		if ( this.styles && this.styles[ device ] && this.styles[ device ][ selector ] && this.styles[ device ][ selector ][ rule ] ) {
+			delete this.styles[ device ][ selector ][ rule ]
+			this.isDirty = true
+		}
+	}
+
+	checkUnremovedStyles() {
+		const hasUnremovedStyles = Object.values( this.addedStyles ).some( val => val === false )
+		if ( hasUnremovedStyles ) {
+			this.isDirty = true
+		}
 	}
 
 	// Compile all this.styles into a single string.
 	compile() {
 		if ( ! this.styles ) {
 			return ''
 		}
+		this.checkUnremovedStyles()
 
 		// If nothing was added, then just return the previous results
 		if ( ! this.isDirty ) {
@@ -62,15 +80,23 @@ class CssSaveCompiler {
 				let selectorCss = ''
 				const rules = Object.keys( this.styles[ device ][ selector ] )
 				rules.forEach( rule => {
-					const value = this.styles[ device ][ selector ][ rule ]
-					selectorCss += `${ rule }:${ value };`
+					// If the style was not added, then delete it from this.styles
+					if ( this.addedStyles[ `${ device }|${ selector }|${ rule }` ] === false ) {
+						delete this.styles[ device ][ selector ][ rule ]
+					} else {
+						const value = this.styles[ device ][ selector ][ rule ]
+						selectorCss += `${ rule }:${ value };`
+						// Reset the flag
+						this.addedStyles[ `${ device }|${ selector }|${ rule }` ] = false
+					}
 				} )
-
-				css += `${ selector }{${ selectorCss }}`
+				if ( selectorCss ) {
+					css += `${ selector }{${ selectorCss }}`
+				}
 			} )
 
 			const mediaQuery = getMediaQuery( device )
-			if ( mediaQuery ) {
+			if ( mediaQuery && css ) {
 				css = `${ mediaQuery }{${ css }}`
 			}
 

diff --git a/src/components/block-css/index.js b/src/components/block-css/index.js
@@ -264,7 +264,8 @@ const BlockCss = props => {
 	}
 
 	// Skip everything if all values are null.
-	if ( typeof valueDesktop === 'undefined' &&
+	if ( props.editorMode &&
+		typeof valueDesktop === 'undefined' &&
 		typeof valueDesktopHover === 'undefined' &&
 		typeof valueDesktopParentHover === 'undefined' &&
 		typeof valueDesktopCollapsed === 'undefined' &&
@@ -381,6 +382,22 @@ const BlockCss = props => {
 		collapsedSelector = prependCSSClass( collapsedSelector, blockUniqueClassName, blockUniqueClassName, editorMode ? '.editor-styles-wrapper' : '' )
 	}
 
+	if ( ! props.editorMode &&
+		typeof valueDesktop === 'undefined' &&
+		typeof valueDesktopHover === 'undefined' &&
+		typeof valueDesktopParentHover === 'undefined' &&
+		typeof valueDesktopCollapsed === 'undefined' &&
+		typeof valueTablet === 'undefined' &&
+		typeof valueTabletHover === 'undefined' &&
+		typeof valueTabletParentHover === 'undefined' &&
+		typeof valueTabletCollapsed === 'undefined' &&
+		typeof valueMobile === 'undefined' &&
+		typeof valueMobileHover === 'undefined' &&
+		typeof valueMobileParentHover === 'undefined' &&
+		typeof valueMobileCollapsed === 'undefined' ) {
+		compileCssTo.removeStyle( selector, styleRule, desktopQuery )
+		return null
+	}
 	let css = ''
 
 	// If rendering for the ditor, output the css, if saving, compile css to an object.