STYL++ - A revolutionary styling language with semicolon-based syntax
npm install stylppwidth 100% - 40px; ā calc(100% - 40px)
for loops
@mobile, @dark, etc.
responsive() and fluid() functions
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(
);
console.log(result.css);
`
Programmatic API
$3
`javascript
const StylppCompiler = require('stylpp');
const compiler = new StylppCompiler({
minify: false,
sourceMap: true,
vendorPrefix: true
});
const code =
;
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(
, '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