Customizer CSS can’t save CSS grid

[kittmedia]

I tried to insert the following CSS code in the Customizer custom CSS:

.footer-widgets {
	display: -ms-grid;
	display: grid;
	grid-gap: 1px;
	-ms-grid-columns: ( 1fr )[3];
	grid-template-columns: repeat(3, 1fr);
	-ms-grid-rows: ( 150px )[2];
	grid-template-rows: 150px 150px;
}

I receive the following three errors in the editor field and can’t save it:
Unexpected token '(' at line 5, col 20.
Expected BRACE at line 6, col 35.
Unexpected token '(' at line 7, col 17.

Even if the code itself is fully correct and works in different browsers, it can‘t be used within the Customizer custom CSS.

I know that the first and the third error message refers to an old syntax of Internet Explorer 10 and 11, however it is still needed to support CSS grid on these platforms. The second error message refers to the “1fr” keyword, which is defined in the current CR from the W3C:
​https://developer.mozilla.org/de/docs/Web/CSS/grid-template-columns

[johnbillion]

Thanks for the report, @kittmedia.

Moving this to the 4.9 milestone for visibility.

[ocean90]

I'm wondering if CSS errors should really prevent saving here. Unlike PHP errors they can't break your site.

[westonruter]

It appears that CSSLint doesn't yet support the fr type: ​https://github.com/CSSLint/parser-lib/issues/228

Three options I see here:

1. Change from error to warning, to allow bad CSS to be saved.
2. Try to filter out errors related to fr, however this doesn't seem to help in the case of repeat(3, 1fr)
3. Add checkbox to dismiss error (or use dismissible notification) to allow saving to go through.

I think option 3 is the best for now, and it aligns with how we're doing it when editing CSS in the file editor;

[westonruter]

In 42528.0.diff​ the same dismissible notification is added as currently is shown on the file editor when there is a linting error.

@melchoyce Thoughts on tweaks to the design?

[melchoyce]

Would be great if subsequent lines of text in the checkmark text were also indented, but I know that's currently a problem across core. I think it's probably fine.

[ocean90]

42528.0.diff​ looks good to me. Minor: There's an extra space before type in <input id="{{ elementId }}" type="checkbox">. (Same for file.php).

Due to the way how strings are parsed this will cause a string change because it's now part of the front end (wp-includes) project.

[westonruter]

In 42171:

Customize: Allow notifications for linting errors in code editor control (for Additional CSS) to be overridden to allow saving.

Implements the same override that was implemented in [41721] for the theme/plugin editors.

See #41897, #41887.
Fixes #42528.

[westonruter]

In 42172:

Customize: Allow notifications for linting errors in code editor control (for Additional CSS) to be overridden to allow saving.

Implements the same override that was implemented in [41721] for the theme/plugin editors.

See #41897, #41887.
Fixes #42528 for 4.9.

[Doobeedoo]

Hi, I still have this error in multiple sites, cannot save CSS when using
grid-template-columns: repeat(5, 1fr);

[Doobeedoo]

Hi, I still have this error in multiple sites, cannot save CSS when using
grid-template-columns: repeat(5, 1fr);