How to disable particular ACE editor CSS-mode warning rules?

Question

My project makes use of the Ace Editor (via Brace and React-Ace).

We set the mode of the editor to "css" and embed it in our page. This works just fine, however, by default, we find some of the enabled CSS rule highlighting to be too stringent—some warnings should be "info"; some errors should be "warnings".

How can we disable/enable/modify the set of validation rules used for Info, Error, and Warnings by the Ace Editor in CSS mode?

I believe I've found a relevant line of code in the Ace CSS worker but I'm not sure how to make use of it, nor where to find an exhaustive list of what the validation rule names are, if I did know how to use this function.

The code below is essentially what we use to instantiate the react ace component...

import brace from 'brace';
import AceEditor from 'react-ace';
import 'brace/mode/css';
import 'brace/theme/monokai';

...
  <AceEditor
    theme="monokai"
    mode="css"
    showGutter={true}
    ...
  />

Answer 1

Figured out a solution thanks to a hint from a closed ACE editor issue.

When the editor loads, find a reference to the "worker" instance and call either the setInfoRules or setDisabledRules methods with a "|" separated list of CSS lint rules IDs. (For React-Ace the just-loaded editor can be accessed via the onLoad prop),

Since the CSS linter used by Ace is csslint the rule IDs relevant for disable/enabling are CSS lint. See the CSS Lint rule list.

The following code is how I did it...

const INFO_RULES = [
  // Disable "Heading (h2) has already been defined." warning
  'unique-headings',
  // Disable "Heading (h2) should not be qualified." warning
  'qualified-headings',
  'fallback-colors'
];

const DISABLED_RULES = [
  // Disable "Don't use adjoining classes." warning
  'adjoining-classes',
  // Disable "Rule doesn't have all its properties in alphabetical ordered." warning
  'order-alphabetical'
];

const onEditSessionInit = (editSession)=> {
  editSession.$worker.call('setInfoRules', [INFO_RULES.join('|')]) ;
  editSession.$worker.call('setDisabledRules', [DISABLED_RULES.join('|')]) ;
};

const CSSCodeEditor = (propse)=>
  <CodeEditor 
    mode="css"
    onLoad={(editor)=> {
      onEditSessionInit(editor.session);
    }}
    {...props} 
  />;

Hopefully this helps someone some day...