STYL++ - A Revolutionary Styling Language

Welcome to STYL++ - a modern CSS preprocessor with an elegant, semicolon-based syntax that's intuitive, concise, and powerful.

Features

✨ Semicolon-Based Syntax - Elegant indentation using leading semicolons
📦 Variables - Define reusable values across your styles
🔢 Math Operations - width 100% - 40px; → calc(100% - 40px)
🔄 Loops - Generate multiple rules with for loops
🎯 Conditionals - Responsive breakpoints and theme support with @mobile, @dark, etc.
🎨 Nested Selectors - Clean, hierarchical styling
⚡ Zero Config - Works out of the box
🌐 Multiple Outputs - Node.js, Browser, VS Code Extension, CLI
🎁 Vendor Prefixes - Automatic browser compatibility
📱 Responsive Helpers - responsive() and fluid() functions

$3

🔬 Physics Engine - Real Verlet integration for physics-based layouts
🎬 Advanced Animations - 16+ easing functions + timeline support
🎯 Spring Constraints - Natural physics-based element positioning
🌀 3D Transforms - Full matrix3d support beyond CSS
✨ Particle Systems - Generate particle effects programmatically
🎨 Advanced Filters - Glassmorphism, neumorphism, glow effects
🚀 Performance - 60 FPS physics simulation engine

Quick Start

$3

bash

npm install -g stylpp





$3



Create

style.stylpp

stylpp

variables;

    primary #007bff;

    spacing 16px;



body;

    font-family system-ui;

    background white;



    .container;

        max-width 1200px;

        margin 0 auto;

        padding var(spacing);



        h1;

            color var(primary);

            font-size 32px;

$3

bash

stylpp compile style.stylpp style.css





This generates:

css

body {

  font-family: system-ui;

  background: white;

}

body .container {

  max-width: 1200px;

  margin: 0 auto;

  padding: 16px;

}

body .container h1 {

  color: #007bff;

  font-size: 32px;

}





Core Syntax



$3



Every line ends with a semicolon. Indentation is represented by leading semicolons:

stylpp

; No semicolon means this is a comment



body;

    background white;

    

    ; One semicolon = one indent level

    p;

        color red;

        

        ; Two semicolons = two indent levels

        span;

            font-weight bold;





$3



Define variables in the

variables

 section:

stylpp

variables;

    primary #007bff;

    secondary #6c757d;

    spacing 16px;

    radius 4px;



.button;

    background var(primary);

    padding var(spacing);

    border-radius var(radius);





$3



Values with mathematical expressions are automatically wrapped in

calc()

stylpp

.container;

    width 100% - 40px;

    height 300px + 50px;

    padding var(spacing) * 2;

    margin-left 50px / 2;





$3



Create hierarchical CSS with natural nesting:

stylpp

.card;

    background white;

    padding 16px;

    

    .card-header;

        font-size 20px;

        font-weight bold;

        

    .card-body;

        line-height 1.6;

        

        p;

            margin 0 0 16px 0;





$3



Generate repetitive rules:

stylpp

for i in 1 to 5;

    .column-{i};

        width calc(100% / 5 * i);

        margin-bottom 16px;



for size in small, medium, large;

    .text-{size};

        font-size var({size}-font-size);





$3



Handle responsive design and themes:

stylpp

.container;

    width 100%;

    

    @mobile;

        width 100%;

        padding 8px;

        

    @tablet;

        width 100%;

        padding 12px;

        

    @desktop;

        max-width 1200px;

        margin 0 auto;

        

    @dark;

        background #1e1e1e;

        color white;





$3



Built-in responsive sizing:

stylpp

.container;

    width responsive(300px, 1200px);

    

    ; Becomes: clamp(300px, 50vw + 100px, 1200px)



.title;

    font-size fluid(16px, 32px);

    

    ; Becomes: clamp(16px, 5vw, 32px)





Command Line Interface



$3

bash

stylpp compile input.stylpp output.css

$3

bash

stylpp watch src/ dist/

$3

bash

stylpp serve --port 3000





