#666 support css variables #827

tkh44 · 2017-08-22T20:33:29Z

This is most likely unacceptable as far as size goes, but I wanted to get the process started.

Note that PhantomJS does not support cssText with custom properties in it. No idea what to do about this other than to drop css vars from that test.

fixes #666

coveralls · 2017-08-22T20:39:28Z

Coverage remained the same at 100.0% when pulling 8a8e685 on tkh44:666-support-css-variables into 0dea3b7 on developit:master.

developit · 2017-08-23T02:40:53Z

src/dom/index.js

@@ -52,10 +52,21 @@ export function setAccessor(node, name, old, value, isSvg) {
 		}
 		if (value && typeof value==='object') {
 			if (typeof old!=='string') {
-				for (let i in old) if (!(i in value)) node.style[i] = '';
+				for (let i in old) if (!(i in value)) {
+					if (i.indexOf('--') === 0) {


I think we can always use setProperty() / removeProperty() here, which saves a bunch of bytes. AFAIK style.setProperty('color', 'red') is equivalent to style.color='red'.

just re-read the original thread, i was wrong since setProperty() uses CSS case rather than camelCase. poop! one option would be if (~i.indexOf('-')), which might be neat since it also enables support for css-case in general.

Damn GitHub collapsing comments. Missed this

developit · 2017-08-23T02:46:55Z

Awesome.

Regarding the testing, it's probably a good time to switch the default launcher to be Headless Chrome, I don't really use Phantom for Preact anymore since the performance numbers are unreliable.

with '-' preactjs#666

coveralls · 2017-08-23T03:27:07Z

Coverage remained the same at 100.0% when pulling 7273c81 on tkh44:666-support-css-variables into 0dea3b7 on developit:master.

developit · 2017-08-23T23:42:30Z

the bundle size thing didn't kick in, but it looks like this goes from 3444 -> 3482 (+38b). Honestly that's not too bad, and I really want CSS variables support.

One size thing I thought of - do you think style.setProperty('--foo', '') would work like style.removeProperty('--foo')? Would cut a few bytes after gzip.

preactjs#666

tkh44 · 2017-08-24T05:15:23Z

do you think style.setProperty('--foo', '') would work like style.removeProperty('--foo')?

According to MDN this should work style.setProperty('--foo'), but it errors in chrome. style.setProperty('--foo', '') works fine though and is mentioned in the spec: If value is the empty string, invoke removeProperty() with property as argument and terminate this algorithm so 👍

coveralls · 2017-08-24T05:18:34Z

Coverage remained the same at 100.0% when pulling b98bc18 on tkh44:666-support-css-variables into 0dea3b7 on developit:master.

coveralls · 2017-08-24T15:04:54Z

Coverage remained the same at 100.0% when pulling b2c742e on tkh44:666-support-css-variables into 73866a4 on developit:master.

jveyssie100614 · 2018-05-22T19:14:27Z

What about using the ternary operator ?

	 ~i.indexOf('-')
		 ? node.style.setProperty(i, value[i]) 
		 : node.style[i] = typeof value[i]==='number' && IS_NON_DIMENSIONAL.test(i)===false 
			? (value[i]+'px') 
			: value[i];

lionralfs · 2018-05-22T19:25:17Z

@JeremyVSR pretty sure it gets minified like that anyways.

But I think removing the ===false check and flipping the ternary on the Regex check might save a few bytes.

lukeed

Untested -- assumes everything can be set via setProperty, which looks to be the case at quick glance.

lukeed · 2018-05-22T19:50:02Z

src/dom/index.js

@@ -58,10 +58,21 @@ export function setAccessor(node, name, old, value, isSvg) {
 		}
 		if (value && typeof value==='object') {
 			if (typeof old!=='string') {
-				for (let i in old) if (!(i in value)) node.style[i] = '';
+				for (let i in old) if (!(i in value)) {


Challenge: https://twitter.com/preactjs/status/998981752130588673

if (value && typeof value==='object') { let i; // placeholder if (typeof old!=='string') { for (i in old) { if (!(i in value)) node.style.setProperty(i, ''); } } for (i in value) { node.style.setProperty(i, typeof value[i]==='number' && IS_NON_DIMENSIONAL.test(i)===false ? (value[i]+'px') : value[i]); } }

This would be backwards incompatible. Doesn't work for properties that are defined using camel-casing.

node.style.backgroundColor = value; // works node.style['background-color'] = value; // works node.style.setProperty('background-color', value); // works node.style.setProperty('backgroundColor', value); // doesn't work

@PepsRyuu aye, saw this after 🙈 /delete

andrewiggins · 2018-05-26T23:17:08Z

@tkh44 Do we need the if checks at all? I removed the if statements (shown below) and the PR size was reduced by 17 bytes, so its size is now only +9 bytes on top of master. All tests pass. I quickly checked in a handful in browsers and I think this should work. It appears setProperty doesn't throw an error on invalid property names (which will happen if a component defines something like backgroundColor like you've pointed out).

if (value && typeof value==='object') {
	if (typeof old!=='string') {
		for (let i in old) if (!(i in value)) {
			node.style.setProperty(i, '');
			node.style[i] = '';
		}
	}
	for (let i in value) {
		node.style.setProperty(i, value[i]);
		node.style[i] = typeof value[i]==='number' && IS_NON_DIMENSIONAL.test(i)===false ? (value[i]+'px') : value[i];
	}
}

tkh44 · 2018-05-29T20:06:04Z

@andrewiggins that should work. There was a bug in the older code that I just realized.

typeof value[i] ===
				'number' &&
				IS_NON_DIMENSIONAL.test(i) === false ? (value[i] + 'px') : value[i])

needs to be in both the setProperty and the assignment.

abstracting it would look like

function a(b) { typeof b ===
				'number' &&
				IS_NON_DIMENSIONAL.test(i) === false ? (b + 'px') : b)

Not sure where this puts us in terms of bytes.

developit · 2018-08-16T17:36:01Z

src/dom/index.js

@@ -83,10 +83,21 @@ export function setAccessor(node, name, old, value, isSvg) {
 		}
 		if (value && typeof value==='object') {
 			if (typeof old!=='string') {
-				for (let i in old) if (!(i in value)) node.style[i] = '';
+				for (let i in old) if (!(i in value)) {
+					if (~i.indexOf('-')) {


We should check what the size is when doing if (i[0]=='-') - we only care about using setProperty for custom properties, so it'll always be a leading --.

marvinhagemeister · 2019-03-08T17:06:48Z

Closing, we finally have support for css variables in Preact X 🎉💯

Kye Hohenberger added 3 commits May 19, 2017 16:14

Merge branch 'master' of https://github.com/developit/preact

0f08806

Merge branch 'master' of https://github.com/developit/preact

eec3951

preactjs#666 - Add support for CSS Custom Properties

8a8e685

developit reviewed Aug 23, 2017

View reviewed changes

- optimize for size and perf in cases when a css property starts

7273c81

with '-' preactjs#666

- use setProperty instead of removeProperty to optimize for gzip

b98bc18

preactjs#666

Merge branch 'master' into 666-support-css-variables

7cbcc0d

tkh44 mentioned this pull request Aug 24, 2017

Add dynamic value support for extract static in the styled function. emotion-js/emotion#279

Closed

6 tasks

developit added the help wanted label May 22, 2018

developit added 2 commits May 22, 2018 13:24

Merge branch 'master' into 666-support-css-variables

db44005

fix tests

79ca673

lukeed reviewed May 22, 2018

View reviewed changes

tkh44 and others added 2 commits May 29, 2018 15:00

Merge branch 'master' into 666-support-css-variables

d9bca90

Merge branch 'master' into 666-support-css-variables

b2c742e

developit reviewed Aug 16, 2018

View reviewed changes

marvinhagemeister added the in X label Feb 24, 2019

marvinhagemeister closed this Mar 8, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

#666 support css variables #827

#666 support css variables #827

tkh44 commented Aug 22, 2017

coveralls commented Aug 22, 2017

developit Aug 23, 2017

developit Aug 23, 2017 •

edited

Loading

lukeed May 22, 2018

developit commented Aug 23, 2017

coveralls commented Aug 23, 2017

developit commented Aug 23, 2017 •

edited

Loading

tkh44 commented Aug 24, 2017 •

edited

Loading

coveralls commented Aug 24, 2017

coveralls commented Aug 24, 2017 •

edited

Loading

jveyssie100614 commented May 22, 2018

lionralfs commented May 22, 2018

lukeed left a comment

lukeed May 22, 2018

PepsRyuu May 23, 2018

lukeed May 23, 2018

andrewiggins commented May 26, 2018

tkh44 commented May 29, 2018

developit Aug 16, 2018

marvinhagemeister commented Mar 8, 2019

#666 support css variables #827

#666 support css variables #827

Conversation

tkh44 commented Aug 22, 2017

coveralls commented Aug 22, 2017

developit Aug 23, 2017

Choose a reason for hiding this comment

developit Aug 23, 2017 • edited Loading

Choose a reason for hiding this comment

lukeed May 22, 2018

Choose a reason for hiding this comment

developit commented Aug 23, 2017

coveralls commented Aug 23, 2017

developit commented Aug 23, 2017 • edited Loading

tkh44 commented Aug 24, 2017 • edited Loading

coveralls commented Aug 24, 2017

coveralls commented Aug 24, 2017 • edited Loading

jveyssie100614 commented May 22, 2018

lionralfs commented May 22, 2018

lukeed left a comment

Choose a reason for hiding this comment

lukeed May 22, 2018

Choose a reason for hiding this comment

PepsRyuu May 23, 2018

Choose a reason for hiding this comment

lukeed May 23, 2018

Choose a reason for hiding this comment

andrewiggins commented May 26, 2018

tkh44 commented May 29, 2018

developit Aug 16, 2018

Choose a reason for hiding this comment

marvinhagemeister commented Mar 8, 2019

developit Aug 23, 2017 •

edited

Loading

developit commented Aug 23, 2017 •

edited

Loading

tkh44 commented Aug 24, 2017 •

edited

Loading

coveralls commented Aug 24, 2017 •

edited

Loading