Skip to content

Clear css properties when passed undefined#3862

Merged
andrewiggins merged 2 commits into
masterfrom
remove-css-custom-props
Jan 19, 2023
Merged

Clear css properties when passed undefined#3862
andrewiggins merged 2 commits into
masterfrom
remove-css-custom-props

Conversation

@andrewiggins

@andrewiggins andrewiggins commented Jan 13, 2023

Copy link
Copy Markdown
Member

When style.setProperty is given null or '', the browser effectively clears the value (at least for css custom properties). However, when passed undefined, the browser serializes undefined to the string"undefined" 😢 . This PR modifies our setStyle function to handle undefined and convert it to an empty string in this case.

Quick gut check: Is this something we want to support in core or put in compat? It's a fairly small change, but does fall into one of those changes where we are diverging from browser behavior so just wanted to check if that's something we want to put in core.

Fixes #3861

@github-actions

github-actions Bot commented Jan 13, 2023 •
edited
Loading

Copy link
Copy Markdown

📊 Tachometer Benchmark Results

Summary

duration

  • 02_replace1k: unsure 🔍 -30% - +2% (-35.16ms - +4.05ms)
    preact-local vs preact-master
  • 03_update10th1k_x16: unsure 🔍 -3% - +5% (-1.53ms - +2.46ms)
    preact-local vs preact-master
  • 07_create10k: unsure 🔍 -0% - +1% (-3.94ms - +12.56ms)
    preact-local vs preact-master
  • filter_list: unsure 🔍 -0% - +2% (-0.05ms - +0.47ms)
    preact-local vs preact-master
  • hydrate1k: unsure 🔍 -1% - +2% (-1.07ms - +1.74ms)
    preact-local vs preact-master
  • many_updates: unsure 🔍 -3% - +3% (-0.76ms - +0.78ms)
    preact-local vs preact-master
  • text_update: unsure 🔍 -2% - +0% (-0.05ms - +0.01ms)
    preact-local vs preact-master
  • todo: unsure 🔍 -2% - +1% (-0.95ms - +0.35ms)
    preact-local vs preact-master

usedJSHeapSize

  • 02_replace1k: unsure 🔍 -3% - +14% (-0.16ms - +0.71ms)
    preact-local vs preact-master
  • 03_update10th1k_x16: unsure 🔍 -0% - +0% (-0.00ms - +0.01ms)
    preact-local vs preact-master
  • 07_create10k: unsure 🔍 -0% - +0% (-0.00ms - +0.00ms)
    preact-local vs preact-master
  • filter_list: unsure 🔍 -0% - +0% (-0.00ms - +0.00ms)
    preact-local vs preact-master
  • hydrate1k: unsure 🔍 -6% - +1% (-0.80ms - +0.21ms)
    preact-local vs preact-master
  • many_updates: unsure 🔍 -0% - +0% (-0.00ms - +0.00ms)
    preact-local vs preact-master
  • text_update: unsure 🔍 +0% - +0% (+0.00ms - +0.00ms)
    preact-local vs preact-master
  • todo: unsure 🔍 -0% - +0% (-0.00ms - +0.00ms)
    preact-local vs preact-master

Results

02_replace1k

duration

VersionAvg timevs preact-mastervs preact-localvs preact-hooks
preact-master96.09ms - 125.70ms-unsure 🔍
-6% - +38%
-4.05ms - +35.16ms		unsure 🔍
-17% - +21%
-17.85ms - +22.79ms
preact-local82.49ms - 108.19msunsure 🔍
-30% - +2%
-35.16ms - +4.05ms		-unsure 🔍
-28% - +4%
-32.03ms - +5.85ms
preact-hooks94.51ms - 122.34msunsure 🔍
-20% - +16%
-22.79ms - +17.85ms		unsure 🔍
-7% - +35%
-5.85ms - +32.03ms		-

usedJSHeapSize

VersionAvg timevs preact-mastervs preact-localvs preact-hooks
preact-master4.89ms - 5.55ms-unsure 🔍
-13% - +3%
-0.71ms - +0.16ms		unsure 🔍
-9% - +8%
-0.46ms - +0.42ms
preact-local5.21ms - 5.78msunsure 🔍
-3% - +14%
-0.16ms - +0.71ms		-unsure 🔍
-3% - +13%
-0.16ms - +0.66ms
preact-hooks4.94ms - 5.53msunsure 🔍
-8% - +9%
-0.42ms - +0.46ms		unsure 🔍
-12% - +3%
-0.66ms - +0.16ms		-

