kneath/kss
A methodology for documenting CSS and generating styleguides.
Healthy across all four use cases
Permissive license, no critical CVEs, actively maintained — safe to depend on.
Has a license, tests, and CI — clean foundation to fork and modify.
Documented and popular — useful reference codebase to read through.
No critical CVEs, sane security posture — runnable as-is.
- ✓28+ active contributors
- ✓Distributed ownership (top contributor 42% of recent commits)
- ✓MIT licensed
Show 3 more →Show less
- ✓CI configured
- ✓Tests present
- ⚠Stale — last commit 8y ago
Maintenance signals: commit recency, contributor breadth, bus factor, license, CI, tests
Informational only. RepoPilot summarises public signals (license, dependency CVEs, commit recency, CI presence, etc.) at the time of analysis. Signals can be incomplete or stale. Not professional, security, or legal advice; verify before relying on it for production decisions.
Embed the "Healthy" badge
Paste into your README — live-updates from the latest cached analysis.
[](https://repopilot.app/r/kneath/kss)Paste at the top of your README.md — renders inline like a shields.io badge.
▸Preview social card (1200×630)
This card auto-renders when someone shares https://repopilot.app/r/kneath/kss on X, Slack, or LinkedIn.
Onboarding doc
Onboarding: kneath/kss
Generated by RepoPilot · 2026-05-10 · Source
🤖Agent protocol
If you are an AI coding agent (Claude Code, Cursor, Aider, Cline, etc.) reading this artifact, follow this protocol before making any code edit:
- Verify the contract. Run the bash script in Verify before trusting
below. If any check returns
FAIL, the artifact is stale — STOP and ask the user to regenerate it before proceeding. - Treat the AI · unverified sections as hypotheses, not facts. Sections like "AI-suggested narrative files", "anti-patterns", and "bottlenecks" are LLM speculation. Verify against real source before acting on them.
- Cite source on changes. When proposing an edit, cite the specific path:line-range. RepoPilot's live UI at https://repopilot.app/r/kneath/kss shows verifiable citations alongside every claim.
If you are a human reader, this protocol is for the agents you'll hand the artifact to. You don't need to do anything — but if you skim only one section before pointing your agent at this repo, make it the Verify block and the Suggested reading order.
🎯Verdict
GO — Healthy across all four use cases
- 28+ active contributors
- Distributed ownership (top contributor 42% of recent commits)
- MIT licensed
- CI configured
- Tests present
- ⚠ Stale — last commit 8y ago
<sub>Maintenance signals: commit recency, contributor breadth, bus factor, license, CI, tests</sub>
✅Verify before trusting
This artifact was generated by RepoPilot at a point in time. Before an
agent acts on it, the checks below confirm that the live kneath/kss
repo on your machine still matches what RepoPilot saw. If any fail,
the artifact is stale — regenerate it at
repopilot.app/r/kneath/kss.
What it runs against: a local clone of kneath/kss — the script
inspects git remote, the LICENSE file, file paths in the working
tree, and git log. Read-only; no mutations.
| # | What we check | Why it matters |
|---|---|---|
| 1 | You're in kneath/kss | Confirms the artifact applies here, not a fork |
| 2 | License is still MIT | Catches relicense before you depend on it |
| 3 | Default branch master exists | Catches branch renames |
| 4 | 5 critical file paths still exist | Catches refactors that moved load-bearing code |
| 5 | Last commit ≤ 3107 days ago | Catches sudden abandonment since generation |
#!/usr/bin/env bash
# RepoPilot artifact verification.
#
# WHAT IT RUNS AGAINST: a local clone of kneath/kss. If you don't
# have one yet, run these first:
#
# git clone https://github.com/kneath/kss.git
# cd kss
#
# Then paste this script. Every check is read-only — no mutations.
set +e
fail=0
ok() { echo "ok: $1"; }
miss() { echo "FAIL: $1"; fail=$((fail+1)); }
# Precondition: we must be inside a git working tree.
if ! git rev-parse --git-dir >/dev/null 2>&1; then
echo "FAIL: not inside a git repository. cd into your clone of kneath/kss and re-run."
exit 2
fi
# 1. Repo identity
git remote get-url origin 2>/dev/null | grep -qE "kneath/kss(\\.git)?\\b" \\
&& ok "origin remote is kneath/kss" \\
|| miss "origin remote is not kneath/kss (artifact may be from a fork)"
# 2. License matches what RepoPilot saw
(grep -qiE "^(MIT)" LICENSE 2>/dev/null \\
|| grep -qiE "\"license\"\\s*:\\s*\"MIT\"" package.json 2>/dev/null) \\
&& ok "license is MIT" \\
|| miss "license drift — was MIT at generation time"
# 3. Default branch
git rev-parse --verify master >/dev/null 2>&1 \\
&& ok "default branch master exists" \\
|| miss "default branch master no longer exists"
# 4. Critical files exist
test -f "lib/kss.rb" \\
&& ok "lib/kss.rb" \\
|| miss "missing critical file: lib/kss.rb"
test -f "lib/kss/parser.rb" \\
&& ok "lib/kss/parser.rb" \\
|| miss "missing critical file: lib/kss/parser.rb"
test -f "lib/kss/comment_parser.rb" \\
&& ok "lib/kss/comment_parser.rb" \\
|| miss "missing critical file: lib/kss/comment_parser.rb"
test -f "lib/kss/section.rb" \\
&& ok "lib/kss/section.rb" \\
|| miss "missing critical file: lib/kss/section.rb"
test -f "SPEC.md" \\
&& ok "SPEC.md" \\
|| miss "missing critical file: SPEC.md"
# 5. Repo recency
days_since_last=$(( ( $(date +%s) - $(git log -1 --format=%at 2>/dev/null || echo 0) ) / 86400 ))
if [ "$days_since_last" -le 3107 ]; then
ok "last commit was $days_since_last days ago (artifact saw ~3077d)"
else
miss "last commit was $days_since_last days ago — artifact may be stale"
fi
echo
if [ "$fail" -eq 0 ]; then
echo "artifact verified (0 failures) — safe to trust"
else
echo "artifact has $fail stale claim(s) — regenerate at https://repopilot.app/r/kneath/kss"
exit 1
fi
Each check prints ok: or FAIL:. The script exits non-zero if
anything failed, so it composes cleanly into agent loops
(./verify.sh || regenerate-and-retry).
⚡TL;DR
KSS (Knyle Style Sheets) is a methodology and Ruby parser for documenting CSS/SCSS/SASS files with inline comment blocks that generate living styleguides. It parses special comment syntax (defining sections, modifiers, and descriptions) embedded in stylesheet files and exposes a Ruby API to query and organize this documentation, enabling teams to maintain a single source of truth for both styling code and visual documentation. Gem structure: lib/kss.rb is the main entry point; lib/kss/ contains Parser (file reader + comment extractor), CommentParser (KSS syntax parser), Section (styleguide entry), and Modifier (variant descriptor). example/ contains a Sinatra app demonstrating how to consume the parser and render styleguides in HTML/ERB. Tests in test/ fixture against CSS/SCSS/SASS/LESS files.
👥Who it's for
Front-end teams and CSS maintainers who need to document component variations (pseudo-classes, state modifiers) and generate living styleguides without duplicating markup. Specifically useful for designers and developers building design systems where visual documentation must stay in sync with actual CSS.
🌱Maturity & risk
Moderately mature (2011-era project, ~28K Ruby code): has CI via Travis, test suite in place (test/*.rb files), and a working example app (example/app.rb). However, activity appears historical—the project is stable for its specific use case but not actively developed with new features.
Low risk for the specific problem it solves: single Ruby maintainer (kneath) and no external gem dependencies visible, making it reliable. Main risk is that styleguide generation tools have evolved significantly since 2011 (e.g., Storybook, Pattern Lab); this is purpose-built for CSS-in-comments parsing and may feel dated if integrating into modern component frameworks.
Active areas of work
No active development visible in the file list—this is a stable, maintenance-only project. The last meaningful work appears to be bug fixes and SCSS/SASS support added years ago. It serves its original purpose without ongoing feature development.
🚀Get running
Clone, install, and verify the parser: git clone https://github.com/kneath/kss.git && cd kss && bundle install && bundle exec rake test. To see it in action: cd example && bundle install && ruby app.rb then visit http://localhost:4567.
Daily commands:
bundle exec rake test to run the test suite. cd example && ruby app.rb to start the example Sinatra server on http://localhost:4567 with a live styleguide.
🗺️Map of the codebase
lib/kss.rb— Main entry point and public API for the KSS parser; all styleguide parsing flows through herelib/kss/parser.rb— Core parsing engine that reads CSS/SCSS/LESS files and extracts KSS documentation blockslib/kss/comment_parser.rb— Parses individual KSS comment blocks to extract metadata, modifiers, and section numberslib/kss/section.rb— Represents a parsed KSS section with its description, modifiers, and styleguide metadataSPEC.md— Formal specification of the KSS documentation syntax and methodology; required reading for all contributorsexample/app.rb— Reference implementation showing how to build a living styleguide using KSS output
🧩Components & responsibilities
- Parser (Ruby, File I/O) — Entry point for file discovery and delegation; orchestrates file reading and comment extraction
- Failure mode: If parser fails, no sections are extracted; entire styleguide generation stops
- Comment Parser (Ruby, Regex) — Extracts metadata (description, modifiers, styleguide section) from raw comment text using regex
- Failure mode: Malformed comments may be partially parsed or skipped; invalid section numbers could disrupt hierarchy
- Section & Modifier Objects (Ruby classes) — In-memory representation of parsed documentation; provides query interface for styleguide generators
- Failure mode: If objects cannot be instantiated, styleguide template cannot render sections
- Styleguide Template (ERB (example), JavaScript) — Renders Section objects into HTML; responsible for grouping, sorting, and interactive modifier display
- Failure mode: If template is broken, even valid sections will not display; poor UX for styleguide consumers
🔀Data flow
CSS/SCSS/LESS files→Parser— Developer writes KSS-formatted comments in stylesheetsParser→Comment Parser— Parser extracts raw comment blocks and passes to comment parser for structure extractionComment Parser→Section & Modifier Objects— Parsed metadata (description, modifiers, hierarchy) is used to instantiate Section objectsSection Objects→Styleguide Template— Template iterates over sections, renders HTML fragments, and applies CSS for previewStyleguide Template→Browser— Generated HTML and CSS are served to user's browser for viewing and interaction
🛠️How to make changes
Document a new CSS component
- Create a KSS comment block in your stylesheet following the spec format with description, modifiers, and styleguide section number (
example/public/stylesheets/buttons.css) - Run the KSS parser on your stylesheets directory (
lib/kss/parser.rb) - Iterate through the returned Section objects in your styleguide template to render each documented component (
example/views/styleguide.erb)
Support a new stylesheet language
- Extend the parser's file reading logic to recognize your stylesheet extension (e.g., .postcss) (
lib/kss/parser.rb) - Update the comment extraction regex/logic if comment syntax differs from CSS/SCSS/LESS (
lib/kss/comment_parser.rb) - Add test fixtures for the new format (
test/fixtures)
Extend section metadata
- Add new properties or methods to the Section class to store additional metadata from KSS comments (
lib/kss/section.rb) - Update comment_parser.rb to extract and populate the new metadata from comment blocks (
lib/kss/comment_parser.rb) - Update the example styleguide template to display the new metadata (
example/views/styleguide.erb)
🔧Why these technologies
- Ruby — Enables simple string parsing and file I/O for CSS extraction; widely used in web design/development community
- CoffeeScript (lib/kss.coffee) — Provides JavaScript version of KSS parser for client-side or Node.js integration
- Markdown-like syntax in comments — Familiar to developers; easy to write and read inline with CSS code
⚖️Trade-offs already made
-
Comment-based documentation rather than separate files
- Why: Keeps documentation close to the code it describes; reduces context switching
- Consequence: CSS files become slightly larger; no single source of truth for styleguide structure outside code
-
No built-in templating or theme engine
- Why: Simplicity; lets users choose their own frontend (Sinatra, Jekyll, Gatsby, etc.)
- Consequence: More work for users to build a styleguide; less opinionated but more flexible
-
Supports multiple preprocessor languages (SCSS, LESS, SASS)
- Why: Accommodates different team preferences and existing codebases
- Consequence: Parser complexity increases; must handle multiple comment syntaxes
🚫Non-goals (don't propose these)
- Not a CSS preprocessor; does not compile or transform CSS
- Not a CSS naming convention or specificity guide; orthogonal to naming schemes
- Not a component framework; does not provide base styles or UI kit
- Not a live reload/watch tool; designed to be integrated into larger build systems
- Not a browser-based editor; generates static styleguides only
📊Code metrics
- Avg cyclomatic complexity: ~4 — Core parsing logic is straightforward (file reading, regex extraction, object creation); moderate
⚠️Anti-patterns to avoid
- Regex-heavy comment parsing (Medium) —
lib/kss/comment_parser.rb: Comment structure extraction relies on complex regex patterns; brittle if KSS syntax variations exist or comments are malformed - Minimal error handling in parser (Medium) —
lib/kss/parser.rb: Parser does not gracefully handle file read errors, encoding issues, or malformed comment blocks; may crash on edge cases - Limited test coverage for preprocessor variations (Low) —
test/fixtures: Test fixtures exist for SCSS, SASS, LESS but real-world edge cases (nested comments, block comments) may not be covered
🔥Performance hotspots
lib/kss/parser.rb(I/O-bound) — File I/O and regex-based extraction for every CSS file in a large project could be slowlib/kss/comment_parser.rb(CPU-bound) — Regex compilation and string matching scales with comment block size and count; no caching mechanism
🪤Traps & gotchas
No hidden traps; project is straightforward. Note: the Parser works on file paths or raw strings (see README), and it scans all comments in a directory recursively—watch out if you mix KSS and non-KSS comments in the same file. CoffeeScript in lib/kss.coffee is compiled to JavaScript and serves the client-side styleguide interactivity, but most users interact only via the Ruby gem.
🏗️Architecture
💡Concepts to learn
- Knyle Style Sheets (KSS) Syntax — Understanding the specific comment block format (description + modifier list + Styleguide reference) is essential to write valid KSS and debug the CommentParser regex logic
- CSS Preprocessor-Agnostic Parsing — KSS works with CSS, SCSS, SASS, and LESS via text regex rather than AST parsing; understanding this trade-off explains why it's simple but can have edge cases with complex nesting
- Modifier Notation & Pseudo-Classes — KSS documents style variations (modifiers) alongside the base selector; mapping pseudo-classes and class-based modifiers to generated class names (:hover → .pseudo-class-hover) is core to the rendering logic
- Living Styleguide Pattern — KSS is specifically designed to keep documentation and code in sync by embedding docs in stylesheets and auto-generating pages; this pattern influenced later tools like React Styleguidist
- Comment Extraction & Tokenization — The Parser must extract comments from raw CSS/SCSS, then pass them to CommentParser for tokenization; understanding this two-stage process clarifies how syntax errors surface
- TomDoc Convention — KSS is explicitly inspired by TomDoc (Ruby docstring convention); studying TomDoc philosophy helps understand KSS design goals around human readability and tooling
🔗Related repos
tmcw/kss-node— Port of KSS to Node.js/JavaScript; same methodology but for JS-centric workflows and easier web integrationstyleguidist/react-styleguidist— Modern alternative for React projects; generates living styleguides from component props and inline JSDoc rather than CSS commentsstorybookjs/storybook— Industry-standard component documentation and testing tool; evolved beyond KSS for modern component-driven developmentPattern-Lab/patternlab-node— Atomic design-focused styleguide generator; contemporary alternative addressing similar documentation and design system needsdocumentjs/documentjs— Documentation engine inspired by similar methodologies; handles both API docs and style guides in a unified way
🪄PR ideas
To work on one of these in Claude Code or Cursor, paste:
Implement the "<title>" PR idea from CLAUDE.md, working through the checklist as the task list.
Add comprehensive parser tests for SASS/SCSS/LESS fixtures
The repo has fixture files for SASS, SCSS, and LESS (test/fixtures/sass, test/fixtures/scss, test/fixtures/less) but parser_test.rb likely only tests CSS. Adding parser tests that validate KSS comment extraction works correctly across all preprocessor formats would ensure the tool works reliably for teams using modern CSS preprocessors.
- [ ] Review test/parser_test.rb to identify what CSS-specific tests exist
- [ ] Create new test cases in test/parser_test.rb that iterate through test/fixtures/sass, test/fixtures/scss, and test/fixtures/less files
- [ ] Verify parser correctly extracts KSS comments from each preprocessor format and validates modifier parsing
Add integration tests for the example living styleguide app
The example/ directory contains a working Sinatra app (app.rb) that demonstrates KSS in action, but there are no tests validating it actually generates the styleguide correctly. Adding integration tests would prevent regressions and serve as documentation for how to integrate KSS into web apps.
- [ ] Create test/styleguide_app_test.rb or similar to test the example Sinatra app
- [ ] Add tests that verify the styleguide routes work (example/views/styleguide.erb rendering)
- [ ] Test that section parsing and modifier display work end-to-end with example/public/stylesheets/
Add CLI tool tests and expand command-line interface documentation
The repo appears to be a library (lib/kss.rb, lib/kss/parser.rb) without documented CLI usage or tests. Adding a bin/ executable and corresponding tests would make KSS more accessible to non-Ruby users and allow direct styleguide generation from the command line.
- [ ] Create bin/kss executable that accepts CSS file paths and outputs parsed KSS sections
- [ ] Add test/cli_test.rb to verify the binary correctly parses fixtures and formats output
- [ ] Update README.md with CLI usage examples (e.g., 'bin/kss lib/public/stylesheets/*.css')
🌿Good first issues
- idea: Add support for parsing nested section names in the 'Styleguide Forms - Special Checkboxes' format; currently only 'Styleguide 2.1.3' notation works. Update lib/kss/comment_parser.rb regex and write tests in test/comment_parser_test.rb.
- idea: Write tests for the Modifier class (lib/kss/modifier.rb) to verify class_name generation from modifier names (e.g., ':hover' → 'pseudo-class-hover'); test/section_test.rb exists but modifier_test.rb is missing.
- idea: Create a CLI wrapper (new file lib/kss/cli.rb) that accepts a stylesheet directory and outputs a JSON or HTML styleguide; currently the library is Ruby-only and example/ is Sinatra-based, but a standalone command would broaden usability.
⭐Top contributors
Click to expand
Top contributors
- @benschwarz — 42 commits
- [@Kyle Neath](https://github.com/Kyle Neath) — 12 commits
- @kneath — 6 commits
- [@Jean-Paul Bonnetouche](https://github.com/Jean-Paul Bonnetouche) — 4 commits
- @rsahlstrom — 3 commits
📝Recent commits
Click to expand
Recent commits
b079170— Merge pull request #119 from janiv/patch-1 (benschwarz)956aff2— Updates Reference to KSS-PHP Implementation (rsahlstrom)93c7985— Merge pull request #102 from JohnAlbin/patch-1 (kneath)6106c6f— Update URL to Node.js port of KSS (JohnAlbin)1a1dbb3— Regenerated kss.js (benschwarz)cc18127— Merge pull request #93 from jho406/develop/jh-cleanup (benschwarz)cccc8ef— Move shared constants to module (johny)f3f4950— Add parenthesis for consistancy (johny)b78f261— Merge pull request #90 from polarblau/patch-1 (benschwarz)8c178cd— Fixing typo. (polarblau)
🔒Security observations
KSS is a documentation and styleguide generation tool with moderate security posture. Primary concerns include lack of visible dependency management, potential XSS vulnerabilities in template rendering if user-controlled CSS comments are not properly escaped, and missing security headers in the example application. The project is relatively simple with limited attack surface, but proper input validation and output escaping are critical for safe deployment. No critical vulnerabilities detected in the codebase structure itself.
- Medium · Missing or Outdated Dependency Versions —
Gemfile, kss.gemspec. No Gemfile.lock or dependency version pinning information provided. The Gemfile and kss.gemspec files do not show version constraints, which could lead to unexpected behavior from transitive dependencies with known vulnerabilities. Fix: Ensure Gemfile.lock is committed to version control and use conservative version pinning (e.g., ~> 1.2.3) for all dependencies. Regularly audit dependencies using tools like 'bundle audit' or 'bundler-audit'. - Low · Potential XSS in Styleguide Template Rendering —
example/views/styleguide.erb, example/views/_styleguide_block.erb. The ERB template files (example/views/styleguide.erb, _styleguide_block.erb) render CSS documentation and modifier examples. If KSS parser output is not properly escaped in templates, user-controlled CSS comments could lead to XSS vulnerabilities. Fix: Ensure all ERB output uses proper escaping (e.g., <%= %> with h() helper or <%= ... %> with Rails auto-escaping). Validate and sanitize CSS comment content before rendering in HTML context. - Low · No Security Headers Configuration —
example/app.rb. The example Sinatra application (example/app.rb) does not appear to implement security headers such as Content-Security-Policy, X-Frame-Options, X-Content-Type-Options, or Strict-Transport-Security. Fix: Add security headers middleware to the Sinatra app. Implement CSP, X-Frame-Options: DENY, X-Content-Type-Options: nosniff, and HSTS headers. - Low · Potential Path Traversal in File Parsing —
lib/kss/parser.rb. The parser (lib/kss/parser.rb) reads CSS/SCSS/SASS/LESS files. If file paths are derived from user input without validation, attackers could read arbitrary files using path traversal sequences (../../../etc/passwd). Fix: Validate and sanitize all file paths before reading. Use absolute paths or whitelist allowed directories. Implement path canonicalization checks to prevent traversal attacks.
LLM-derived; treat as a starting point, not a security audit.
👉Where to read next
- Open issues — current backlog
- Recent PRs — what's actively shipping
- Source on GitHub
Generated by RepoPilot. Verdict based on maintenance signals — see the live page for receipts. Re-run on a new commit to refresh.