Jquery: Cannot set property "grid-column-start" using .css()

[enbo]

Description

$(selector).css("grid-column-start", value); fails to add an inline style to the element.

I believe there are other grid properties that have the same problem.

Link to test case

JSFiddle

[mgol]

Thanks for the report (and a test case!). This is because, unfortunately, jQuery adds the px suffix by default to number values and the browser discards such a value as it's invalid for grid-column-start. We plan to change it but it's a breaking change so it has to wait for 4.0 (see #2795).

We keep a blacklist of CSS properties that shouldn't be getting this treatment:
https://github.com/jquery/jquery/blob/775caebd617e91e697b3e41ae33d6877e63785aa/src/css.js#L219-L233
We'll need to add Grid properties with number values there. Would you like to submit a PR to add this value (and perhaps more Grid-related ones)?

Before a fixed jQuery version arrives you can workaround this locally by:

jQuery.cssNumber.gridColumnStart = true;

See a fixed JSFiddle: https://jsfiddle.net/j15q5tzg/42/

[mgol]

BTW, there's also a more obvious workaround - if you pass the string "2" instead of the number 2, it works:
https://jsfiddle.net/j15q5tzg/43/

[enbo]

Ah, I suspected something along those lines. Thank you for the detailed explanation and multiple workarounds!

Am I supposed to close this issue or is that what someone else should be doing?

[enbo]

I can submit a pull request sometime this week I think. (I think that's what you mean by PR?)

[mgol]

Yes, I meant “pull request”, we often shorten it to PR.

There’s no hurry so next week is totally fine! Let us know if you can’t
find time or if you have any questions about how to submit a PR for this
issue. We’ll happily guide you through the contribution process.

Thanks!

Michał Gołębiowski-Owczarek

[mgol]

(And let’s keep this issue open until it’s fixed)

Michał Gołębiowski-Owczarek

[enbo]

I finally got around to compiling the CSS grid properties that need to be added.

https://github.com/enbo/jquery/commit/078ed8dad6a798fd28bc62a277468afac9429d5a

I'm not sure if I need to update the unit test. The current unit test doesn't seem to have any specific cases for any of the current list of special-case CSS properties.

https://github.com/jquery/jquery/blob/73d7e6259c63ac45f42c6593da8c2796c6ce9281/test/unit/css.js#L208-L272

[mgol]

@enbo Could you submit a PR with your changes so that we can discuss them there?

The list looks good at first sight. As for the tests, we do have a few of assertions, see:
https://github.com/jquery/jquery/blob/73d7e6259c63ac45f42c6593da8c2796c6ce9281/test/unit/css.js#L1120-L1144
You could add the grid ones to the test. You'll need to check for grid support first, similarly to how animation-iteration-count is treated. I think you may just check if $div.css( "display", "grid" ) is set properly and put all the assertions inside this if's then block.

[mgol]

You accidentally closed it from a PR to your fork. :) Reopening.