run-warmup-0

VersionAvg timevs preact-mastervs preact-localvs preact-hooks
preact-master1.17ms - 1.26ms-unsure 🔍
-10% - +1%
-0.12ms - +0.01ms		unsure 🔍
-9% - +2%
-0.11ms - +0.03ms
preact-local1.22ms - 1.32msunsure 🔍
-1% - +10%
-0.01ms - +0.12ms		-unsure 🔍
-5% - +7%
-0.06ms - +0.09ms
preact-hooks1.20ms - 1.31msunsure 🔍
-2% - +9%
-0.03ms - +0.11ms		unsure 🔍
-7% - +5%
-0.09ms - +0.06ms		-

run-warmup-1

VersionAvg timevs preact-mastervs preact-localvs preact-hooks
preact-master0.83ms - 1.18ms-unsure 🔍
-36% - +6%
-0.45ms - +0.10ms		unsure 🔍
-36% - +6%
-0.46ms - +0.09ms
preact-local0.97ms - 1.39msunsure 🔍
-12% - +47%
-0.10ms - +0.45ms		-unsure 🔍
-25% - +25%
-0.30ms - +0.29ms
preact-hooks0.98ms - 1.39msunsure 🔍
-11% - +48%
-0.09ms - +0.46ms		unsure 🔍
-25% - +25%
-0.29ms - +0.30ms		-

run-warmup-2

VersionAvg timevs preact-mastervs preact-localvs preact-hooks
preact-master0.45ms - 0.57ms-unsure 🔍
-35% - +15%
-0.21ms - +0.10ms		unsure 🔍
-16% - +15%
-0.08ms - +0.08ms
preact-local0.43ms - 0.71msunsure 🔍
-19% - +42%
-0.10ms - +0.21ms		-unsure 🔍
-19% - +40%
-0.10ms - +0.20ms
preact-hooks0.46ms - 0.57msunsure 🔍
-15% - +16%
-0.08ms - +0.08ms		unsure 🔍
-34% - +15%
-0.20ms - +0.10ms		-

run-warmup-3

VersionAvg timevs preact-mastervs preact-localvs preact-hooks
preact-master0.50ms - 1.07ms-unsure 🔍
-41% - +77%
-0.25ms - +0.49ms		unsure 🔍
-70% - -4%
-1.02ms - +0.09ms
preact-local0.44ms - 0.89msunsure 🔍
-58% - +27%
-0.49ms - +0.25ms		-faster ✔
19% - 74%
0.05ms - 1.11ms
preact-hooks0.77ms - 1.72msunsure 🔍
-25% - +143%
-0.09ms - +1.02ms		unsure 🔍
-9% - +185%
+0.05ms - +1.11ms		-

run-warmup-4

VersionAvg timevs preact-mastervs preact-localvs preact-hooks
preact-master0.29ms - 0.37ms-unsure 🔍
-14% - +13%
-0.05ms - +0.04ms		unsure 🔍
-18% - +17%
-0.06ms - +0.06ms
preact-local0.30ms - 0.36msunsure 🔍
-14% - +14%
-0.04ms - +0.05ms		-unsure 🔍
-16% - +16%
-0.05ms - +0.05ms
preact-hooks0.29ms - 0.38msunsure 🔍
-17% - +18%
-0.06ms - +0.06ms		unsure 🔍
-16% - +16%
-0.05ms - +0.05ms		-

run-final

VersionAvg timevs preact-mastervs preact-localvs preact-hooks
preact-master0.30ms - 0.35ms-unsure 🔍
-20% - +1%
-0.07ms - +0.01ms		unsure 🔍
-20% - +3%
-0.07ms - +0.01ms
preact-local0.32ms - 0.39msunsure 🔍
-2% - +24%
-0.01ms - +0.07ms		-unsure 🔍
-12% - +15%
-0.04ms - +0.05ms
preact-hooks0.32ms - 0.38msunsure 🔍
-5% - +22%
-0.01ms - +0.07ms		unsure 🔍
-14% - +11%
-0.05ms - +0.04ms		-
03_update10th1k_x16

