CSS, with the good parts of Stylus.

stylet is a small, fast successor to Stylus, written in Rust. Nesting, imports and placeholder extends — no variables, mixins or functions. Everything else is plain CSS.

Try it in the playground Read the docs

app.styl — edit me

@custom-media --phone (width < 600px)

$button {
  border-radius: 4px
  padding: .5rem 1rem
}

.app {
  display: grid
  grid-template-areas: 'header header'
                       'nav    main'
  grid-template-columns: 12rem 1fr
  grid-template-rows: auto 1fr

  @media (--phone) {
    grid-template-areas: 'header'
                         'main'
    grid-template-columns: 1fr
  }

  .save {
    @extend $button
    background: var(--brand)

    &:hover {
      filter: brightness(1.1)
    }
  }
}

app.css open in playground →

.app .save {
  border-radius: 4px;
  padding: .5rem 1rem;
}

.app {
  display: grid;
  grid-template-areas: 'header header' 'nav    main';
  grid-template-columns: 12rem 1fr;
  grid-template-rows: auto 1fr;
  @media (width < 600px) {
    grid-template-areas: 'header' 'main';
    grid-template-columns: 1fr;
  }
  .save {
    background: var(--brand);
    &:hover {
      filter: brightness(1.1);
    }
  }
}

Native nesting

Blocks with {}, prop: value, no semicolons. Nesting is emitted as native CSS nesting, not flattened.

A bundler

@import with aliases, layers and per-scope deduplication, url() rebasing, inlined assets, source maps and watch mode.

Placeholders

$placeholder rules and @extend, resolved through nesting and imports — and nothing else to learn.

Formatter

stylet fmt keeps comments, aligns grid-template-areas and can sort properties shorthand-first.

Migration

stylet migrate converts Stylus projects: mixins are inlined, variables become custom properties.

Fast

A lossless Rust parser and a single binary. A 34,000-declaration app builds in about 30 ms — about 20× faster than Stylus.

How it compares

	CSS	Stylus	stylet
Syntax	braces and semicolons	indentation, most punctuation optional	braces, no semicolons
Nesting	native (2023+)	flattened	native, or flattened
Imports	separate requests at runtime	bundled	bundled, deduplicated, aliases, `layer()`
Extend	—	selectors and placeholders	placeholders
Variables	custom properties	compile-time variables	custom properties
Mixins, functions, loops	—	yes	no, by design
`@custom-media`	specified, little support	—	yes, resolved at build time
Formatter	Prettier	third-party	built in, opinionated
Runs on	the browser	Node.js	a single Rust binary (or WebAssembly)
Build of a 34,000-declaration app	—	≈ 0.6 s	≈ 0.03 s

Get started

# install (from source, needs Rust)
cargo install --git https://github.com/tutory/stylet stylet-cli

stylet build src/index.styl -o dist/index.css --watch
stylet fmt --check
stylet migrate client/index.styl --dry-run   # coming from Stylus

Configure entries, aliases and formatting in stylet.toml.