# STSX

> STSX (Styled TSX): `.stsx` files are TSX with plain-CSS `<style>` blocks, scoped by placement and compiled at build time. A Vite plugin for React, React Router and Solid, and native in Lumiose.

These docs ship in `@lumiose/stsx` and match the installed version: `node_modules/@lumiose/stsx/docs`.
In Lumiose apps, `.stsx` is the component format: `node_modules/lumiose/docs/llms.txt`.

## Docs

- [STSX](/stsx/): STSX (Styled TSX): `.stsx` files are TSX with plain-CSS `<style>` blocks, scoped by placement and compiled at build time. A Vite plugin for React, React Router and Solid, and native in Lumiose.
- [Installation](/stsx/installation/): Add `@lumiose/stsx` to a Vite app before your framework's plugin, set `classAttribute` for the framework, and point the tsconfig at the shadow files so that `tsc` checks `.stsx` files.
- [Styles](/stsx/styles/): A `<style>` block holds plain CSS and styles what encloses it: the file at the top level, a component or one element's subtree inside JSX, or the whole app with `global`. Design tokens are custom properties; `$name` brings in TypeScript constants for breakpoints and values JS also uses; `:global()` and `:deep()` cross the scope.
- [Options](/stsx/options/): `stsx({ classAttribute, scopedStyles })`: the JSX attribute that holds classes (required), and how scoped elements are marked and matched: attribute or class, default or zero specificity, and the marker's namespace.
- [React Router](/stsx/react-router/): In React Router's framework mode, components can be `.stsx` files: their CSS is linked per route in server-rendered HTML, in dev and production. Route modules stay `.tsx` files that render those components.
- [Type checking and editors](/stsx/type-checking/): TypeScript checks `.stsx` files through shadow TSX files that `stsx typegen` and the Vite plugin write to `.lumiose/stsx`. The Lumiose language server and VS Code extension give `.stsx` files TypeScript and CSS features in any project.