duration

VersionAvg timevs preact-mastervs preact-localvs preact-hooks
preact-master51.86ms - 54.54ms-unsure 🔍
-5% - +3%
-2.46ms - +1.53ms		unsure 🔍
-5% - +3%
-2.45ms - +1.54ms
preact-local52.19ms - 55.14msunsure 🔍
-3% - +5%
-1.53ms - +2.46ms		-unsure 🔍
-4% - +4%
-2.08ms - +2.09ms
preact-hooks52.18ms - 55.13msunsure 🔍
-3% - +5%
-1.54ms - +2.45ms		unsure 🔍
-4% - +4%
-2.09ms - +2.08ms		-

usedJSHeapSize

VersionAvg timevs preact-mastervs preact-localvs preact-hooks
preact-master3.46ms - 3.47ms-unsure 🔍
-0% - +0%
-0.01ms - +0.00ms		faster ✔
0% - 1%
0.01ms - 0.02ms
preact-local3.46ms - 3.47msunsure 🔍
-0% - +0%
-0.00ms - +0.01ms		-faster ✔
0% - 1%
0.01ms - 0.02ms
preact-hooks3.48ms - 3.49msslower ❌
0% - 1%
0.01ms - 0.02ms		slower ❌
0% - 1%
0.01ms - 0.02ms		-
07_create10k

duration

VersionAvg timevs preact-mastervs preact-localvs preact-hooks
preact-master1209.16ms - 1217.69ms-unsure 🔍
-1% - +0%
-12.56ms - +3.94ms		faster ✔
0% - 1%
1.86ms - 16.94ms
preact-local1210.67ms - 1224.79msunsure 🔍
-0% - +1%
-3.94ms - +12.56ms		-unsure 🔍
-1% - +0%
-14.51ms - +4.32ms
preact-hooks1216.60ms - 1229.04msslower ❌
0% - 1%
1.86ms - 16.94ms		unsure 🔍
-0% - +1%
-4.32ms - +14.51ms		-

usedJSHeapSize

VersionAvg timevs preact-mastervs preact-localvs preact-hooks
preact-master25.52ms - 25.52ms-unsure 🔍
-0% - +0%
-0.00ms - +0.00ms		unsure 🔍
-0% - -0%
-0.02ms - -0.02ms
preact-local25.52ms - 25.52msunsure 🔍
-0% - +0%
-0.00ms - +0.00ms		-unsure 🔍
-0% - -0%
-0.02ms - -0.02ms
preact-hooks25.54ms - 25.54msunsure 🔍
+0% - +0%
+0.02ms - +0.02ms		unsure 🔍
+0% - +0%
+0.02ms - +0.02ms		-
filter_list

duration

VersionAvg timevs preact-mastervs preact-localvs preact-hooks
preact-master23.19ms - 23.51ms-unsure 🔍
-2% - +0%
-0.47ms - +0.05ms		unsure 🔍
-2% - +0%
-0.51ms - +0.11ms
preact-local23.35ms - 23.76msunsure 🔍
-0% - +2%
-0.05ms - +0.47ms		-unsure 🔍
-1% - +1%
-0.33ms - +0.34ms
preact-hooks23.29ms - 23.81msunsure 🔍
-0% - +2%
-0.11ms - +0.51ms		unsure 🔍
-1% - +1%
-0.34ms - +0.33ms		-

usedJSHeapSize

VersionAvg timevs preact-mastervs preact-localvs preact-hooks
preact-master1.61ms - 1.61ms-unsure 🔍
-0% - +0%
-0.00ms - +0.00ms		faster ✔
1% - 1%
0.02ms - 0.02ms
preact-local1.61ms - 1.61msunsure 🔍
-0% - +0%
-0.00ms - +0.00ms		-faster ✔
1% - 1%
0.02ms - 0.02ms
preact-hooks1.63ms - 1.63msslower ❌
1% - 1%
0.02ms - 0.02ms		slower ❌
1% - 1%
0.02ms - 0.02ms		-
hydrate1k

duration

