kss-modern 0.0.34 → 0.0.35
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 +76 -6
- package/dist/node/lib/index.d.mts +0 -4
- package/dist/node/lib/index.d.ts +0 -4
- package/dist/node/lib/index.mjs +326 -211
- package/dist/styleguide-assets/.vite/manifest.json +15 -15
- package/dist/styleguide-assets/assets/worker-B3CfVIRM.js +5723 -0
- package/dist/styleguide-assets/{browser-fpsWKfdu.js → browser-NN7v9uwW.js} +2168 -2058
- package/dist/styleguide-assets/{clipboard-CHXwXttp.js → clipboard-CqnSM003.js} +5 -8
- package/dist/styleguide-assets/editor-select-CYqpYdVR.js +37 -0
- package/dist/styleguide-assets/{fullpage-kAiscyr9.js → fullpage-Dq-R_v0z.js} +50 -48
- package/dist/styleguide-assets/{html-validator-BtuDJsqz.js → html-validator-BX35WeTe.js} +79 -76
- package/dist/styleguide-assets/icons-TyOa-vP5.js +28 -0
- package/dist/styleguide-assets/kss-modern-BFLcfq8_.css +1 -0
- package/dist/styleguide-assets/preview-CSRIz9iH.js +3644 -0
- package/dist/styleguide-assets/preview-CchyT0S6.js +1 -0
- package/dist/styleguide-assets/preview-inline-Ck0PRwv3.js +145 -0
- package/package.json +17 -9
- package/dist/styleguide-assets/assets/worker-CrZ3ceaF.js +0 -12
- package/dist/styleguide-assets/editor-select-Bzw7rF0M.js +0 -28
- package/dist/styleguide-assets/icons-C6_hfgSL.js +0 -36
- package/dist/styleguide-assets/kss-modern-xym40Ju8.css +0 -1
- package/dist/styleguide-assets/preview-CRWbT02v.js +0 -3581
- package/dist/styleguide-assets/preview-CxKiVux2.js +0 -1
- package/dist/styleguide-assets/preview-inline-FHbYQtac.js +0 -101
package/README.md
CHANGED
|
@@ -1,15 +1,85 @@
|
|
|
1
|
-
#
|
|
1
|
+
# kss-modern
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A modern, KSS-compatible styleguide generator. Parses KSS comment blocks from CSS/SCSS files and generates a static, accessible styleguide with live component previews.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- KSS-compatible comment parsing from CSS/SCSS files
|
|
8
|
+
- Live component previews with modifier variants
|
|
9
|
+
- Pug template support via worker thread pool
|
|
10
|
+
- Color palette and icon gallery documentation
|
|
11
|
+
- Figma embed integration with light/dark theme sync
|
|
12
|
+
- Accessibility auditing (axe-core) and HTML validation
|
|
13
|
+
- Markdown descriptions with custom components (alerts, accordions)
|
|
14
|
+
- Dark mode with three-way toggle (System/Light/Dark)
|
|
15
|
+
- Global search, keyboard navigation, and "Open in Editor" links
|
|
16
|
+
- Watch mode with smart rebuild (only on KSS comment changes)
|
|
17
|
+
|
|
18
|
+
## Installation
|
|
4
19
|
|
|
5
20
|
```bash
|
|
6
|
-
|
|
21
|
+
npm install kss-modern
|
|
7
22
|
```
|
|
8
23
|
|
|
9
|
-
|
|
24
|
+
## Quick Start
|
|
25
|
+
|
|
26
|
+
```ts
|
|
27
|
+
import { buildStyleguide } from 'kss-modern'
|
|
28
|
+
|
|
29
|
+
await buildStyleguide({
|
|
30
|
+
mode: 'production',
|
|
31
|
+
outDir: './styleguide',
|
|
32
|
+
contentDir: './src/sass/',
|
|
33
|
+
projectTitle: 'My Design System',
|
|
34
|
+
theme: '#005075',
|
|
35
|
+
html: {
|
|
36
|
+
lang: 'en',
|
|
37
|
+
assets: {
|
|
38
|
+
css: [{ src: '/css/styles.css' }],
|
|
39
|
+
js: [],
|
|
40
|
+
},
|
|
41
|
+
},
|
|
42
|
+
})
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
This scans all `.css` and `.scss` files in `contentDir` for KSS comment blocks and generates a complete static styleguide in `outDir`.
|
|
46
|
+
|
|
47
|
+
## Documentation
|
|
48
|
+
|
|
49
|
+
- **[Setup Guide](docs/setup.md)** — Installation, configuration reference, watch mode, project structure, and API reference
|
|
50
|
+
- **[Usage Guide](docs/usage.md)** — Writing KSS comments, all available properties (markup, modifiers, colors, icons, Markdown, Figma, status, etc.), and styleguide UI features
|
|
51
|
+
- **[Changelog](CHANGELOG.md)** — Version history and release notes
|
|
52
|
+
|
|
53
|
+
## Basic KSS Example
|
|
54
|
+
|
|
55
|
+
```scss
|
|
56
|
+
/*
|
|
57
|
+
Button
|
|
58
|
+
|
|
59
|
+
A basic button component.
|
|
60
|
+
|
|
61
|
+
.btn--primary - Primary action button
|
|
62
|
+
.btn--outline - Outlined variant
|
|
63
|
+
|
|
64
|
+
Markup: <button class="btn {{modifier_class}}">Click me</button>
|
|
65
|
+
|
|
66
|
+
Styleguide 2.1
|
|
67
|
+
*/
|
|
68
|
+
|
|
69
|
+
.btn { /* styles */ }
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
## Development
|
|
10
73
|
|
|
11
74
|
```bash
|
|
12
|
-
bun
|
|
75
|
+
bun install
|
|
76
|
+
bun run build # Build: Vite (client assets) then Unbuild (Node.js library)
|
|
77
|
+
bun run dev # Build + run dev server with Deno (watches test/ content)
|
|
78
|
+
bun run lint # ESLint
|
|
79
|
+
bun run test # Vitest unit + integration tests
|
|
80
|
+
bun run release # Lint + version bump via bumpp
|
|
13
81
|
```
|
|
14
82
|
|
|
15
|
-
|
|
83
|
+
## License
|
|
84
|
+
|
|
85
|
+
MIT
|
|
@@ -38,10 +38,6 @@ interface in2Section {
|
|
|
38
38
|
fullpageFileName: string;
|
|
39
39
|
}
|
|
40
40
|
|
|
41
|
-
declare global {
|
|
42
|
-
var isWatchMode: boolean;
|
|
43
|
-
var styleguideConfiguration: StyleguideConfiguration;
|
|
44
|
-
}
|
|
45
41
|
interface StyleguideConfiguration {
|
|
46
42
|
mode: 'development' | 'production';
|
|
47
43
|
outDir: string;
|
package/dist/node/lib/index.d.ts
CHANGED
|
@@ -38,10 +38,6 @@ interface in2Section {
|
|
|
38
38
|
fullpageFileName: string;
|
|
39
39
|
}
|
|
40
40
|
|
|
41
|
-
declare global {
|
|
42
|
-
var isWatchMode: boolean;
|
|
43
|
-
var styleguideConfiguration: StyleguideConfiguration;
|
|
44
|
-
}
|
|
45
41
|
interface StyleguideConfiguration {
|
|
46
42
|
mode: 'development' | 'production';
|
|
47
43
|
outDir: string;
|