gitwtfhub

wtf is purescript-css?

sharkdp/purescript-css — explained in plain English

Analysis updated 2026-08-10 · repo last pushed 2016-05-13

1PureScriptAudience · developerComplexity · 2/5DormantSetup · moderate

TL;DR

A library that lets you write CSS inside PureScript code, so the compiler can catch styling mistakes before they reach the browser. It turns style rules into typed code that renders proper CSS.

Mindmap

mindmap
  root((repo))
    What it does
      CSS inside PureScript
      Type-checked styles
      Renders browser CSS
    Tech stack
      PureScript
      CSS
    Use cases
      Style app components
      Dynamic UI styling
      Dashboards
    Audience
      PureScript developers
      Safety-focused teams
    Tradeoffs
      Styles live in code
      No separate stylesheets

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Why would anyone build with this?

REASON 1

Write type-safe styles alongside your PureScript UI components instead of separate CSS files.

REASON 2

Build dashboard interfaces where button colors change based on application state.

REASON 3

Catch invalid CSS property names or values at compile time before they reach users.

REASON 4

Keep styling logic co-located with component code to avoid HTML and CSS drift.

What's in the stack?

PureScriptCSS

How do you spin it up?

Difficulty · moderate Time to first run · 30min

Requires an existing PureScript project with the compiler and package manager configured.

The explanation does not mention a license, so the licensing terms are unknown.

Wtf does this do

purescript-css is a library that lets you write CSS directly within your PureScript code instead of in separate stylesheets. The main benefit is that it brings the safety of a typed programming language to styling web pages, catching errors before they ever reach a user's browser. Normally, CSS is written in its own separate language, which means typos like misspelled property names or invalid color values often slip through unnoticed until someone sees the broken layout on a live page. This library solves that by representing CSS rules as typed code. When you describe a style, say, setting a font size or a background color, the compiler checks that the values are valid before anything gets rendered. At a high level, you construct CSS declarations using the library's functions, and it handles translating those into proper CSS text that a browser can understand. Who would use this? Primarily developers already building applications in PureScript who want to keep their styling logic co-located with their component and UI code rather than managing standalone .css files. For example, if you're building a dashboard interface and you want a button's color to change based on application state, this approach lets you express that styling programmatically with the same safety guarantees the rest of your code enjoys. You avoid the common mismatch where HTML structure and CSS rules drift apart over time. The notable tradeoff here is that adopting this library means committing to writing styles in code rather than in traditional stylesheets, which some teams may find less intuitive. Beyond the core pitch of type-safe CSS authoring and rendering, the README doesn't go into much further detail about specific features or advanced capabilities. Full module documentation is available on the Pursuit website for those who want to explore the API in depth.

Yoink these prompts

Prompt 1
Help me set up purescript-css in my PureScript project and write a typed style rule that sets a button's font size and background color.
Prompt 2
Using purescript-css, show me how to write a CSS declaration that changes a button's color based on application state so the compiler validates it.
Prompt 3
Convert this CSS rule into purescript-css code so I get type checking: button { font-size: 16px, background-color: blue, }

Frequently asked questions

wtf is purescript-css?

A library that lets you write CSS inside PureScript code, so the compiler can catch styling mistakes before they reach the browser. It turns style rules into typed code that renders proper CSS.

What language is purescript-css written in?

Mainly PureScript. The stack also includes PureScript, CSS.

Is purescript-css actively maintained?

Dormant — no commits in 2+ years (last push 2016-05-13).

What license does purescript-css use?

The explanation does not mention a license, so the licensing terms are unknown.

How hard is purescript-css to set up?

Setup difficulty is rated moderate, with roughly 30min to a first successful run.

Who is purescript-css for?

Mainly developer.

View the repo → Decode another repo

This repo across BitVibe Labs

Don't trust strangers blindly. Verify against the repo.