Global Styles Custom CSS: Add inline code completion and linting to input box similar to customizer

[glendaviesnz]

What problem does this address?

The new Global styles Custom CSS input box currently doesn't have an inline code completion of linting, which can make editing of the CSS difficult.

What is your proposed solution?

Look to integration something like CodeMirror which is currently used by the Customizer custom CSS input box.

[creativecoder]

This came up while I was working with a theme builder this week.

Related features that were also mentioned: auto indenting new lines and auto adding closing braces.

[annezazu]

Noting that the current experience was brought up as a big deterrent in a recent blog post:

Additionally, the fact that the CSS editor lacks every fundamental feature, down to the lack of tab indent support, tells me that the Gutenberg team doesn’t ever want to see you writing CSS. The minute you take your coat off, they crank up the air conditioning. The message is clear, “Go somewhere else.”

[glendaviesnz]

@creativecoder there is a draft PR here, which is mostly working, but there was a suggestion to hold off until the new lazy loading API was landed . I don't have time to follow this up right now, but happy for you to look at pushing this forward if you have the time.

[creativecoder]

I don't have time to follow this up right now, but happy for you to look at pushing this forward if you have the time.

@glendaviesnz Thanks for pointing to that! I won't likely have time to work on this in the near future, but will put it on my list, just in case.

[okmttdhr]

I'm proposing #60155.
For lazy-loading, I'm utilizing Webpack's import() for now (c.f., #53380 (comment)).