VersionAvg timevs preact-mastervs preact-localvs preact-hooks
preact-master110.48ms - 112.02ms-unsure 🔍
-2% - +1%
-1.74ms - +1.07ms		unsure 🔍
-2% - +0%
-2.59ms - +0.21ms
preact-local110.41ms - 112.76msunsure 🔍
-1% - +2%
-1.07ms - +1.74ms		-unsure 🔍
-2% - +1%
-2.52ms - +0.80ms
preact-hooks111.27ms - 113.61msunsure 🔍
-0% - +2%
-0.21ms - +2.59ms		unsure 🔍
-1% - +2%
-0.80ms - +2.52ms		-

usedJSHeapSize

VersionAvg timevs preact-mastervs preact-localvs preact-hooks
preact-master13.94ms - 14.58ms-unsure 🔍
-2% - +6%
-0.21ms - +0.80ms		unsure 🔍
-1% - +7%
-0.07ms - +0.99ms
preact-local13.58ms - 14.36msunsure 🔍
-6% - +1%
-0.80ms - +0.21ms		-unsure 🔍
-3% - +5%
-0.41ms - +0.75ms
preact-hooks13.37ms - 14.22msunsure 🔍
-7% - +0%
-0.99ms - +0.07ms		unsure 🔍
-5% - +3%
-0.75ms - +0.41ms		-
many_updates

duration

VersionAvg timevs preact-mastervs preact-localvs preact-hooks
preact-master24.43ms - 25.55ms-unsure 🔍
-3% - +3%
-0.78ms - +0.76ms		unsure 🔍
-5% - +1%
-1.22ms - +0.30ms
preact-local24.48ms - 25.52msunsure 🔍
-3% - +3%
-0.76ms - +0.78ms		-unsure 🔍
-5% - +1%
-1.18ms - +0.28ms
preact-hooks24.93ms - 25.96msunsure 🔍
-1% - +5%
-0.30ms - +1.22ms		unsure 🔍
-1% - +5%
-0.28ms - +1.18ms		-

usedJSHeapSize

VersionAvg timevs preact-mastervs preact-localvs preact-hooks
preact-master4.65ms - 4.65ms-unsure 🔍
-0% - +0%
-0.00ms - +0.00ms		unsure 🔍
-0% - -0%
-0.02ms - -0.02ms
preact-local4.65ms - 4.65msunsure 🔍
-0% - +0%
-0.00ms - +0.00ms		-unsure 🔍
-0% - -0%
-0.02ms - -0.02ms
preact-hooks4.67ms - 4.67msunsure 🔍
+0% - +0%
+0.02ms - +0.02ms		unsure 🔍
+0% - +0%
+0.02ms - +0.02ms		-
text_update

duration

VersionAvg timevs preact-mastervs preact-localvs preact-hooks
preact-master2.90ms - 2.95ms-unsure 🔍
-0% - +2%
-0.01ms - +0.05ms		faster ✔
3% - 5%
0.09ms - 0.15ms
preact-local2.89ms - 2.93msunsure 🔍
-2% - +0%
-0.05ms - +0.01ms		-faster ✔
4% - 5%
0.11ms - 0.17ms
preact-hooks3.02ms - 3.07msslower ❌
3% - 5%
0.09ms - 0.15ms		slower ❌
4% - 6%
0.11ms - 0.17ms		-

usedJSHeapSize

VersionAvg timevs preact-mastervs preact-localvs preact-hooks
preact-master0.83ms - 0.83ms-unsure 🔍
-0% - -0%
-0.00ms - -0.00ms		faster ✔
2% - 2%
0.01ms - 0.01ms
preact-local0.83ms - 0.83msunsure 🔍
+0% - +0%
+0.00ms - +0.00ms		-faster ✔
2% - 2%
0.01ms - 0.01ms
preact-hooks0.84ms - 0.84msslower ❌
2% - 2%
0.01ms - 0.01ms		slower ❌
2% - 2%
0.01ms - 0.01ms		-
todo

duration

VersionAvg timevs preact-mastervs preact-localvs preact-hooks
preact-master54.25ms - 55.41ms-unsure 🔍
-1% - +2%
-0.35ms - +0.95ms		faster ✔
0% - 3%
0.26ms - 1.57ms
preact-local54.25ms - 54.81msunsure 🔍
-2% - +1%
-0.95ms - +0.35ms		-faster ✔
1% - 3%
0.81ms - 1.63ms
preact-hooks55.45ms - 56.05msslower ❌
0% - 3%
0.26ms - 1.57ms		slower ❌
1% - 3%
0.81ms - 1.63ms		-

