elm-stylus

A Stylus CSS preprocessor parser for Elm that converts a strict subset of Stylus syntax to CSS.

Installation

elm install ad-si/elm-stylus

Usage

import Stylus.Parser exposing (stylusToCss)

stylus : String
stylus = """
div
  width 400px
  height 300px
  background-color blue

h1, h2, h3
  color red
  font-size 18px

// This is a comment
.alert
  color rgb(255, 0, 0)
"""

css : Result (List (DeadEnd Context Problem)) String
css = stylusToCss stylus

This will produce:

div{width:400px;height:300px;background-color:blue}
h1,h2,h3{color:red;font-size:18px}
/*This is a comment*/
.alert{color:rgb(255,0,0)}

Supported Features

• Selectors: Element, class, ID, and attribute selectors
• Properties: Standard CSS properties with values
• Comments: Single-line comments with //
• Multiple selectors: Comma-separated selectors
• Indentation-based nesting: Two-space indentation for declarations

Syntax

The parser supports a strict subset of Stylus syntax:

Basic Rules

selector
  property value
  another-property another-value

Multiple Selectors

h1, h2, .important
  font-weight bold
  color blue

Comments

// This is a comment
div
  margin 0

API

stylusToCss : String -> Result (List (DeadEnd Context Problem)) String

The main function that converts Stylus syntax to CSS. Returns a Result where:

• Ok String contains the generated CSS
• Err (List (DeadEnd Context Problem)) contains parsing errors

Types

• Expression - AST node types (Rule, Comment, Newlines)
• Problem - Parsing error types
• Additional parser functions are exposed for advanced use cases

Development

# Run tests
make test

# Install dependencies
npm install