Home

LeanCSS Wiki

LeanCSS is a CSS-first utility composition tool.

It allows developers to define reusable style bundles using @set, and expand them inside selectors using @lift.

The goal is to combine the composability of utility frameworks with the clarity of semantic CSS.

LeanCSS runs at build time and outputs plain CSS.

It works with .css and .scss files and integrates with PostCSS-based pipelines.

Example:





@set inline-flex {
  display: inline-flex;
}

@set items-center {
  align-items: center;
}

.button {
  @lift inline-flex items-center;
}

Output:





.button {
  display: inline-flex;
  align-items: center;
}

LeanCSS keeps styling in CSS while allowing reusable utility composition.

Install the PostCSS plugin.




npm install @leancss/postcss

Add it to your PostCSS config.





import leancss from "@leancss/postcss"

export default {
  plugins: [
    leancss()
  ]
}

LeanCSS runs during the CSS build step.





@set inline-flex {
  display: inline-flex;
}

@set items-center {
  align-items: center;
}

.button {
  @lift inline-flex items-center;
}

Compiled output:





.button {
  display: inline-flex;
  align-items: center;
}

LeanCSS is built around two directives.

Directive | Purpose -- | -- @set | Define reusable style bundles @lift | Expand sets into a selector

LeanCSS allows reusable composition while keeping styles in CSS.

Potential future features include:

• optional preset libraries
• design-system utilities
• variant helpers
• devtools for inspecting set expansion

LeanCSS v1 intentionally focuses on a small core.

LeanCSS is released under the MIT license.

This allows free use, modification, and redistribution.

Contributions are welcome.

Areas where help is valuable:

• parser improvements
• PostCSS integrations
• documentation
• preset libraries