openpeeps/bro - Githubissues

Bro aka NimSass
😋 Bro ⚡ A super fast stylesheet language for cool kids!
👑 Written in Nim language

😍 Key Features

⚡ Extremely fast & Highly optimized Jump to Benchmarks
🍃 Lightweight, 1.5MB tiny executable
🐱 Dependency Free / No Virtual Machine
💪 Strongly Typed = Perfect Cascading Style Sheets 🤩
🌍 Works on Linux, macOS, Windows
🔖 A beautiful, improved SASS-like Syntax Learn Bro in 5 minutes
📚 Standard Library (strings, arrays, objects, math, regex, os) Check the manual
👋 Human readable Syntax => Developer friendly
- var & const
- [] Arrays
- {} Objects
- if & case Conditionals
- for Loop Statements
- fn Functions & mix Mixins
- Overloading + Closures + Forward declaration
- CSS to BASS AST with include some.css
- BASS imports using import std/[strings, math]
- JSON/YAML stream to BASS using json("some.json"), yaml("some.yml")
👏 Built-in CSS Optimization (Autoprefixer, Minifier, CSS Alphabetize & Deduplication)
🗺 CSS SourceMap Generator
🔄 CSS Reload & Browser sync Setup info
🌴 Abstract Syntax Tree binary serialization
🎉 Built-in HTML, JSON Documentation Generator
🔥 Works with Node.js & Bun.js via NAPI
🎆 Works in Browser via WASM (unstable)
🌍 Dynamically Linked Library
👉 Warnings => Unused Variables
👉 Warnings => Unused Mixins, Functions, Empty selectors
👉 Errors => invalid properties/values or typos!
🏳 Recommended Extension .bass
🎩 Open Source | LGPLv3 license
👑 Written in Nim language
😋 Made for Cool Kids

[!WARNING]
Bro is still under development. Expect bugs and incomplete features.

[!NOTE] Since Bro is written in native code, anti-virus software can sometimes incorrectly flag it as a virus

Bro CLI

Install Bro as a standalone CLI application. Get it from Releases or build it from source using Nim & Nimble.

Bro 💛 Nim

Integrate Bro in your Nim application

import bro

let stylesheet = """
$colors = [blue, yellow, orchid]
for $color in $colors:
  .bg-{$color}
    background: $color 
"""

var
  p: Parser = parseStylesheet(stylesheet)
  c: Compiler = newCompiler(p.getStylesheet, minify = true)
echo c.getCSS # .bg-blue{background:blue}.bg-yellow{...

Bro 💖 Bun & Node.js

Integrate the most powerful CSS pre-processor in your Node.js/Bun app. Bro is available as a native addon module

let stylesheet = `
$colors = [blue, yellow, orchid]
for $color in $colors:
  .bg-{$color}
    background: $color
`
const bro = require("bro.node")
bro.compile(stylesheet) // .bg-blue{background:blue}.bg-yellow{...

Bro in Browser via Wasm

Build complex real-time web-apps using Bro + WebAssembly

<style type="text/bro" id="stylesheet">
$colors = [blue, yellow, orchid]
for $color in $colors:
  .bg-{$color}
    background: $color
</style>
<script src="https://github.com/openpeeps/bro/raw/main/bro.min.js"></script>

bro.compile('#stylesheet') // .bg-blue{background:blue}.bg-yellow{...

Benchmarks

DartSass, SassC, Bro, BroJS (via NAPI w/ Node & Bun), Sass (JS w/ Node & Bun)

1.572.876 lines of

.btn
  background: yellow

Benchmark 1: ./dart sass.snapshot test.sass:test.css --no-source-map --style=compressed
  Time (abs ≡):         4.925 s               [User: 6.060 s, System: 0.263 s]

Benchmark 2: bro test.sass test.css --min
  Time (abs ≡):        441.7 ms               [User: 422.3 ms, System: 19.9 ms]

Benchmark 3: sassc test.sass test.css --style=compressed
  Time (abs ≡):         5.757 s               [User: 5.346 s, System: 0.400 s]

Benchmark 4: bun bro.js
  Time (abs ≡):        679.0 ms               [User: 616.0 ms, System: 24.0 ms]

Benchmark 5: node bro.js
  Time (abs ≡):        653.7 ms               [User: 625.8 ms, System: 32.3 ms]

Benchmark 6: node sass.js
  Time (abs ≡):        12.783 s               [User: 19.640 s, System: 1.185 s]

Benchmark 7: bun sass.js
  Time (abs ≡):        10.485 s               [User: 20.422 s, System: 1.030 s]

Summary
  'bro test.sass test.css --min' ran
    1.48 times faster than 'node bro.js'
    1.54 times faster than 'bun bro.js'
   11.15 times faster than './dart sass.snapshot test.sass:test.css --no-source-map --style=compressed'
   13.03 times faster than 'sassc test.sass test.css --style=compressed'
   23.74 times faster than 'bun sass.js'
   28.94 times faster than 'node sass.js'

Check Benchmarks page for more numbers

Benchmarks made with hyperfine on
Ubuntu 22.04 LTS / Ryzen 5 5600g 3.9GHz × 12 / RAM 32 GB 3200MHz / SSD M.2

TODO

[x] The Interpreter (Tokens, Lexer, Parser, AST, Compiler)
[x] CSS Selectors ref
- [ ] Type Selectors ref
- [ ] Universal Selectors ref
- [ ] Attribute Selectors ref
- [x] Class Selectors ref
- [x] ID Selectors ref
- [ ] Pseudo-classes ref
- [ ] Pseudo-elements ref
- [ ] Groups of Selectors ref
- [ ] Combinators ref
[x] Compile-time
- [x] Variables
- [x] Arrays/Objects
- [x] Anonymous arrays and objects
- [x] Constants
- [x] Functions
- [x] Closures
- [x] Overloading
- [ ] Recursive calls
- [ ] Mixins
- [x] Conditionals (if, elif, else, and case)
- [x] For/Loop statements for $x in $y
- [ ] Typed CSS properties/values
- [x] Warnings unused variables, functions
- [ ] CSS Variable Declaration using var instead of --
- [ ] String/Variable concatenation using & and backticks
[ ] Handle single/multi line comments
[x] Memoization
[x] Import CSS/BASS files
- [ ] Implement AST caching system
[x] Command Line Interface
- [x] CLI watch for live changes
- [x] CLI build BASS code to CSS
- [ ] CLI generate source map
- [x] CLI ast command for generating binary AST
[x] Build
- [x] Cross-platform compilation
- [x] Node.js/Bun.js via NAPI
- [ ] Browser with WASM via Emscripten

0.2.x

[ ] Convert boring SASS to BASS
[ ] CLI doc command for generating documentation website

❤ Contributions & Support

🐛 Found a bug? Create a new Issue
👋 Wanna help? Fork it!
Create a Syntax Highlighter for your favorite code editor.
😎 Get €20 in cloud credits from Hetzner
🥰 Donate to OpenPeeps via PayPal address

openpeeps / bro

readme