[ts] Use CSSStyleDeclaration for CSS property list #2869

developit · 2020-12-16T03:59:51Z

This removes the validation we added in 10.5.6, since it's unfortunately not yet possible to allow known CSS properties and wildcard --.* custom properties (see attempt: https://gist.github.com/developit/3a29186588634648e45e8afb199626df).

Fixes #2862.

This removes the validation we added in 10.5.6, since it's unfortunately not yet possible to allow known CSS properties and wildcard `--.*` custom properties (see attempt: https://gist.github.com/developit/3a29186588634648e45e8afb199626df).

github-actions · 2020-12-16T04:00:15Z

📊 Tachometer Benchmark Results

Summary

duration

02_replace1k: unsure 🔍 -3% - +0% (-4.14ms - +0.27ms)
^{preact-local vs preact-master}
03_update10th1k_x16: unsure 🔍 -4% - +4% (-1.32ms - +1.33ms)
^{preact-local vs preact-master}
07_create10k: unsure 🔍 -7% - +6% (-140.85ms - +123.14ms)
^{preact-local vs preact-master}
filter_list: unsure 🔍 -3% - +2% (-0.71ms - +0.59ms)
^{preact-local vs preact-master}
hydrate1k: unsure 🔍 -3% - +2% (-3.44ms - +3.06ms)
^{preact-local vs preact-master}
many_updates: unsure 🔍 -0% - +15% (-0.08ms - +5.10ms)
^{preact-local vs preact-master}
text_update: unsure 🔍 -5% - +3% (-0.17ms - +0.12ms)
^{preact-local vs preact-master}

usedJSHeapSize

