Hızlı Başlangıç

Runtime script'i sayfanıza ekleyin
<head> içine şu satırı ekleyin:
```
<script src="/runtime/lentystyle.min.js" defer></script>
```
Üretimde runtime'ı mümkünse same-origin servis edin. CDN kullanıyorsanız core script'e data-luis-run="cdn" ekleyin, integrity + crossorigin ile doğrulayın. Runtime optional feature'lar (debug, performance, map, worker, lazy) için allowlist ve lentystyle.integrity.json araması bu attribute'tan türetilir. debug ve map production'da ayrıca izin verilmedikçe çalışmaz. Cross-origin .luis source gerekiyorsa ayrıntılar için Güvenlik sayfasına bakın.

.luis bloğunuzu yazın

data-luis attribute'u ile bir <style> bloğu oluşturun.

.luis, token objeleri tanımlamanıza olanak tanır. var(--obj.key) söz dizimi derleme sırasında değerin kendisine dönüşür — standart CSS custom property olarak kalmaz.

<style data-luis>
 /* Obje değişkenler */
  --colors: { brand: #2060ff; surface: #f4f6fb; text: #1a1a2e; };
  --space: { sm: 8px; md: 16px; lg: 24px; };
  /* Obje değişkenleri derleme sırasında çözülür ve çıktıda kalmaz. */
  --radius: 6px;

  .btn {
    background: var(--colors.brand);
    color: var(--colors.surface);
    padding: var(--space.sm) var(--space.md);
    /* Obje değişkenin key değerlerine JSON'da erişim gibi davranılır */
    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>

Bu kaynak şu CSS'i üretir:

:root {
  --radius: 6px;
  /* CSS değişkenleri gerçekten CSS içinde tanımlanmış gibi oluşturulur */
}

.btn {
  background: #2060ff;
  color: #f4f6fb;
  padding: 8px 16px;
  border-radius: var(--radius);
  /* CSS değişkenleri aynı şekilde kalır */
  border: none;
  cursor: pointer;
}

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

HTML'inizi bir araya getirin

<!doctype html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>LentyStyle Deneme</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>LentyStyle ile CSS üretmek bu kadar kolay.</p>
    <button class="btn">Başlayın</button>
  </div>
</body>
</html>

Dosyayı tarayıcıda açın
Runtime <style data-luis> bloğunu algılar, kaynağı derler ve üretilen CSS'i hemen sayfaya uygular.
Ayrı bir .luis dosyası da bağlayabilirsiniz:
```
<link rel="stylesheet" href="./styles.luis" data-luis>

```

Normal HTML projesinde yalnızca @lentystyle/core paketiyle başlayabilirsiniz. Tarayıcı npm paket yolunu doğrudan çözmez; runtime bundle'ı sayfanın erişebildiği bir URL'den servis edilmelidir.

Normal HTML Projesinde Runtime Bundle'ı

Önerilen same-origin akış:

npm install @lentystyle/core

Paket kurulduktan sonra runtime klasörünün tamamını public asset klasörünüze kopyalayın:

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

Sonra HTML içinde ana runtime dosyasını kendi public URL'inizden çağırın:

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

lentystyle.min.js normal .luis compile akışı için gereken compiler ve runtime guard kodunu kendi içinde taşır. Bu nedenle dist/compiler/ veya dist/guard/ klasörlerini public'e ayrıca kopyalamanız gerekmez.

Runtime klasöründeki diğer dosyalar debug, performance, map, observed, lazy, worker ve runtime log özellikleri gerektiğinde aynı klasörden lazy-load edilir. Minimal bir demo için yalnızca lentystyle.min.js çalışabilir; production ve tüm runtime özellikleri için dist/runtime/ klasörünün tamamını yayınlayın.

Bu yol sade HTML, PHP, WordPress, Laravel, ASP.NET veya static hosting gibi browser'ın npm export map'i bilmediği ortamlarda en kararlı modeldir.

Alternatifler:

Build aracınız varsa import '@lentystyle/core/runtime' kullanabilirsiniz; script tag'i bundle içinde gelir.
CDN kullanabilirsiniz; production'da integrity, crossorigin, data-luis-run="cdn" ve gerekli runtime policy alanlarını ekleyin.
HTML içine node_modules/... path'i yazmayın; tarayıcı bunu paket export'u olarak çözmez.

Gelişmiş: CDN + SRI + Runtime Policy Örneği

Bu örnek cross-origin CDN kullanımında güvenlik kontrollerini birlikte gösterir:

<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">

Açıklama:

Core script SRI ile doğrulanır.
data-luis-run="cdn" core script origin'ini optional runtime bundle allowlist'ine ekler.
Runtime cross-origin optional bundle hash'lerini aynı base altındaki lentystyle.integrity.json içinden arar.
Optional bundle hash'i bulunamazsa yükleme fail-closed bloklanır.
debug ve map, allowRuntimeDiagnostics: true verilmedikçe production'da yok sayılır.

Gerekirse window.__LentyStyleSecurityPolicy ile cdnScriptAllowlist, cdnScriptIntegrity ve cdnScriptIntegrityManifest alanlarını runtime yüklenmeden önce override edebilirsiniz. Cross-origin .luis source için allowCrossOriginLuisSources: true ve luisSourceIntegrity gerekir. Detaylı override örnekleri için Güvenlik sayfasına bakın.

Buradan Nereye?

.luis Dili Değişkenler, döngüler, koşullar ve .luis syntax'ının tamamını öğrenin.

Observed Kullanımı data-luis seçenekleri, lazy mod ve observed selector'lar.

Hybrid Kullanımı Gereksiz stilleri oluşturmayın.

SSR Kullanımı Her request'te HTML ve CSS'i birlikte üretmek için.