Custom font reverts sql mode highlighting

1

I use sql mode and it highlights code correctly, in color.

Once I declare a different .CodeMirror{font-family:} though, the highlight coloring is lost. All text is black again.

How do I do this correctly?

2

That sounds unlikely. The styling is done with classes that set color, so I don’t see how font-family could possibly interfere with that.

3

That’s what I thought.

To be more specific, this is the setup:

CodeMirror.fromTextArea(this.editorTarget, {
  lineNumbers: true,
  mode: 'sql',
})

And this the .scss declaration:

.CodeMirror {
  font-family: "Source Code Pro", monospace;
}

Setup runs in a callback when the page is ready (stimulus.js), and everything compiled by webpack. Not sure if that has any implications I can’t see right now.

I can comment out the CSS bit and the mode highlight and font change come and go.

4

I can confirm that the equivalent in a simple pastebin works just fine, as it should.

Could it be some webpack artefact?