Skip to content

Commit a125017

Browse files
JohnCoeneJohnCoene
committed
docs(readme): document config
1 parent 9dbf460 commit a125017

2 files changed

Lines changed: 343 additions & 1 deletion

File tree

‎README.md‎

Lines changed: 342 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,348 @@ e.g.: `flex~1` results in `flex: 1`
5757
- Colors can be edited in `.styler` config file
5858
- Extracted CSS properties are checked against the [W3C CSS Properties](https://www.w3.org/Style/CSS/all-properties.en.html) table
5959

60+
## Configuration
61+
62+
Styler can be customized through the `.styler` configuration file. You can create a default configuration with:
63+
64+
```bash
65+
styler -create
66+
```
67+
68+
The configuration allows you to customize:
69+
70+
- **Output**: File path where generated CSS is saved
71+
- **Input**: File patterns to search for class attributes (e.g., `**/*.html`, `*.js`)
72+
- **Unit**: CSS unit to use for numeric values (default: `rem`)
73+
- **Divider**: Number to divide numeric values by (default: `4`)
74+
- **Media Queries**: Custom breakpoint definitions
75+
- **Colors**: Custom color palette definitions
76+
77+
<details>
78+
<summary>Default Configuration</summary>
79+
80+
```json
81+
{
82+
"version": "0.0.3",
83+
"pattern": "*.R|*.r|*.js|*.html",
84+
"directory": ".",
85+
"output": "style.min.css",
86+
"unit": "rem",
87+
"divider": 4,
88+
"media": [
89+
{
90+
"maxWidth": "",
91+
"minWidth": "640px",
92+
"name": "sm"
93+
},
94+
{
95+
"maxWidth": "",
96+
"minWidth": "768px",
97+
"name": "md"
98+
},
99+
{
100+
"maxWidth": "",
101+
"minWidth": "1024px",
102+
"name": "lg"
103+
},
104+
{
105+
"maxWidth": "",
106+
"minWidth": "1280px",
107+
"name": "xl"
108+
}
109+
],
110+
"colors": {
111+
"amber": {
112+
"100": "#fef3c7",
113+
"200": "#fde68a",
114+
"300": "#fcd34d",
115+
"400": "#fbbf24",
116+
"50": "#fffbeb",
117+
"500": "#f59e0b",
118+
"600": "#d97706",
119+
"700": "#b45309",
120+
"800": "#92400e",
121+
"900": "#78350f",
122+
"950": "#451a03"
123+
},
124+
"blue": {
125+
"100": "#dbeafe",
126+
"200": "#bfdbfe",
127+
"300": "#93c5fd",
128+
"400": "#60a5fa",
129+
"50": "#eff6ff",
130+
"500": "#3b82f6",
131+
"600": "#2563eb",
132+
"700": "#1d4ed8",
133+
"800": "#1e40af",
134+
"900": "#1e3a8a",
135+
"950": "#172554"
136+
},
137+
"cyan": {
138+
"100": "#cffafe",
139+
"200": "#a5f3fc",
140+
"300": "#67e8f9",
141+
"400": "#22d3ee",
142+
"50": "#ecfeff",
143+
"500": "#06b6d4",
144+
"600": "#0891b2",
145+
"700": "#0e7490",
146+
"800": "#155e75",
147+
"900": "#164e63",
148+
"950": "#083344"
149+
},
150+
"emerald": {
151+
"100": "#d1fae5",
152+
"200": "#a7f3d0",
153+
"300": "#6ee7b7",
154+
"400": "#34d399",
155+
"50": "#ecfdf5",
156+
"500": "#10b981",
157+
"600": "#059669",
158+
"700": "#047857",
159+
"800": "#065f46",
160+
"900": "#064e3b",
161+
"950": "#022c22"
162+
},
163+
"fuchsia": {
164+
"100": "#fae8ff",
165+
"200": "#f5d0fe",
166+
"300": "#f0abfc",
167+
"400": "#e879f9",
168+
"50": "#fdf4ff",
169+
"500": "#d946ef",
170+
"600": "#c026d3",
171+
"700": "#a21caf",
172+
"800": "#86198f",
173+
"900": "#701a75",
174+
"950": "#4a044e"
175+
},
176+
"gray": {
177+
"100": "#f3f4f6",
178+
"200": "#e5e7eb",
179+
"300": "#d1d5db",
180+
"400": "#9ca3af",
181+
"50": "#f9fafb",
182+
"500": "#6b7280",
183+
"600": "#4b5563",
184+
"700": "#374151",
185+
"800": "#1f2937",
186+
"900": "#111827",
187+
"950": "#030712"
188+
},
189+
"green": {
190+
"100": "#dcfce7",
191+
"200": "#bbf7d0",
192+
"300": "#86efac",
193+
"400": "#4ade80",
194+
"50": "#f0fdf4",
195+
"500": "#22c55e",
196+
"600": "#16a34a",
197+
"700": "#15803d",
198+
"800": "#166534",
199+
"900": "#14532d",
200+
"950": "#052e16"
201+
},
202+
"indigo": {
203+
"100": "#e0e7ff",
204+
"200": "#c7d2fe",
205+
"300": "#a5b4fc",
206+
"400": "#818cf8",
207+
"50": "#eef2ff",
208+
"500": "#6366f1",
209+
"600": "#4f46e5",
210+
"700": "#4338ca",
211+
"800": "#3730a3",
212+
"900": "#312e81",
213+
"950": "#1e1b4b"
214+
},
215+
"lime": {
216+
"100": "#ecfccb",
217+
"200": "#d9f99d",
218+
"300": "#bef264",
219+
"400": "#a3e635",
220+
"50": "#f7fee7",
221+
"500": "#84cc16",
222+
"600": "#65a30d",
223+
"700": "#4d7c0f",
224+
"800": "#3f6212",
225+
"900": "#365314",
226+
"950": "#1a2e05"
227+
},
228+
"neutral": {
229+
"100": "#f5f5f5",
230+
"200": "#e5e5e5",
231+
"300": "#d4d4d4",
232+
"400": "#a3a3a3",
233+
"50": "#fafafa",
234+
"500": "#737373",
235+
"600": "#525252",
236+
"700": "#404040",
237+
"800": "#262626",
238+
"900": "#171717",
239+
"950": "#0a0a0a"
240+
},
241+
"orange": {
242+
"100": "#ffedd5",
243+
"200": "#fed7aa",
244+
"300": "#fdba74",
245+
"400": "#fb923c",
246+
"50": "#fff7ed",
247+
"500": "#f97316",
248+
"600": "#ea580c",
249+
"700": "#c2410c",
250+
"800": "#9a3412",
251+
"900": "#7c2d12",
252+
"950": "#431407"
253+
},
254+
"pink": {
255+
"100": "#fce7f3",
256+
"200": "#fbcfe8",
257+
"300": "#f9a8d4",
258+
"400": "#f472b6",
259+
"50": "#fdf2f8",
260+
"500": "#ec4899",
261+
"600": "#db2777",
262+
"700": "#be185d",
263+
"800": "#9d174d",
264+
"900": "#831843",
265+
"950": "#500724"
266+
},
267+
"purple": {
268+
"100": "#f3e8ff",
269+
"200": "#e9d5ff",
270+
"300": "#d8b4fe",
271+
"400": "#c084fc",
272+
"50": "#faf5ff",
273+
"500": "#a855f7",
274+
"600": "#9333ea",
275+
"700": "#7e22ce",
276+
"800": "#6b21a8",
277+
"900": "#581c87",
278+
"950": "#3b0764"
279+
},
280+
"red": {
281+
"100": "#fee2e2",
282+
"200": "#fecaca",
283+
"300": "#fca5a5",
284+
"400": "#f87171",
285+
"50": "#fef2f2",
286+
"500": "#ef4444",
287+
"600": "#dc2626",
288+
"700": "#b91c1c",
289+
"800": "#991b1b",
290+
"900": "#7f1d1d",
291+
"950": "#450a0a"
292+
},
293+
"rose": {
294+
"100": "#ffe4e6",
295+
"200": "#fecdd3",
296+
"300": "#fda4af",
297+
"400": "#fb7185",
298+
"50": "#fff1f2",
299+
"500": "#f43f5e",
300+
"600": "#e11d48",
301+
"700": "#be123c",
302+
"800": "#9f1239",
303+
"900": "#881337",
304+
"950": "#4c0519"
305+
},
306+
"sky": {
307+
"100": "#e0f2fe",
308+
"200": "#bae6fd",
309+
"300": "#7dd3fc",
310+
"400": "#38bdf8",
311+
"50": "#f0f9ff",
312+
"500": "#0ea5e9",
313+
"600": "#0284c7",
314+
"700": "#0369a1",
315+
"800": "#075985",
316+
"900": "#0c4a6e",
317+
"950": "#082f49"
318+
},
319+
"slate": {
320+
"100": "#f1f5f9",
321+
"200": "#e2e8f0",
322+
"300": "#cbd5e1",
323+
"400": "#94a3b8",
324+
"50": "#f8fafc",
325+
"500": "#64748b",
326+
"600": "#475569",
327+
"700": "#334155",
328+
"800": "#1e293b",
329+
"900": "#0f172a",
330+
"950": "#020617"
331+
},
332+
"stone": {
333+
"100": "#f5f5f4",
334+
"200": "#e7e5e4",
335+
"300": "#d6d3d1",
336+
"400": "#a8a29e",
337+
"50": "#fafaf9",
338+
"500": "#78716c",
339+
"600": "#57534e",
340+
"700": "#44403c",
341+
"800": "#292524",
342+
"900": "#1c1917",
343+
"950": "#0c0a09"
344+
},
345+
"teal": {
346+
"100": "#ccfbf1",
347+
"200": "#99f6e4",
348+
"300": "#5eead4",
349+
"400": "#2dd4bf",
350+
"50": "#f0fdfa",
351+
"500": "#14b8a6",
352+
"600": "#0d9488",
353+
"700": "#0f766e",
354+
"800": "#115e59",
355+
"900": "#134e4a",
356+
"950": "#042f2e"
357+
},
358+
"violet": {
359+
"100": "#ede9fe",
360+
"200": "#ddd6fe",
361+
"300": "#c4b5fd",
362+
"400": "#a78bfa",
363+
"50": "#f5f3ff",
364+
"500": "#8b5cf6",
365+
"600": "#7c3aed",
366+
"700": "#6d28d9",
367+
"800": "#5b21b6",
368+
"900": "#4c1d95",
369+
"950": "#2e1065"
370+
},
371+
"yellow": {
372+
"100": "#fef9c3",
373+
"200": "#fef08a",
374+
"300": "#fde047",
375+
"400": "#facc15",
376+
"50": "#fefce8",
377+
"500": "#eab308",
378+
"600": "#ca8a04",
379+
"700": "#a16207",
380+
"800": "#854d0e",
381+
"900": "#713f12",
382+
"950": "#422006"
383+
},
384+
"zinc": {
385+
"100": "#f4f4f5",
386+
"200": "#e4e4e7",
387+
"300": "#d4d4d8",
388+
"400": "#a1a1aa",
389+
"50": "#fafafa",
390+
"500": "#71717a",
391+
"600": "#52525b",
392+
"700": "#3f3f46",
393+
"800": "#27272a",
394+
"900": "#18181b",
395+
"950": "#09090b"
396+
}
397+
}
398+
}
399+
```
400+
/details>
401+
60402
## Advanced Property Values
61403

62404
Styler now supports complex CSS property values with multiple components:

‎options/config.go‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import (
88

99
const configPath = ".styler"
1010

11-
const Version = "0.0.3"
11+
const Version = "0.0.4"
1212

1313
type Media struct {
1414
MaxWidth string `json:"maxWidth"`

0 commit comments

Comments
 (0)