usedJSHeapSize

VersionAvg timevs preact-mastervs preact-localvs preact-hooks
preact-master1.11ms - 1.12ms-unsure 🔍
-0% - +0%
-0.00ms - +0.00ms		faster ✔
3% - 3%
0.03ms - 0.03ms
preact-local1.11ms - 1.12msunsure 🔍
-0% - +0%
-0.00ms - +0.00ms		-faster ✔
2% - 3%
0.03ms - 0.03ms
preact-hooks1.14ms - 1.15msslower ❌
3% - 3%
0.03ms - 0.03ms		slower ❌
2% - 3%
0.03ms - 0.03ms		-

tachometer-reporter-action v2 for Benchmarks

@coveralls

coveralls commented Jan 13, 2023 •
edited
Loading

Copy link
Copy Markdown

Coverage Status

Coverage: 99.531%. Remained the same when pulling 9e8691d on remove-css-custom-props into 2ce7b0a on master.

@github-actions

github-actions Bot commented Jan 13, 2023 •
edited
Loading

Copy link
Copy Markdown

Size Change: +14 B (0%)

Total Size: 52.9 kB

Filename Size Change
dist/preact.js 4.06 kB +3 B (0%)
dist/preact.min.js 4.08 kB +2 B (0%)
dist/preact.min.module.js 4.08 kB +2 B (0%)
dist/preact.min.umd.js 4.11 kB +2 B (0%)
dist/preact.module.js 4.07 kB +2 B (0%)
dist/preact.umd.js 4.12 kB +3 B (0%)
ℹ️ View Unchanged
Filename Size Change
compat/dist/compat.js 3.81 kB 0 B
compat/dist/compat.module.js 3.75 kB 0 B
compat/dist/compat.umd.js 3.87 kB 0 B
debug/dist/debug.js 3 kB 0 B
debug/dist/debug.module.js 3.01 kB 0 B
debug/dist/debug.umd.js 3.08 kB 0 B
devtools/dist/devtools.js 231 B 0 B
devtools/dist/devtools.module.js 240 B 0 B
devtools/dist/devtools.umd.js 315 B 0 B
hooks/dist/hooks.js 1.49 kB 0 B
hooks/dist/hooks.module.js 1.52 kB 0 B
hooks/dist/hooks.umd.js 1.57 kB 0 B
jsx-runtime/dist/jsxRuntime.js 358 B 0 B
jsx-runtime/dist/jsxRuntime.module.js 324 B 0 B
jsx-runtime/dist/jsxRuntime.umd.js 439 B 0 B
test-utils/dist/testUtils.js 442 B 0 B
test-utils/dist/testUtils.module.js 444 B 0 B
test-utils/dist/testUtils.umd.js 526 B 0 B

compressed-size-action

@andrewiggins

andrewiggins commented Jan 14, 2023

Copy link
Copy Markdown
Member Author

P.S. Is this something we can file as a spec bug/change to HTML or CSS? Or is this one of the can of worms not worth opening 😅?

@andrewiggins

andrewiggins commented Jan 19, 2023

Copy link
Copy Markdown
Member Author

Gonna keep this in core since we already coerce undefined and null to empty string when setting style properties. This change makes our usage of setProperty aligned to what we do for style properties.

@andrewiggins andrewiggins merged commit c483d96 into master Jan 19, 2023
@andrewiggins andrewiggins deleted the remove-css-custom-props branch January 19, 2023 07:28
JoviDeCroock added a commit that referenced this pull request Jan 12, 2024
@JoviDeCroock
backport #3862
71be5f8
JoviDeCroock added a commit that referenced this pull request Jan 12, 2024
@JoviDeCroock
chore: backport 10.12.x to v11 (#4255)
36ef4e8 
* backport #3871

* port test from #3884 functionality seems to work in v11

* backport #3880

* backport #3875

* backport #3862

* add todo for #3801

* backport #3868

* backport #3867

* backport #3863

* add todo for #3856

* backport #3844

* backport #3816

* backport #3888

* backport #3889
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@JoviDeCroock JoviDeCroock JoviDeCroock approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Different behavior for keys with undefined properties in style objects using preact/compat

3 participants

@andrewiggins @coveralls @JoviDeCroock