@bookklik/senangstart-css 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +209 -0
- package/package.json +41 -0
- package/src/cdn/jit.js +503 -0
- package/src/cli/commands/build.js +169 -0
- package/src/cli/commands/dev.js +75 -0
- package/src/cli/commands/init.js +64 -0
- package/src/cli/index.js +36 -0
- package/src/compiler/generators/ai-context.js +128 -0
- package/src/compiler/generators/css.js +344 -0
- package/src/compiler/generators/typescript.js +125 -0
- package/src/compiler/index.js +50 -0
- package/src/compiler/parser.js +67 -0
- package/src/compiler/tokenizer.js +142 -0
- package/src/config/defaults.js +137 -0
- package/src/utils/logger.js +48 -0
- package/templates/senangstart.config.js +35 -0
package/README.md
ADDED
|
@@ -0,0 +1,209 @@
|
|
|
1
|
+
# SenangStart CSS
|
|
2
|
+
|
|
3
|
+
**The Intent-First CSS Engine**
|
|
4
|
+
|
|
5
|
+
> "Speak Human. Compile to Logic."
|
|
6
|
+
|
|
7
|
+
Stop memorizing arbitrary scales like `px-4`, `px-8`, `px-16`. Start using natural adjectives: `tiny`, `small`, `medium`, `big`, `giant`, `vast`.
|
|
8
|
+
|
|
9
|
+
## Quick Start (CDN - Zero Build)
|
|
10
|
+
|
|
11
|
+
```html
|
|
12
|
+
<!DOCTYPE html>
|
|
13
|
+
<html>
|
|
14
|
+
<head>
|
|
15
|
+
<script src="https://cdn.senangstart.dev/jit.js"></script>
|
|
16
|
+
</head>
|
|
17
|
+
<body>
|
|
18
|
+
<div
|
|
19
|
+
layout="flex col center"
|
|
20
|
+
space="p:big"
|
|
21
|
+
visual="bg:primary text:white rounded:big"
|
|
22
|
+
>
|
|
23
|
+
Hello SenangStart!
|
|
24
|
+
</div>
|
|
25
|
+
</body>
|
|
26
|
+
</html>
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
## Quick Start (CLI)
|
|
30
|
+
|
|
31
|
+
```bash
|
|
32
|
+
# Install
|
|
33
|
+
npm i @bookklik/senangstart-css
|
|
34
|
+
|
|
35
|
+
# Initialize config
|
|
36
|
+
senangstart init
|
|
37
|
+
|
|
38
|
+
# Start development
|
|
39
|
+
senangstart dev
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
## The Tri-Attribute Syntax
|
|
43
|
+
|
|
44
|
+
SenangStart uses **three attributes** to separate concerns:
|
|
45
|
+
|
|
46
|
+
| Attribute | Purpose | Example |
|
|
47
|
+
|-----------|---------|---------|
|
|
48
|
+
| `layout` | Structure & position | `layout="flex col center"` |
|
|
49
|
+
| `space` | Sizing & spacing | `space="p:medium g:small"` |
|
|
50
|
+
| `visual` | Colors & appearance | `visual="bg:white rounded:big"` |
|
|
51
|
+
|
|
52
|
+
## The Natural Spacing Scale
|
|
53
|
+
|
|
54
|
+
| Keyword | Size | Mental Model |
|
|
55
|
+
|---------|------|--------------|
|
|
56
|
+
| `none` | 0px | No space |
|
|
57
|
+
| `tiny` | 4px | 🪨 Pebble — Borders, offsets |
|
|
58
|
+
| `small` | 8px | 📦 Matchbox — Group related items |
|
|
59
|
+
| `medium` | 16px | 📱 Smartphone — Standard default |
|
|
60
|
+
| `big` | 32px | 💻 Laptop — Separate sections |
|
|
61
|
+
| `giant` | 64px | 🚪 Door — Layout divisions |
|
|
62
|
+
| `vast` | 128px | 🏠 House — Hero sections |
|
|
63
|
+
|
|
64
|
+
## Layout Attribute
|
|
65
|
+
|
|
66
|
+
```html
|
|
67
|
+
<!-- Flexbox -->
|
|
68
|
+
<div layout="flex row center">...</div>
|
|
69
|
+
<div layout="flex col between">...</div>
|
|
70
|
+
|
|
71
|
+
<!-- Grid -->
|
|
72
|
+
<div layout="grid">...</div>
|
|
73
|
+
|
|
74
|
+
<!-- Position -->
|
|
75
|
+
<nav layout="fixed z:top">...</nav>
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
### Keywords
|
|
79
|
+
|
|
80
|
+
- **Display:** `flex`, `grid`, `block`, `hidden`
|
|
81
|
+
- **Direction:** `row`, `col`, `row-reverse`, `col-reverse`
|
|
82
|
+
- **Alignment:** `center`, `between`, `start`, `end`
|
|
83
|
+
- **Position:** `absolute`, `relative`, `fixed`, `sticky`
|
|
84
|
+
- **Z-Index:** `z:base`, `z:low`, `z:mid`, `z:high`, `z:top`
|
|
85
|
+
|
|
86
|
+
## Space Attribute
|
|
87
|
+
|
|
88
|
+
Syntax: `[breakpoint]:[property]:[scale]`
|
|
89
|
+
|
|
90
|
+
```html
|
|
91
|
+
<!-- Padding -->
|
|
92
|
+
<div space="p:medium">All sides</div>
|
|
93
|
+
<div space="p-x:big p-y:small">Horizontal & vertical</div>
|
|
94
|
+
|
|
95
|
+
<!-- Margin -->
|
|
96
|
+
<div space="m-b:big">Bottom margin</div>
|
|
97
|
+
<div space="m-x:auto">Center horizontally</div>
|
|
98
|
+
|
|
99
|
+
<!-- Gap (flex/grid) -->
|
|
100
|
+
<div layout="flex" space="g:small">...</div>
|
|
101
|
+
|
|
102
|
+
<!-- Sizing -->
|
|
103
|
+
<div space="w:[100%] max-w:[1200px]">...</div>
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
### Properties
|
|
107
|
+
|
|
108
|
+
- `p`, `p-t`, `p-r`, `p-b`, `p-l`, `p-x`, `p-y` — Padding
|
|
109
|
+
- `m`, `m-t`, `m-r`, `m-b`, `m-l`, `m-x`, `m-y` — Margin
|
|
110
|
+
- `g`, `g-x`, `g-y` — Gap
|
|
111
|
+
- `w`, `h`, `min-w`, `max-w`, `min-h`, `max-h` — Sizing
|
|
112
|
+
|
|
113
|
+
### Arbitrary Values (Escape Hatch)
|
|
114
|
+
|
|
115
|
+
```html
|
|
116
|
+
<div space="w:[350px] h:[100vh]">...</div>
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
## Visual Attribute
|
|
120
|
+
|
|
121
|
+
```html
|
|
122
|
+
<!-- Colors -->
|
|
123
|
+
<div visual="bg:primary text:white">...</div>
|
|
124
|
+
|
|
125
|
+
<!-- Borders & Shadows -->
|
|
126
|
+
<div visual="rounded:big shadow:medium">...</div>
|
|
127
|
+
|
|
128
|
+
<!-- Typography -->
|
|
129
|
+
<span visual="font:bold text-size:big">...</span>
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
### Properties
|
|
133
|
+
|
|
134
|
+
- `bg` — Background color
|
|
135
|
+
- `text` — Text color or alignment
|
|
136
|
+
- `text-size` — Font size (`tiny`, `small`, `medium`, `big`, `giant`, `vast`)
|
|
137
|
+
- `font` — Font weight (`normal`, `medium`, `bold`)
|
|
138
|
+
- `rounded` — Border radius (`none`, `small`, `medium`, `big`, `round`)
|
|
139
|
+
- `shadow` — Box shadow (`none`, `small`, `medium`, `big`, `giant`)
|
|
140
|
+
|
|
141
|
+
## Responsive Design
|
|
142
|
+
|
|
143
|
+
```html
|
|
144
|
+
<div space="p:small tab:p:medium lap:p:big">
|
|
145
|
+
Grows with screen size
|
|
146
|
+
</div>
|
|
147
|
+
|
|
148
|
+
<div layout="flex col tab:row">
|
|
149
|
+
Column on mobile, row on tablet+
|
|
150
|
+
</div>
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
### Breakpoints
|
|
154
|
+
|
|
155
|
+
| Prefix | Screen |
|
|
156
|
+
|--------|--------|
|
|
157
|
+
| `mob:` | 480px+ |
|
|
158
|
+
| `tab:` | 768px+ |
|
|
159
|
+
| `lap:` | 1024px+ |
|
|
160
|
+
| `desk:` | 1280px+ |
|
|
161
|
+
|
|
162
|
+
## Hover & States
|
|
163
|
+
|
|
164
|
+
```html
|
|
165
|
+
<button visual="bg:primary hover:bg:[#2563EB]">
|
|
166
|
+
Hover me
|
|
167
|
+
</button>
|
|
168
|
+
|
|
169
|
+
<a visual="text:grey hover:text:primary">Link</a>
|
|
170
|
+
```
|
|
171
|
+
|
|
172
|
+
## CLI Commands
|
|
173
|
+
|
|
174
|
+
```bash
|
|
175
|
+
senangstart init # Create config file
|
|
176
|
+
senangstart build # One-time build
|
|
177
|
+
senangstart dev # Watch mode
|
|
178
|
+
```
|
|
179
|
+
|
|
180
|
+
## Configuration
|
|
181
|
+
|
|
182
|
+
```javascript
|
|
183
|
+
// senangstart.config.js
|
|
184
|
+
export default {
|
|
185
|
+
content: ['./src/**/*.html'],
|
|
186
|
+
|
|
187
|
+
output: {
|
|
188
|
+
css: './public/senangstart.css',
|
|
189
|
+
minify: true
|
|
190
|
+
},
|
|
191
|
+
|
|
192
|
+
theme: {
|
|
193
|
+
spacing: {
|
|
194
|
+
'huge': '256px' // Add custom scale
|
|
195
|
+
},
|
|
196
|
+
colors: {
|
|
197
|
+
'brand': '#8B5CF6' // Add custom color
|
|
198
|
+
}
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
```
|
|
202
|
+
|
|
203
|
+
## License
|
|
204
|
+
|
|
205
|
+
MIT
|
|
206
|
+
|
|
207
|
+
---
|
|
208
|
+
|
|
209
|
+
*Happy styling!* 🎨
|
package/package.json
ADDED
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@bookklik/senangstart-css",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "The Intent-First CSS Engine - Speak Human, Compile to Logic",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"main": "src/index.js",
|
|
7
|
+
"bin": {
|
|
8
|
+
"senangstart": "./src/cli/index.js",
|
|
9
|
+
"senang": "./src/cli/index.js"
|
|
10
|
+
},
|
|
11
|
+
"scripts": {
|
|
12
|
+
"build": "node src/cli/index.js build && vitepress build docs",
|
|
13
|
+
"build:css": "node src/cli/index.js build",
|
|
14
|
+
"dev": "node src/cli/index.js dev",
|
|
15
|
+
"test": "node --test tests/",
|
|
16
|
+
"docs:dev": "vitepress dev docs",
|
|
17
|
+
"docs:build": "vitepress build docs",
|
|
18
|
+
"docs:preview": "vitepress preview docs"
|
|
19
|
+
},
|
|
20
|
+
"keywords": [
|
|
21
|
+
"css",
|
|
22
|
+
"framework",
|
|
23
|
+
"utility-css",
|
|
24
|
+
"natural-language",
|
|
25
|
+
"intent-first"
|
|
26
|
+
],
|
|
27
|
+
"author": "",
|
|
28
|
+
"license": "MIT",
|
|
29
|
+
"dependencies": {
|
|
30
|
+
"chokidar": "^3.5.3",
|
|
31
|
+
"commander": "^11.1.0"
|
|
32
|
+
},
|
|
33
|
+
"devDependencies": {
|
|
34
|
+
"vitepress": "^1.6.4"
|
|
35
|
+
},
|
|
36
|
+
"files": [
|
|
37
|
+
"src/",
|
|
38
|
+
"templates/",
|
|
39
|
+
"dist/"
|
|
40
|
+
]
|
|
41
|
+
}
|