LentyStyle is a compilation system that turns .luis source files into standard CSS. Depending on the use case, it runs through browser runtime, hybrid, or SSR flow.
What Is LentyStyle?
Section titled “What Is LentyStyle?”.luis is a source layer on top of CSS. You define variables, loops, conditions, functions, and observed selectors; the output is always standard CSS.
How It Works
Section titled “How It Works”- Source is read
- The compiler runs
- Output is sent into the right flow
Flows:
- Direct CSS compilation in the browser
- Pre-generating page styles with Hybrid
- Injecting CSS at request time with SSR
Observe continues to work the same way across all flows.
Minimal Browser Setup
Section titled “Minimal Browser Setup”<link rel="stylesheet" href="./styles.luis" data-luis><script src="/assets/lentystyle.min.js"></script>In this flow LentyStyle:
- Finds
.luissources added to the page via the data-luis attribute or.luisextension - Compiles them
- Writes the resulting CSS to the page
How Can I Use It With a Package?
Section titled “How Can I Use It With a Package?”If you want to produce styles in the browser at runtime:
pnpm add @lentystyle/corenpm install @lentystyle/coreyarn add @lentystyle/coreIf you want to lighten the initial load and pre-generate page-scoped styles:
pnpm add @lentystyle/hybridnpm install @lentystyle/hybridyarn add @lentystyle/hybridWhich Package for Which Job?
Section titled “Which Package for Which Job?”Use @lentystyle/core/runtime. It compiles the luis content you add and writes it as CSS to the page.
Use @lentystyle/hybrid. Adds pre-compiled styles of page-scoped luis content to the page and continues to track page content with Observe.
Use @lentystyle/ssr. Works together with Hybrid and adds pre-compiled page styles to the page on every request.