Source Detection

The browser runtime detects and compiles the initial LentyStyle sources found in the DOM during the first initialization pass. This model works as initial-only: the runtime registers the first trusted source set and does not automatically accept nodes added later as sources.

Two source types are supported:

<link rel="stylesheet" href="...luis" data-luis>
<style data-luis>

Auto-Init Flow

When the core runtime bundle loads:

The core script source and any data-luis-run hints are captured
If in a browser environment, auto-init kicks in
If the document is still loading, processing is deferred until after DOMContentLoaded; otherwise it starts immediately
The runtime scans the initial link[data-luis] and style[data-luis] sources
The security policy and data-luis options are read, then sources are compiled

<link rel="stylesheet" href="./styles.luis" data-luis>
<script src="/assets/lentystyle.min.js"></script>

Source Types

`<link>`-Based

The runtime only processes <link> sources that meet these conditions:

must have a .luis extension
must carry rel="stylesheet"
must include the data-luis marker
must pass the runtime source URL policy check

<!-- With marker only -->
<link rel="stylesheet" href="./styles.luis" data-luis>

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

When compilation is complete, the generated <style> tag is inserted immediately after the source <link> node. The href snapshot is taken during the initial discovery; changing href after boot does not redirect the same source to a new target.

Inline `<style>`-Based

A <style> block carrying the data-luis attribute is compiled from its inline content.

<style data-luis>
  --primary: #2060ff;

  .btn {
    background: var(--primary);
    color: #fff;
  }
</style>

In this usage there is no href; the source is directly the block content. When compilation is complete, the generated <style> tag is inserted immediately after the source block. The inline text snapshot is taken during the initial discovery; changing text content afterward does not trigger an automatic rebuild.

URL Security Policy

The runtime checks link-based source URLs against the security policy before compiling.

Default behavior:

same-origin is required for initial .luis source URLs
javascript:, vbscript:, data:, and blob: schemes are blocked
empty or unparseable URLs are rejected
the runtime does not fetch .luis @import targets in the browser

Example:

<!-- accepted: same-origin -->
<link rel="stylesheet" href="/styles/app.luis" data-luis>

<!-- rejected: dangerous scheme -->
<link rel="stylesheet" href="javascript:alert(1)" data-luis>

<!-- rejected: default same-origin policy -->
<link rel="stylesheet" href="https://cdn.example.com/app.luis" data-luis>

If you want to open cross-origin initial .luis sources, an explicit runtime policy is required:

<script>
  window.__LentyStyleSecurityPolicy = {
    allowCrossOriginLuisSources: true,
  };
</script>

Using `data-luis` Values

The data-luis attribute accepts comma-separated values.

<!-- Marker only -->
<link rel="stylesheet" href="./styles.luis" data-luis>
<link rel="stylesheet" href="./styles.luis" data-luis="">

<!-- Single token -->
<link rel="stylesheet" href="./styles.luis" data-luis="debug">
<link rel="stylesheet" href="./styles.luis" data-luis="lazy">

<!-- Multiple tokens -->
<link rel="stylesheet" href="./styles.luis" data-luis="debug,performance">
<link rel="stylesheet" href="./styles.luis" data-luis="lazy,performance">

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

Full list of supported values:

debug
performance
map
lazy
worker
!debug
!performance
!map
!lazy
!worker

Unsupported tokens are ignored.

Options and Defaults

Option	Default	Description
`debug`	`false`	Enables warning and info logs
`performance`	`false`	Enables compilation timing logs and may enable the speed-focused path for style writing
`map`	`false`	Produces CSS text + source-map footer
`lazy`	`false`	Puts observed selectors in viewport-aware mode
`worker`	`auto`	Determines the compile thread selection

Post-Boot Behavior

The runtime operates initial-only. After the first trusted compile cycle completes, source registration is frozen.

Therefore:

adding new link[data-luis] or style[data-luis] after boot does not trigger automatic compilation
changing href, rel, data-luis, or inline text on existing sources does not trigger automatic rebuild
the runtime does not do .luis @import loading

When `compileFromDom({ force: true })` Is Needed

If after boot you don't expect the runtime to automatically watch source changes but want to re-run compilation over the same initial source set, you must call compileFromDom({ force: true }).

This call makes sense in these situations:

if you changed data-luis options on the same source
if you changed the data-luis-manifest value on the same source
if the first compilation failed and you want an explicit retry for the same initial source set
if you want to run the runtime again manually via a debug panel or user action

Example usage:

<link rel="stylesheet" href="/styles/site.luis" data-luis="debug">
<script src="/runtime/lentystyle.min.js"></script>

<script type="module">
  import { compileFromDom } from '@lentystyle/core/runtime'

  const rerunButton = document.getElementById('rerun-lentystyle')
  rerunButton?.addEventListener('click', () => {
    void compileFromDom({ force: true })
  })
</script>

<button id="rerun-lentystyle" type="button">
  Recompile LentyStyle
</button>