Quick Start

Add the runtime script to your page
Add this line inside <head>:
```
<script src="/runtime/lentystyle.min.js" defer></script>
```
In production, serve the runtime from the same origin if possible. If you use a CDN, add data-luis-run="cdn" to the core script and verify with integrity + crossorigin. The allowlist and lentystyle.integrity.json lookup for runtime optional features (debug, performance, map, worker, lazy) are derived from this attribute. debug and map will not run in production unless explicitly allowed. For cross-origin .luis sources, see the Security page.

Write your .luis block

Create a <style> block with the data-luis attribute.

.luis lets you define token objects. The var(--obj.key) syntax resolves to the value itself at compile time — it does not remain as a standard CSS custom property.

<style data-luis>
 /* Object variables */
  --colors: { brand: #2060ff; surface: #f4f6fb; text: #1a1a2e; };
  --space: { sm: 8px; md: 16px; lg: 24px; };
  /* Object variables are resolved at compile time and are not in the output. */
  --radius: 6px;

  .btn {
    background: var(--colors.brand);
    color: var(--colors.surface);
    padding: var(--space.sm) var(--space.md);
    /* Object variable key values are treated like JSON access */
    border-radius: var(--radius);
    border: none;
    cursor: pointer;
  }

  .card {
    background: var(--colors.surface);
    color: var(--colors.text);
    padding: var(--space.lg);
    border-radius: var(--radius);
    border: 1px solid var(--colors.brand);
  }
</style>

This source produces the following CSS:

:root {
  --radius: 6px;
  /* CSS variables are generated as if actually defined in CSS */
}

.btn {
  background: #2060ff;
  color: #f4f6fb;
  padding: 8px 16px;
  border-radius: var(--radius);
  /* CSS variables remain as-is */
  border: none;
  cursor: pointer;
}

.card {
  background: #f4f6fb;
  color: #1a1a2e;
  padding: 24px;
  border-radius: var(--radius);
  border: 1px solid #2060ff;
}

Put your HTML together

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>LentyStyle Demo</title>
  <script src="/runtime/lentystyle.min.js" defer></script>
  <style data-luis>
    --colors: { brand: #2060ff; surface: #f4f6fb; text: #1a1a2e; };
    --space: { sm: 8px; md: 16px; lg: 24px; };
    --radius: 6px;

    .btn {
      background: var(--colors.brand);
      color: var(--colors.surface);
      padding: var(--space.sm) var(--space.md);
      border-radius: var(--radius);
      border: none;
      cursor: pointer;
    }

    .card {
      background: var(--colors.surface);
      color: var(--colors.text);
      padding: var(--space.lg);
      border-radius: var(--radius);
      border: 1px solid var(--colors.brand);
    }
  </style>
</head>
<body>
  <div class="card">
    <p>Generating CSS with LentyStyle is this easy.</p>
    <button class="btn">Get Started</button>
  </div>
</body>
</html>

Open the file in a browser
The runtime detects the <style data-luis> block, compiles the source, and immediately applies the generated CSS to the page.
You can also link a separate .luis file:
```
<link rel="stylesheet" href="./styles.luis" data-luis>

```

In a plain HTML project you can start with just the @lentystyle/core package. The browser cannot resolve npm package paths directly; the runtime bundle must be served from a URL the page can access.

Runtime Bundle in a Plain HTML Project

Recommended same-origin flow:

npm install @lentystyle/core

After the package is installed, copy the entire runtime folder to your public assets folder:

node_modules/@lentystyle/core/dist/runtime/*
-> public/runtime/*

Then reference the main runtime file from your own public URL in HTML:

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

lentystyle.min.js carries the compiler and runtime guard code needed for the normal .luis compile flow. You do not need to separately copy dist/compiler/ or dist/guard/ to public.

The other files in the runtime folder are lazy-loaded from the same folder when debug, performance, map, observed, lazy, worker, and runtime log features are needed. For a minimal demo only lentystyle.min.js works; for production and full runtime features, publish the entire dist/runtime/ folder.

This path is the most stable model for plain HTML, PHP, WordPress, Laravel, ASP.NET, or static hosting environments where the browser does not know about npm export maps.

Alternatives:

If you have a build tool, you can use import '@lentystyle/core/runtime'; the script tag comes inside the bundle.
You can use a CDN; in production add integrity, crossorigin, data-luis-run="cdn", and required runtime policy fields.
Do not write node_modules/... paths in HTML; the browser cannot resolve those as package exports.

Advanced: CDN + SRI + Runtime Policy Example

This example shows security controls together for cross-origin CDN usage:

<script
  src="https://cdn.jsdelivr.net/npm/@lentystyle/core/dist/runtime/lentystyle.min.js"
  data-luis-run="cdn"
  integrity="sha384-REPLACE_WITH_REAL_HASH"
  crossorigin="anonymous"
></script>

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

Explanation:

The core script is verified with SRI.
data-luis-run="cdn" adds the core script origin to the optional runtime bundle allowlist.
The runtime looks for cross-origin optional bundle hashes in lentystyle.integrity.json under the same base.
If an optional bundle hash is not found, loading is fail-closed blocked.
debug and map are ignored in production unless allowRuntimeDiagnostics: true is provided.

If needed, you can override cdnScriptAllowlist, cdnScriptIntegrity, and cdnScriptIntegrityManifest via window.__LentyStyleSecurityPolicy before the runtime loads. For cross-origin .luis sources, allowCrossOriginLuisSources: true and luisSourceIntegrity are required. For detailed override examples, see the Security page.

Where to Go Next

.luis Language Learn variables, loops, conditions, and the full .luis syntax.

Observed Usage data-luis options, lazy mode, and observed selectors.

Hybrid Usage Avoid generating unnecessary styles.

SSR Usage For generating HTML and CSS together on every request.