https://github.com/ad-si/elm-stylus
Stylus CSS parser for Elm
https://github.com/ad-si/elm-stylus
css elm parser preprocessor stylus
Last synced: about 2 months ago
JSON representation
Stylus CSS parser for Elm
- Host: GitHub
- URL: https://github.com/ad-si/elm-stylus
- Owner: ad-si
- License: isc
- Created: 2025-09-21T20:45:38.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-09-21T21:25:51.000Z (9 months ago)
- Last Synced: 2025-10-03T19:40:27.604Z (9 months ago)
- Topics: css, elm, parser, preprocessor, stylus
- Language: Elm
- Homepage:
- Size: 18.6 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# elm-stylus
A Stylus CSS preprocessor parser for Elm
that converts a strict subset of Stylus syntax to CSS.
## Installation
```bash
elm install ad-si/elm-stylus
```
## Usage
```elm
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:
```css
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
```stylus
selector
property value
another-property another-value
```
### Multiple Selectors
```stylus
h1, h2, .important
font-weight bold
color blue
```
### Comments
```stylus
// 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**
```bash
# Run tests
make test
# Install dependencies
npm install
```