search

blakeembrey / free-style

Make CSS easier and more maintainable by using JavaScript
MIT License
707 stars 29 forks source link

Add grid properties to numbers whitelist #71

Closed mntnoe closed 6 years ago

mntnoe commented 6 years ago

See #70. I don't think there should be any issue with backward compatibility as none of the added properties accept px units.

coveralls commented 6 years ago

Coverage Status

Coverage remained the same at 98.162% when pulling 60142d7a915f31df11fa9c38dae17c385094984b on unsiloai:grid-number-whitelist into 9d75481ddd0cb326d83a8a76cb3aedadd6e74f28 on blakeembrey:master.

blakeembrey commented 6 years ago

I also found https://github.com/facebook/react/blob/master/packages/react-dom/src/shared/CSSProperty.js which I'll look at mirroring. I noticed grid-area, but I didn't see any examples of numeric-only usage in https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area, is it correct?

mntnoe commented 6 years ago

Good idea to look at what React does, as this might also be the properties many developers expect to remain unitless if they use the React API.

I looked the same examples myself earlier today. I've never used grid-area myself, but as I understand it, it's a shorthand syntax for grid-row-start etc.

Looked a bit more into it. The 5th paragraph from MDN:

When grid-column-start is omitted, if grid-row-start is a , all four longhands are set to that value. Otherwise, it is set to auto.

So there is a situation were it make sense to set grid-area to a numeric value, which is to position the element in a specific cell with the same row and column number, but I guess that case will rarely make sense to use in real life...