Skip to content
/ bro Public
generated from openpeeps/pistachio

Bro - A super fast stylesheet language for cool kids! Alternative to SassC, DartSass SassJS and Less.

License

Notifications You must be signed in to change notification settings

openpeeps/bro

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Bro aka NimSass
πŸ˜‹ Bro ⚑ A super fast stylesheet language for cool kids!
πŸ‘‘ Written in Nim language

API reference | Download (not yet)
Github Actions Github Actions

😍 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

Benchmarks made with [hyperfine](https://github.com/sharkdp/hyperfine) on
**Ubuntu 22.04 LTS** / Ryzen 5 5600g 3.9GHz Γ— 12 / RAM 32 GB 3200MHz / SSD M.2

TODO

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

🎩 License

Bro Language LGPLv3 license.Made by Humans from OpenPeeps.
Copyright Β© 2024 OpenPeeps & Contributors β€” All rights reserved.