bro

bro copied to clipboard

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

API reference | Download (not yet)

😍 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="/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

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

🎩 License

Bro Language LGPLv3 license.Made by Humans from OpenPeeps.
Copyright © 2024 OpenPeeps & Contributors — All rights reserved.