Clear css properties when passed undefined (#3862)

* Clear css properties when passed undefined
preactjs · Jan 19, 2023 · c483d96 · c483d96
1 parent 2ce7b0a
commit c483d96
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 2 deletions.
diff --git a/src/diff/props.js b/src/diff/props.js
@@ -35,7 +35,7 @@ export function diffProps(dom, newProps, oldProps, isSvg, hydrate) {
 
 function setStyle(style, key, value) {
 	if (key[0] === '-') {
-		style.setProperty(key, value);
+		style.setProperty(key, value == null ? '' : value);
 	} else if (value == null) {
 		style[key] = '';
 	} else if (typeof value != 'number' || IS_NON_DIMENSIONAL.test(key)) {

diff --git a/test/_util/helpers.js b/test/_util/helpers.js
@@ -204,7 +204,7 @@ export function clearOptions() {
 
 /**
  * Teardown test environment and reset preact's internal state
- * @param {HTMLDivElement} scratch
+ * @param {HTMLElement} scratch
  */
 export function teardown(scratch) {
 	if (scratch) {

diff --git a/test/browser/style.test.js b/test/browser/style.test.js
@@ -4,6 +4,7 @@ import { setupScratch, teardown, sortCss } from '../_util/helpers';
 /** @jsx createElement */
 
 describe('style attribute', () => {
+	/** @type {HTMLElement} */
 	let scratch;
 
 	beforeEach(() => {
@@ -221,5 +222,56 @@ describe('style attribute', () => {
 				'10px'
 			);
 		});
+
+		it('should clear css properties when passed an empty string, null, or undefined', () => {
+			const red = 'rgb(255, 0, 0)';
+			const blue = 'rgb(0, 0, 255)';
+			const green = 'rgb(0, 128, 0)';
+			const yellow = 'rgb(255, 255, 0)';
+			const violet = 'rgb(238, 130, 238)';
+
+			function App({ color }) {
+				return (
+					<div style={{ '--color': color }}>
+						<span style={{ color: 'var(--color, red)' }}>Hello World!</span>
+					</div>
+				);
+			}
+
+			const getDiv = () => /** @type {HTMLDivElement} */ (scratch.firstChild);
+			const getSpan = () =>
+				/** @type {HTMLSpanElement} */ (scratch.firstChild.firstChild);
+			const getCSSVariableValue = () =>
+				getDiv().style.getPropertyValue('--color');
+			const getTextColor = () => window.getComputedStyle(getSpan()).color;
+
+			render(<App color="blue" />, scratch);
+			expect(getCSSVariableValue()).to.equal('blue');
+			expect(getTextColor()).to.equal(blue);
+
+			render(<App color="" />, scratch);
+			expect(getCSSVariableValue(), 'empty string').to.equal('');
+			expect(getTextColor(), 'empty string').to.equal(red);
+
+			render(<App color="green" />, scratch);
+			expect(getCSSVariableValue()).to.equal('green');
+			expect(getTextColor()).to.equal(green);
+
+			render(<App color={undefined} />, scratch);
+			expect(getCSSVariableValue(), 'undefined').to.equal('');
+			expect(getTextColor(), 'undefined').to.equal(red);
+
+			render(<App color="yellow" />, scratch);
+			expect(getCSSVariableValue()).to.equal('yellow');
+			expect(getTextColor()).to.equal(yellow);
+
+			render(<App color={null} />, scratch);
+			expect(getCSSVariableValue(), 'null').to.equal('');
+			expect(getTextColor(), 'null').to.equal(red);
+
+			render(<App color="violet" />, scratch);
+			expect(getCSSVariableValue()).to.equal('violet');
+			expect(getTextColor()).to.equal(violet);
+		});
 	}
 });