Support fr units for grids

[frvge]

Please support 'fr' units, as listed on https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns .

Original request: CSSLint/csslint#691

[frvge]

https://developer.mozilla.org/en-US/docs/Web/CSS/flex_value

[jonsamp]

It looks like this was fixed and merged in this thread: #144

With that, I am also not able to get it to behave as expected. I used yard add csslint and also yarn upgrade csslint, and it seems I am on the latest version of parser-lib, but it still is highlighting the fr unit.

[Jeremy-Knudsen]

Would love for this to get fixed soon. We're relying on grid now.

[samdutton]

Still getting this error (along with a warning about grid-gap):

[eznettools]

I too get this problem. In WordPress they are using CSS Lint, and it's give's me false errors every time I save the file. I'm using using a fairly robust "grid-template" (which I've tested and works great but is not reconized by the error checker)...

Here's the code that keeps getting the error...
grid-template-columns: repeat( auto-fill, minmax(11em, 1fr));

I wanted to share because it's a more complex than some of the other examples shown here, as it includes "minmax", "repeat", "auto-fill", and "fr". I just want to make sure CSSLint will recognize all the elements involved.

[morganpdx]

I'm also experiencing false errors on CSS Lint for grid-gap. All other CSS Grid properties are recognized.
https://developer.mozilla.org/en-US/docs/Web/CSS/gap

[eznettools]

Any update on this? It's really annoying to have false errors come up every time I update my stylesheet in WordPress.

[finallove2]

https://github.com/CSSLint/parser-lib/blob/master/dist/parserlib.js#L5175

if (/^em$|^ex$|^px$|^gd$|^rem$|^vw$|^vh$|^vmax$|^vmin$|^ch$|^cm$|^mm$|^in$|^pt$|^pc$|^fr$/i.test(ident)) {

I do not have time to push git
leave a comment.
I hope this helps.

[frvge]

@finallove2 , unfortunately, it's not a length but it seems to be a dimension. This is a bit more involved.

[eznettools]

frvge said "unfortunately, it's not a length but it seems to be a dimension. This is a bit more involved."

Yes, fr units are a flexible unit type, but I'm curious why that makes it so hard to implement into CSSLint?

Does lint have to calculate them in order to accept them as valid code? Is there any reason it can't simply accept 'fr' as a valid unit, instead of constantly throwing out errors at us?

I'm not too familiar with Lint's inner workings. Perhaps someone could explain why adding support for this unit still hasn't happened over 2-years after this bug was first reported.

[raoulunger]

I second that. It's frustrating to write code for CSS grid in WP, and having to convince WP at every edit that the code is correct (it involves scrolling back to the top every time, and checking the check box). The fr-unit is a crucial element in the CSS grid code, it's being used widely by hundreds of thousands of coders world wide, and should have been added years ago. There are more grid terms that Lint does not recognize, e.g. 'gridgap', and also developments like --var are not recognized. CSS evolves rapidly, so some lag is understable. But adding widely use terms should not take years, especially since CSSlint is used at the core of WP and that is used by millions of people. This has all been signaled CSSLint's github page, but there seems to be very little response there.

[Antera]

Hi,

I have this problem too, cannot save CSS in multiple WP sites using
grid-template-columns: repeat(5, 1fr);