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

Advanced Physics-Based Features (Transcends CSS)

🔬 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

Installation

npm install -g stylpp

Create a STYL++ File

Create style.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;

Compile to CSS

stylpp compile style.stylpp style.css

This generates:

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

1. Semicolon-Based Indentation

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

; 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;

2. Variables

Define variables in the variables section:

variables;
    primary #007bff;
    secondary #6c757d;
    spacing 16px;
    radius 4px;

.button;
    background var(primary);
    padding var(spacing);
    border-radius var(radius);

3. Math Operations

Values with mathematical expressions are automatically wrapped in calc():

.container;
    width 100% - 40px;
    height 300px + 50px;
    padding var(spacing) * 2;
    margin-left 50px / 2;

4. Nested Selectors

Create hierarchical CSS with natural nesting:

.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;

5. For Loops

Generate repetitive rules:

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);

6. Conditionals and Media Queries

Handle responsive design and themes:

.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;

7. Responsive Helpers

Built-in responsive sizing:

.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

Compile a File

stylpp compile input.stylpp output.css

Watch for Changes

stylpp watch src/ dist/

Start Development Server

stylpp serve --port 3000

The dev server provides:

• Live reloading of .stylpp files
• Automatic compilation
• WebSocket support for hot module replacement

Lint Your Code

stylpp lint **/*.stylpp

Format Your Code

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

Keyboard Shortcuts

| Shortcut | Command | |----------|---------| | Ctrl+Shift+B (or Cmd+Shift+B on Mac) | Compile current file | | Ctrl+K Ctrl+F | Format document |

Configuration

In VS Code settings:

{
  "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:

<!DOCTYPE html>
<html>
<head>
  <script src="stylpp.min.js"></script>
</head>
<body>
  <style type="text/stylpp">
    variables;
        primary #007bff;

    body;
        background var(primary);
        color white;
  </style>
</body>
</html>

Or compile programmatically:

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

const result = runtime.compile(`
  body;
    background blue;
`);

console.log(result.css);

Programmatic API

Node.js

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);
}

Browser

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

Issue: "stylpp command not found"

Solution: Install globally

npm install -g stylpp

Issue: VS Code extension not working

Solution: Reload VS Code or reinstall the extension

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

Issue: Weird CSS output

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:

⚛️ Physics Engine

• Real Verlet integration physics simulation
• Spring and rod constraints for natural layouts
• Gravity, damping, and friction
• 60 FPS performance

🎬 Advanced Animations

• 16+ built-in easing functions (elastic, bounce, expo, etc.)
• Animation timelines with keyframe sequences
• Cubic-bezier support
• Physics-based spring animations

🌀 3D Transforms

• Full matrix3d support
• Perspective and depth
• 3D rotation on all axes
• Advanced effects (glassmorphism, neumorphism, glow)

✨ Particle Systems

• Programmable particle generation
• Physics-based particle behavior
• Fade and scale effects
• Custom colors and sizes

📱 Responsive Physics

• 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