Create

Event

warn

Dispatched for each problem found in the code, on every render, before it is printed to the console. Calling preventDefault() keeps it out of the console.

Syntax

  • doodle.addEventListener('warn', handler)
detail.message
The warning text, such as unknown function @colour().
detail.index, detail.pos
Where in the source the problem is, when known: index, a character offset, or pos, the zero-based [column, line] from the parser. The source is the element’s code, preceded by the use value (written as @use:<value>; when it is a var()). For a warning from a @doodle() body, index counts within that body.

The event bubbles and crosses shadow boundaries. It fires on every render that produces the warning; only the console message is printed once per component. Warnings from the first render fire while the element connects, before a later querySelector can add a listener; to catch them, listen on document before css-doodle is loaded. The top-level entries are also collected on diagnostics; warnings from @doodle() bodies only arrive as events.

Examples

const doodle = document.querySelector('css-doodle');

doodle.addEventListener('warn', e => {
  e.preventDefault();
  showInEditor(e.detail.message);
});

See also