Support additional (custom) CSS selectors


Is there a way to support Microsoft extensions as valid CSS selectors? In htmlmixed mode, most of these selectors are marked as incorrect:

Alternatively, is there a way to import or manually input custom selectors I want to set as valid?

You can pass a custom set of property names as the propertyKeywords option to the parser. Something like this:

let baseConfig = CodeMirror.resolveMode("text/css")
CodeMirror.defineMIME("text/x-my-css", Object.assign({}, baseConfig, {
  propertyKeywords: Object.assign({accelerator: true}, baseConfig.propertyKeywords)

Excellent, thanks for the response, and for the great plugin!

One more question: this works for the css mode, but not htmlmixed. Does the mixed mode need to be extended differently, since it already extends other modes?

The htmlmixed mode by default uses the plain CSS mode. You could either mutate that (by adding properties to CodeMirror.resolveMode("css").propertyKeywords), since it seems like configuring it to not use the CSS mode for <style> tags is currently hard.

Thanks again, redefining “css” mode by making it an extended version of itself worked for me.