02_replace1k: unsure 🔍 -0% - +0% (-0.01ms - +0.01ms)
^{preact-local vs preact-master}
03_update10th1k_x16: unsure 🔍 -0% - +0% (-0.01ms - +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 🔍 -0% - +0% (-0.02ms - +0.00ms)
^{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}

Results

02_replace1k

Browser: chrome-headless 87.0.4280.88
Sample size: 80
Built by: CI #587
Commit: 5379194

duration

Version	Avg time	vs preact-master	vs preact-local
preact-master	145.22ms - 148.11ms	-	unsure 🔍 -0% - +3% -0.27ms - +4.14ms
preact-local	143.07ms - 146.39ms	unsure 🔍 -3% - +0% -4.14ms - +0.27ms	-

usedJSHeapSize

Version	Avg time	vs preact-master	vs preact-local
preact-master	3.60ms - 3.61ms	-	unsure 🔍 -0% - +0% -0.01ms - +0.01ms
preact-local	3.60ms - 3.61ms	unsure 🔍 -0% - +0% -0.01ms - +0.01ms	-

run-warmup-0

Version	Avg time	vs preact-master	vs preact-local
preact-master	54.56ms - 55.69ms	-	unsure 🔍 -1% - +1% -0.77ms - +0.71ms
preact-local	54.68ms - 55.64ms	unsure 🔍 -1% - +1% -0.71ms - +0.77ms	-

run-warmup-1

Version	Avg time	vs preact-master	vs preact-local
preact-master	86.17ms - 87.44ms	-	unsure 🔍 -1% - +1% -0.87ms - +0.97ms
preact-local	86.08ms - 87.42ms	unsure 🔍 -1% - +1% -0.97ms - +0.87ms	-

run-warmup-2

Version	Avg time	vs preact-master	vs preact-local
preact-master	97.14ms - 100.40ms	-	unsure 🔍 -2% - +2% -2.13ms - +2.17ms
preact-local	97.34ms - 100.15ms	unsure 🔍 -2% - +2% -2.17ms - +2.13ms	-

run-warmup-3

Version	Avg time	vs preact-master	vs preact-local
preact-master	53.46ms - 55.58ms	-	unsure 🔍 -2% - +4% -0.85ms - +1.90ms
preact-local	53.12ms - 54.86ms	unsure 🔍 -3% - +2% -1.90ms - +0.85ms	-

run-warmup-4

Version	Avg time	vs preact-master	vs preact-local
preact-master	95.69ms - 101.56ms	-	unsure 🔍 -7% - +0% -7.68ms - +0.48ms
preact-local	99.39ms - 105.07ms	unsure 🔍 -1% - +8% -0.48ms - +7.68ms	-

run-final

Version	Avg time	vs preact-master	vs preact-local
preact-master	53.92ms - 55.17ms	-	unsure 🔍 -0% - +3% -0.08ms - +1.64ms
preact-local	53.18ms - 54.36ms	unsure 🔍 -3% - +0% -1.64ms - +0.08ms	-

03_update10th1k_x16

Browser: chrome-headless 87.0.4280.88
Sample size: 70
Built by: CI #587
Commit: 5379194

duration

Version	Avg time	vs preact-master	vs preact-local
preact-master	28.82ms - 30.72ms	-	unsure 🔍 -4% - +4% -1.33ms - +1.32ms
preact-local	28.85ms - 30.70ms	unsure 🔍 -4% - +4% -1.32ms - +1.33ms	-

usedJSHeapSize

Version	Avg time	vs preact-master	vs preact-local
preact-master	3.52ms - 3.53ms	-	unsure 🔍 -0% - +0% -0.01ms - +0.01ms
preact-local	3.52ms - 3.53ms	unsure 🔍 -0% - +0% -0.01ms - +0.01ms	-

07_create10k

Browser: chrome-headless 87.0.4280.88
Sample size: 70
Built by: CI #587
Commit: 5379194

duration

Version	Avg time	vs preact-master	vs preact-local
preact-master	2018.31ms - 2218.65ms	-	unsure 🔍 -6% - +7% -123.14ms - +140.85ms
preact-local	2023.67ms - 2195.59ms	unsure 🔍 -7% - +6% -140.85ms - +123.14ms	-

usedJSHeapSize

Version	Avg time	vs preact-master	vs preact-local
preact-master	25.99ms - 25.99ms	-	unsure 🔍 -0% - +0% -0.00ms - +0.00ms
preact-local	25.99ms - 25.99ms	unsure 🔍 -0% - +0% -0.00ms - +0.00ms	-

filter_list

Browser: chrome-headless 87.0.4280.88
Sample size: 50
Built by: CI #587
Commit: 5379194

duration

Version	Avg time	vs preact-master	vs preact-local
preact-master	27.47ms - 28.34ms	-	unsure 🔍 -2% - +3% -0.59ms - +0.71ms
preact-local	27.36ms - 28.33ms	unsure 🔍 -3% - +2% -0.71ms - +0.59ms	-

usedJSHeapSize

Version	Avg time	vs preact-master	vs preact-local
preact-master	1.60ms - 1.60ms	-	unsure 🔍 -0% - +0% -0.00ms - +0.00ms
preact-local	1.60ms - 1.60ms	unsure 🔍 -0% - +0% -0.00ms - +0.00ms	-

hydrate1k

Browser: chrome-headless 87.0.4280.88
Sample size: 50
Built by: CI #587
Commit: 5379194

duration

Version	Avg time	vs preact-master	vs preact-local
preact-master	130.55ms - 135.78ms	-	unsure 🔍 -2% - +3% -3.06ms - +3.44ms
preact-local	131.05ms - 134.90ms	unsure 🔍 -3% - +2% -3.44ms - +3.06ms	-

usedJSHeapSize

Version	Avg time	vs preact-master	vs preact-local
preact-master	6.19ms - 6.21ms	-	unsure 🔍 -0% - +0% -0.00ms - +0.02ms
preact-local	6.19ms - 6.19ms	unsure 🔍 -0% - +0% -0.02ms - +0.00ms	-

many_updates

Browser: chrome-headless 87.0.4280.88
Sample size: 80
Built by: CI #587
Commit: 5379194

duration

Version	Avg time	vs preact-master	vs preact-local
preact-master	32.09ms - 35.37ms	-	unsure 🔍 -14% - -0% -5.10ms - +0.08ms
preact-local	34.24ms - 38.24ms	unsure 🔍 -0% - +15% -0.08ms - +5.10ms	-

usedJSHeapSize

Version	Avg time	vs preact-master	vs preact-local
preact-master	4.85ms - 4.85ms	-	unsure 🔍 -0% - +0% -0.00ms - +0.00ms
preact-local	4.85ms - 4.85ms	unsure 🔍 -0% - +0% -0.00ms - +0.00ms	-

text_update

Browser: chrome-headless 87.0.4280.88
Sample size: 50
Built by: CI #587
Commit: 5379194

duration

Version	Avg time	vs preact-master	vs preact-local
preact-master	3.58ms - 3.74ms	-	unsure 🔍 -3% - +5% -0.12ms - +0.17ms
preact-local	3.51ms - 3.76ms	unsure 🔍 -5% - +3% -0.17ms - +0.12ms	-

usedJSHeapSize

Version	Avg time	vs preact-master	vs preact-local
preact-master	0.83ms - 0.83ms	-	unsure 🔍 -0% - +0% -0.00ms - +0.00ms
preact-local	0.83ms - 0.83ms	unsure 🔍 -0% - +0% -0.00ms - +0.00ms	-

_{tachometer-reporter-action v2 for CI}

github-actions · 2020-12-16T04:02:44Z

Size Change: 0 B

Total Size: 41.5 kB

ℹ️ View Unchanged

Filename	Size	Change
`compat/dist/compat.js`	3.23 kB	0 B
`compat/dist/compat.module.js`	3.23 kB	0 B
`compat/dist/compat.umd.js`	3.28 kB	0 B
`debug/dist/debug.js`	2.99 kB	0 B
`debug/dist/debug.module.js`	2.98 kB	0 B
`debug/dist/debug.umd.js`	3.07 kB	0 B
`devtools/dist/devtools.js`	185 B	0 B
`devtools/dist/devtools.module.js`	195 B	0 B
`devtools/dist/devtools.umd.js`	261 B	0 B
`dist/preact.js`	4.02 kB	0 B
`dist/preact.min.js`	4.04 kB	0 B
`dist/preact.module.js`	4.03 kB	0 B
`dist/preact.umd.js`	4.08 kB	0 B
`hooks/dist/hooks.js`	1.13 kB	0 B
`hooks/dist/hooks.module.js`	1.15 kB	0 B
`hooks/dist/hooks.umd.js`	1.2 kB	0 B
`jsx-runtime/dist/jsxRuntime.js`	327 B	0 B
`jsx-runtime/dist/jsxRuntime.module.js`	335 B	0 B
`jsx-runtime/dist/jsxRuntime.umd.js`	405 B	0 B
`test-utils/dist/testUtils.js`	437 B	0 B
`test-utils/dist/testUtils.module.js`	439 B	0 B
`test-utils/dist/testUtils.umd.js`	515 B	0 B

_{compressed-size-action}

natemoo-re · 2020-12-17T15:39:46Z

@developit Wildcard custom properties will be possible when generalized index signatures lands in [email protected].

type CSSCustomProperties = {
  [key in `--${string}`]?: string | null | undefined;
}

Here is a TypeScript Playground Link with a working implementation.

coveralls · 2020-12-21T16:49:10Z

Coverage remained the same at 100.0% when pulling 0244869 on ts-use-dom-cssom into 0de465a on master.

marvinhagemeister

Sweet 🙌

octogonz · 2022-02-20T02:18:33Z

@developit The csstype dependency probably should have been removed with this PR:

preact/package.json

Line 257 in df2dbd8

"csstype": "^3.0.5",

It seems to be not used anywhere in this project.

Follow up to PR #2869

developit requested a review from marvinhagemeister December 16, 2020 03:59

developit added 2 commits December 15, 2020 23:00

Delete copy-csstype.js

3c9d499

Update package.json

6818c7d

JoviDeCroock approved these changes Dec 16, 2020

View reviewed changes

developit and others added 4 commits December 16, 2020 19:51

Merge branch 'master' into ts-use-dom-cssom

b9279ab

update package lock

739a78b

fix CSS number properties

c66454a

maybe changing the order will work

687d280

developit and others added 2 commits December 21, 2020 10:46

Merge branch 'master' into ts-use-dom-cssom

c1f2306

Fix for TS<=3.6

0244869

marvinhagemeister approved these changes Dec 21, 2020

View reviewed changes

developit merged commit e8a4c46 into master Dec 21, 2020

developit deleted the ts-use-dom-cssom branch December 21, 2020 16:59

marvinhagemeister mentioned this pull request Feb 20, 2022

Remove unused devDependency #3460

Merged

marvinhagemeister added a commit that referenced this pull request Feb 20, 2022

Remove csstype leftovers

0eaed43

Follow up to PR #2869

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[ts] Use CSSStyleDeclaration for CSS property list #2869

[ts] Use CSSStyleDeclaration for CSS property list #2869

developit commented Dec 16, 2020

github-actions bot commented Dec 16, 2020 •

edited

Loading

📊 Tachometer Benchmark Results

Summary

duration

usedJSHeapSize

Results

duration

usedJSHeapSize

run-warmup-0

run-warmup-1

run-warmup-2

run-warmup-3

run-warmup-4

run-final

duration

usedJSHeapSize

duration

usedJSHeapSize

duration

usedJSHeapSize

duration

usedJSHeapSize

duration

usedJSHeapSize

duration

usedJSHeapSize

github-actions bot commented Dec 16, 2020 •

edited

Loading

natemoo-re commented Dec 17, 2020 •

edited

Loading

coveralls commented Dec 21, 2020

marvinhagemeister left a comment

octogonz commented Feb 20, 2022 •

edited

Loading

[ts] Use CSSStyleDeclaration for CSS property list #2869

[ts] Use CSSStyleDeclaration for CSS property list #2869

Conversation

developit commented Dec 16, 2020

github-actions bot commented Dec 16, 2020 • edited Loading

📊 Tachometer Benchmark Results

Summary

duration

usedJSHeapSize

Results

duration

usedJSHeapSize

run-warmup-0

run-warmup-1

run-warmup-2

run-warmup-3

run-warmup-4

run-final

duration

usedJSHeapSize

duration

usedJSHeapSize

duration

usedJSHeapSize

duration

usedJSHeapSize

duration

usedJSHeapSize

duration

usedJSHeapSize

github-actions bot commented Dec 16, 2020 • edited Loading

natemoo-re commented Dec 17, 2020 • edited Loading

coveralls commented Dec 21, 2020

marvinhagemeister left a comment

Choose a reason for hiding this comment

octogonz commented Feb 20, 2022 • edited Loading

github-actions bot commented Dec 16, 2020 •

edited

Loading

github-actions bot commented Dec 16, 2020 •

edited

Loading

natemoo-re commented Dec 17, 2020 •

edited

Loading

octogonz commented Feb 20, 2022 •

edited

Loading