Debugging

The debug flow is collected on a single page in the visible docs. This section covers only the runtime values you give directly via data-luis:

debug
map
performance

<link rel="stylesheet" href="./styles.luis" data-luis="debug">

What Each Value Does

`data-luis` value	What it enables	When to use
`debug`	Warning logs, import diagnostics, and rule map publication	When you want to see what went wrong during compilation
`map`	Source map information linking back to `.luis` source in DevTools	When you want to see which source a rule came from while inspecting
`performance`	Compile, import, and observed timing logs	When you want to understand which sources are slow

Multiple values can be given together:

<link rel="stylesheet" href="./styles.luis" data-luis="debug,map,performance">

`debug`

debug brings diagnostic information produced during compilation to the console.

<link rel="stylesheet" href="./styles.luis" data-luis="debug">

What You See

compile warnings
.luis import diagnostics
observed event logs
window.__LentyStyleRuleMap

Warning Example

[LentyStyle][runtime][warn][RUN0013] [debug] inline data-luis style: missing semicolon after declaration (line 4, code: missing-semicolon).

Import Diagnostic Example

[LentyStyle][runtime][info][RUN0014] [debug] Loaded imported .luis: https://example.com/styles/tokens.luis (from https://example.com/styles/app.luis)
[LentyStyle][runtime][info][RUN0015] [debug] Import diagnostics: https://example.com/styles/tokens.luis (from https://example.com/styles/app.luis; 248 chars; 1.42 ms; cache miss; parent: https://example.com/styles/app.luis)

Observed Event Log

When debug is on, a log line is emitted for each observed event:

[LentyStyle][runtime][info][RUN0021] [debug] Observed mutation: https://example.com/styles/app.luis (tokens: 4, affected: 2, active: 3)

The event field can be one of:

Event	When it fires
`upsert`	Source first loads and observed rules are placed
`mutation`	A DOM mutation changes an observed rule match
`mutation-noop`	A DOM mutation arrived but no match changed
`media-change`	A media query state changed and updated the rule list
`media-noop`	A media query changed but the active rule set stayed the same
`lazy-enter`	A rule entered the viewport via lazy observation

Rule Map

When debug or map is on, the runtime first emits a log line:

[LentyStyle][runtime][info][RUN0022] [debug] Debug rule map ready: window.__LentyStyleRuleMap["luis-style-1"]

The selector and line information for the compiled style tag then becomes accessible here:

const map = window.__LentyStyleRuleMap['luis-style-1']

This data is particularly useful for:

finding where the rule being inspected came from
doing line matching per selector
reading the generated CSS and .luis source side by side

`map`

map links the generated CSS back to the .luis source on the DevTools side.

<link rel="stylesheet" href="./styles.luis" data-luis="map">

What It Provides

source map information is appended to the end of the CSS
a sourceURL footer is added
the .luis source from which a rule came is visible in DevTools

How to Use It

This mode is especially useful when:

you inspect an element
you see the rule coming in the styles panel
you want the rule to link back directly to the .luis source

Relationship With `debug`

map can be enabled on its own:

<link rel="stylesheet" href="./styles.luis" data-luis="map">

But in most cases this combination is more useful:

<link rel="stylesheet" href="./styles.luis" data-luis="map,debug">

This way both the source match in DevTools and the warning/diagnostic stream in the console appear together.

`performance`

performance makes the runtime produce timing logs for individual compile and observed updates.

<link rel="stylesheet" href="./styles.luis" data-luis="performance">

Core Log Line

Example for a source compiled through a worker (all optional fields visible):

[LentyStyle][runtime][info][RUN0016] [performance] Compiled https://example.com/styles/app.luis in 1.50 ms (css: 428 chars) (mode: full) (execution: worker:warm) (timing: compile 1.12 ms, bootstrap 0.300 ms, transport 0.180 ms, features 0.050 ms, remap 0.070 ms, compose 0.050 ms, map 0.040 ms, apply 0.040 ms, total 1.50 ms) (blocks: 12/12 rendered, reused: 0; parser: 1/1 parsed, reused: 0)

Example for a source compiled on the main thread:

[LentyStyle][runtime][info][RUN0016] [performance] Compiled https://example.com/styles/app.luis in 1.10 ms (css: 428 chars) (mode: full) (execution: main) (timing: compile 1.10 ms, compose 0.000 ms, apply 0.100 ms, total 1.10 ms) (blocks: 12/12 rendered, reused: 0; parser: 1/1 parsed, reused: 0)

Execution values: worker:warm, worker:cold, worker (when no state is available), main. All timing fields except compile are optional and only appear when measured; sub-millisecond values use 3 decimal places.

The (blocks: ...) suffix is present whenever incremental metadata is available — including full-mode compiles where it reports how many blocks were reused:

[LentyStyle][runtime][info][RUN0016] [performance] Compiled https://example.com/styles/app.luis in 0.40 ms (css: 428 chars) (mode: incremental) (execution: worker:warm) (timing: compile 0.40 ms, total 0.40 ms) (blocks: 2/8 rendered, reused: 6; parser: 2/8 parsed, reused: 6)

Import Log

[LentyStyle][runtime][info][RUN0017] [performance] Compiled https://example.com/styles/tokens.luis in 0.72 ms (css: 248 chars) (imported by: https://example.com/styles/app.luis; cache: miss; parent: https://example.com/styles/app.luis)

Observed Log

[LentyStyle][runtime][info][RUN0018] [performance] Compiled https://example.com/styles/app.luis [observed:mutation] in 0.33 ms (css: 96 chars) (observed: 3/8 active, changed: 2)

The [observed:{event}] field can be upsert, mutation, mutation-noop, media-change, media-noop, or lazy-enter.

When to Use

when you want to see which source is compiling slowly
when checking whether worker actually makes a difference
when you want to understand how much the observed mutation load has grown

Combined Usage

Most common combinations:

Usage	What it provides
`debug`	warning and diagnostic stream
`map`	source match in DevTools
`performance`	timing logs
`debug,map`	both console diagnostics and inspect/debug
`debug,performance`	warnings + timing tracking
`debug,map,performance`	full debug flow

<link rel="stylesheet" href="./styles.luis" data-luis="debug,map,performance">

Quick Selection Guide

Need	Value to enable
I want to see warnings	`debug`
I want to see which `.luis` file a rule came from	`map`
I want to see where the slowness is	`performance`
I want to see everything together	`debug,map,performance`