CSS: Don't automatically add "px" to properties with a few exceptions #4055

mgol · 2018-04-24T08:32:56Z

Summary

Don't automatically add "px" to properties with a few exceptions

Fixes gh-2795
Ref gh-4009

This is an alternative to PR #4053.

Const over #4053:

~~it matches more than we theoretically want (the list in WIP CSS: Don't automatically add "px" to properties with a few exceptions #4053 is precise), e.g. non-existent props like top-width~~
it's a little slower than WIP CSS: Don't automatically add "px" to properties with a few exceptions #4053 as it uses a regex instead of a simple property checking.

Pros over #4053:

it only adds ~~1 byte~~ 6 bytes instead of 120

Checklist

All authors have signed the CLA at https://cla.js.foundation/jquery/jquery
New tests have been added to show the fix or feature works
Grunt build and unit tests pass locally with these changes
If needed, a docs issue/PR was created at https://github.com/jquery/api.jquery.com

dmethvin

LGTM, just the comment change

dmethvin · 2018-04-24T12:12:52Z

src/css.js

@@ -247,7 +231,7 @@ jQuery.extend( {

 			// If a number was passed in, add the unit (except for certain CSS properties)


Comment should be changed as well, something like If the value is a number, add px for certain CSS properties.

Nice catch; changed.

dmethvin · 2018-04-24T12:17:09Z

src/css/var/isAutoPx.js

+	//        |-+-|  Border   |-+-+-| Bottom |-+-|-+-|          |-+-END
+	//        |    \ Padding /       \ Left /    |    \ Height /
+	//        |                                  |
+	// BEGIN -|            /---------\           |


This does recognize some strings that are not currently CSS properties (like PaddingLeftWidth) but it's safe to assume they will never be CSS properties. Besides it only comes into play if a number is passed in.

Hmm, border is a little special here in that it differs from margin and padding. I could try extracting it but we'll end up with more than +1 byte then. ;)

There are also others non-existing values like topWidth. That's not ideal but the important part is the list is finite and not that large.

I worry it also matches min & max - there are no such things in CSS but I wouldn't be surprised if they were added; it'd be worth to exclude them.

mgol · 2018-04-24T13:35:27Z

@dmethvin I updated the regexp (again). It now adds 7 6 bytes instead of 1 but I think it catches exactly what we want and nothing else. :) I updated the graph for the regex as well.

dmethvin · 2018-04-25T19:07:25Z

Nice!

mgol · 2018-04-25T19:28:25Z

src/css/adjustCSS.js


 		// Starting value computation is required for potential unit mismatches
-		initialInUnit = ( jQuery.cssNumber[ prop ] || unit !== "px" && +initial ) &&
+		initialInUnit = elem.nodeType &&


Without this change, effects tests were failing on non-element objects on an a property. I've noticed they were already failing if a was changed to anything from jQuery.cssNumber and this PR makes almost everything "like from jQuery.cssNumber".

The nodeType check should most likely already be there, perhaps we should add it for 3.4.0 as well?

Oh, ugh. Put another way, we only want to add "px" to property values if they're on DOM elements. I still wish we hadn't supported animating plain objects,.

I extracted this change to PR #4061.

#4601 landed, this PR rebased so this particular change is no longer a part of this PR.

Ref jquerygh-4055

Without this change animating properties from jQuery.cssNumber on non-elements throws an error. Ref jquerygh-4055

timmywil · 2018-04-30T16:02:36Z

src/css/var/isAutoPx.js

+	// The first test is used to ensure that:
+	// 1. The prop starts with a lowercase letter (as we uppercase it for the second regex).
+	// 2. The prop is not empty.
+	return /^[a-z]$/.test( prop[ 0 ] ) &&


Having a function is fine, but we should continue with the convention of creating regexes once outside of functions.

Without this change animating properties from jQuery.cssNumber on non-elements throws an error. Ref gh-4055 Closes gh-4061

gibson042

It would be nice to see explicit tests covering "px" appending for these 14 + 6 + 10 properties and non-appending for other properties (both real ones like "line-height" and similarly-named fakes like "MarginLeftWidth" and "BorderTopHeight").

gibson042 · 2018-04-30T16:34:16Z

src/css/var/isAutoPx.js

+	// The first test is used to ensure that:
+	// 1. The prop starts with a lowercase letter (as we uppercase it for the second regex).
+	// 2. The prop is not empty.
+	return /^[a-z]$/.test( prop[ 0 ] ) &&


Small savings here by replacing /^[a-z]$/.test( prop[ 0 ] ) with /^[a-z]/.test( prop ).

gibson042 · 2018-04-30T16:34:49Z

src/css/var/isAutoPx.js

+	// 1. The prop starts with a lowercase letter (as we uppercase it for the second regex).
+	// 2. The prop is not empty.
+	return /^[a-z]$/.test( prop[ 0 ] ) &&
+		/^(?:((?:Margin|Padding)?(?:Top|Right|Bottom|Left)?)|(?:Min|Max)?(?:Width|Height)|Border(?:Top|Right|Bottom|Left)?(?:Width)?)$/.test( prop[ 0 ].toUpperCase() + prop.substr( 1 ) );


mgol · 2018-04-30T18:32:52Z

It would be nice to see explicit tests covering "px" appending for these 14 + 6 + 10 properties and non-appending for other properties (both real ones like "line-height" and similarly-named fakes like "MarginLeftWidth" and "BorderTopHeight").

I intend to write the test for all matched props (I'll take the list from #4053) and add a few negative ones to the props from outside of the set. I just haven't gotten to it yet.

Thanks for the size reduction tips, I'll try them!

mgol · 2018-04-30T20:54:36Z

PR updated, tests were added, all remarks by @timmywil & @gibson042 addressed.

Thanks to @gibson042's clever remarks we're now down from +6 bytes to -9. 😲

mgol · 2018-04-30T20:56:52Z

@gibson042

It would be nice to see explicit tests covering "px" appending for these 14 + 6 + 10 properties and non-appending for other properties (both real ones like "line-height" and similarly-named fakes like "MarginLeftWidth" and "BorderTopHeight").

Most of these were added but it's hard to test fake ones as the browser throws them away so there's no observable effect.

mgol · 2018-06-04T16:37:10Z

PR rebased with a revert of the fix from PR #4064 as it's no longer needed when we switch to the whitelist.

-7 bytes as of now (compared to master @ 75b77b4).

@timmywil are your concerns resolved? Your re-review is needed.

timmywil · 2018-06-04T18:03:19Z

@mgol yes, that addressed my concern.

Fixes jquerygh-2795 Closes jquerygh-4055 Ref jquerygh-4009

mgol · 2019-04-08T17:02:20Z

Good news, suddenly it got down to -45 bytes compared to current master (c4f2fa2).

Fixes jquerygh-2795 Closes jquerygh-4055 Ref jquerygh-4009

mgol added CSS Behavior Change labels Apr 24, 2018

mgol added this to the 4.0.0 milestone Apr 24, 2018

mgol requested a review from dmethvin April 24, 2018 08:32

mgol mentioned this pull request Apr 24, 2018

WIP CSS: Don't automatically add "px" to properties with a few exceptions #4053

Closed

4 tasks

mgol added the Needs review label Apr 24, 2018

mgol force-pushed the css-no-autopx-v2 branch 3 times, most recently from a1c0a1e to 096afcf Compare April 24, 2018 08:41

dmethvin approved these changes Apr 24, 2018

View reviewed changes

mgol changed the title ~~CSS: Don't automatically add "px" to properties with a few exceptions~~ WIP CSS: Don't automatically add "px" to properties with a few exceptions Apr 24, 2018

mgol force-pushed the css-no-autopx-v2 branch 2 times, most recently from cd5c18a to b15c36b Compare April 24, 2018 13:34

mgol force-pushed the css-no-autopx-v2 branch 5 times, most recently from 55af87f to 9dcc840 Compare April 25, 2018 07:56

mgol force-pushed the css-no-autopx-v2 branch from 9dcc840 to 91551c9 Compare April 25, 2018 19:20

mgol commented Apr 25, 2018

View reviewed changes

mgol added a commit to mgol/jquery that referenced this pull request Apr 26, 2018

CSS: Skip the px-appending logic for animations of non-element props

0c9852a

Ref jquerygh-4055

mgol added a commit to mgol/jquery that referenced this pull request Apr 26, 2018

CSS: Skip the px-appending logic for animations of non-element props

aa1cdea

Without this change animating properties from jQuery.cssNumber on non-elements throws an error. Ref jquerygh-4055

mgol mentioned this pull request Apr 26, 2018

CSS: Skip the px-appending logic for animations of non-element props #4061

Merged

3 tasks

timmywil requested changes Apr 30, 2018

View reviewed changes

mgol added a commit that referenced this pull request Apr 30, 2018

CSS: Skip the px-appending logic for animations of non-element props

f5e36bd

Without this change animating properties from jQuery.cssNumber on non-elements throws an error. Ref gh-4055 Closes gh-4061

mgol force-pushed the css-no-autopx-v2 branch from 91551c9 to c834f76 Compare April 30, 2018 17:02

gibson042 reviewed Apr 30, 2018

View reviewed changes

mgol force-pushed the css-no-autopx-v2 branch from c834f76 to 15fe27b Compare April 30, 2018 20:53

gibson042 approved these changes May 1, 2018

View reviewed changes

mgol changed the title ~~WIP CSS: Don't automatically add "px" to properties with a few exceptions~~ CSS: Don't automatically add "px" to properties with a few exceptions May 1, 2018

mgol mentioned this pull request May 2, 2018

CSS: Don't auto-append "px" to CSS variables #4064

Merged

3 tasks

mgol force-pushed the css-no-autopx-v2 branch from 15fe27b to 1cda578 Compare May 2, 2018 15:12

mgol force-pushed the css-no-autopx-v2 branch from 1cda578 to 03e9dba Compare June 4, 2018 16:32

timmywil approved these changes Jun 4, 2018

View reviewed changes

timmywil removed the Needs review label Jun 18, 2018

This was referenced Sep 4, 2018

Add gridArea to unitless CSS properties facebook/react#13550

Merged

Consider stopping auto-adding px to number style values (except for a small whitelist) facebook/react#13567

Open

mgol force-pushed the css-no-autopx-v2 branch from 03e9dba to b3313af Compare January 17, 2019 17:16

mgol force-pushed the css-no-autopx-v2 branch 2 times, most recently from d3458b9 to ad41ce9 Compare March 11, 2019 19:04

mgol force-pushed the css-no-autopx-v2 branch from ad41ce9 to 2a4a3dd Compare April 8, 2019 16:23

mgol added a commit to mgol/jquery that referenced this pull request Apr 8, 2019

CSS: Don't automatically add "px" to properties with a few exceptions

2a4a3dd

Fixes jquerygh-2795 Closes jquerygh-4055 Ref jquerygh-4009

mgol force-pushed the css-no-autopx-v2 branch from 2a4a3dd to 8aa69b2 Compare April 8, 2019 16:59

mgol added a commit to mgol/jquery that referenced this pull request Apr 8, 2019

CSS: Don't automatically add "px" to properties with a few exceptions

8aa69b2

Fixes jquerygh-2795 Closes jquerygh-4055 Ref jquerygh-4009

mgol force-pushed the css-no-autopx-v2 branch from 8aa69b2 to c72d8ae Compare April 8, 2019 17:22

mgol added a commit to mgol/jquery that referenced this pull request Apr 8, 2019

CSS: Don't automatically add "px" to properties with a few exceptions

c72d8ae

Fixes jquerygh-2795 Closes jquerygh-4055 Ref jquerygh-4009

CSS: Don't automatically add "px" to properties with a few exceptions

00a9c2e

Fixes jquerygh-2795 Closes jquerygh-4055 Ref jquerygh-4009

mgol force-pushed the css-no-autopx-v2 branch from c72d8ae to 00a9c2e Compare April 8, 2019 17:26

mgol merged commit 00a9c2e into jquery:master Apr 8, 2019

mgol deleted the css-no-autopx-v2 branch April 8, 2019 17:31

mgol mentioned this pull request Apr 17, 2019

Remove deprecated methods in 4.0.0 #4056

Closed

2 tasks

lock bot locked as resolved and limited conversation to collaborators Oct 5, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

CSS: Don't automatically add "px" to properties with a few exceptions #4055

CSS: Don't automatically add "px" to properties with a few exceptions #4055

mgol commented Apr 24, 2018 •

edited by timmywil

Loading

dmethvin left a comment

dmethvin Apr 24, 2018

mgol Apr 24, 2018

dmethvin Apr 24, 2018

mgol Apr 24, 2018

mgol Apr 24, 2018

mgol Apr 24, 2018

mgol commented Apr 24, 2018 •

edited

Loading

dmethvin commented Apr 25, 2018

mgol Apr 25, 2018

dmethvin Apr 25, 2018

mgol Apr 26, 2018

mgol Apr 30, 2018

timmywil Apr 30, 2018

gibson042 left a comment

gibson042 Apr 30, 2018

gibson042 Apr 30, 2018

mgol commented Apr 30, 2018

mgol commented Apr 30, 2018 •

edited

Loading

mgol commented Apr 30, 2018

mgol commented Jun 4, 2018

timmywil commented Jun 4, 2018

mgol commented Apr 8, 2019

		@@ -247,7 +231,7 @@ jQuery.extend( {

		// If a number was passed in, add the unit (except for certain CSS properties)

CSS: Don't automatically add "px" to properties with a few exceptions #4055

CSS: Don't automatically add "px" to properties with a few exceptions #4055

Conversation

mgol commented Apr 24, 2018 • edited by timmywil Loading

Summary

Checklist

dmethvin left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mgol commented Apr 24, 2018 • edited Loading

dmethvin commented Apr 25, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gibson042 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mgol commented Apr 30, 2018

mgol commented Apr 30, 2018 • edited Loading

mgol commented Apr 30, 2018

mgol commented Jun 4, 2018

timmywil commented Jun 4, 2018

mgol commented Apr 8, 2019

mgol commented Apr 24, 2018 •

edited by timmywil

Loading

mgol commented Apr 24, 2018 •

edited

Loading

mgol commented Apr 30, 2018 •

edited

Loading