The dev server provides:

- Live reloading of

.stylpp

 files

- Automatic compilation

- WebSocket support for hot module replacement



$3

bash

stylpp lint */.stylpp

$3

bash

stylpp format */.stylpp





VS Code Integration



Install the STYL++ VS Code extension for:



✓ Syntax highlighting  

✓ IntelliSense and code completion  

✓ Format on save  

✓ Compile on save  

✓ Error highlighting  

✓ Snippets  

✓ Go to definition  



$3



| Shortcut | Command |

|----------|---------|

|

Ctrl+Shift+B (or Cmd+Shift+B

 on Mac) | Compile current file |

|

Ctrl+K Ctrl+F

 | Format document |



$3



In VS Code settings:

json

{

  "stylpp.minify": false,

  "stylpp.sourceMap": true,

  "stylpp.vendorPrefix": true,

  "stylpp.formatOnSave": true,

  "stylpp.autoCompile": false,

  "stylpp.outputPath": "dist/"

}





Browser Usage



Include STYL++ in the browser:

html





Or compile programmatically:

javascript

const StylppRuntime = require('stylpp/runtime');

const runtime = new StylppRuntime();



const result = runtime.compile(

body;
background blue;

);



console.log(result.css);





Programmatic API



$3

javascript

const StylppCompiler = require('stylpp');



const compiler = new StylppCompiler({

  minify: false,

  sourceMap: true,

  vendorPrefix: true

});



const code =

variables;
primary #007bff;

body;
color var(primary);

;



const result = compiler.compile(code);



if (result.success) {

  console.log(result.css);

} else {

  console.error(result.errors);

}

$3

javascript

const runtime = new StylppRuntime({

  hotReload: true,

  autoCompile: true,

  showErrors: true

});



const result = runtime.compile(

.button;
background blue;
color white;

, 'my-styles');



console.log(result.css);





Examples



Check the

examples/

 directory for complete working examples:



-

minimal.stylpp

 - Basic introduction

-

dashboard.stylpp

 - Complex real-world dashboard with loops, conditionals, and variables



Performance



Compilation times:



- Small files (< 100 lines): < 10ms

- Medium files (< 1000 lines): < 100ms

- Large files (< 10000 lines): < 1000ms



Bundle sizes:



- Runtime only: < 10KB gzipped

- Full compiler: < 50KB gzipped

- VS Code extension: < 5MB



Error Messages



STYL++ provides helpful error messages with line numbers:



Error: Missing closing selector on line 10

  Expected ';' at end of selector

  .button {

          ^





Troubleshooting



$3



Solution: Install globally

bash

npm install -g stylpp





$3



Solution: Reload VS Code or reinstall the extension

bash

code --install-extension path/to/stylpp-1.0.0.vsix





$3



Solution: Check that:

1. Every line ends with

;



2. Leading semicolons match indent level

3. Variables are defined in

variables;

 section



Advanced Features: Physics & Effects



STYL++ transcends CSS limitations with:



$3

- Real Verlet integration physics simulation

- Spring and rod constraints for natural layouts

- Gravity, damping, and friction

- 60 FPS performance



$3

- 16+ built-in easing functions (elastic, bounce, expo, etc.)

- Animation timelines with keyframe sequences

- Cubic-bezier support

- Physics-based spring animations



$3

- Full matrix3d support

- Perspective and depth

- 3D rotation on all axes

- Advanced effects (glassmorphism, neumorphism, glow)



$3

- Programmable particle generation

- Physics-based particle behavior

- Fade and scale effects

- Custom colors and sizes



$3

- Fluid sizing with

responsive()` function
- Adaptive layouts with spring constraints
- Mobile-first physics simulation
- Media query integration

See Advanced Features Guide for complete documentation and examples.

Contributing

Contributions welcome! Please submit pull requests to the GitHub repository.

License

MIT License - See LICENSE file for details

Support

- 📖 Documentation
- 🐛 Issue Tracker
- 💬 Discussions

---

Made with ❤️ for web developers everywhere.
BY FRANCIS JUSU