CSS documentation from MDN, browser compatibility data, and code quality analysis via css-mcp — 4 tools

css-mcp v latest — CSS documentation, browser compat, and code analysis

Install: npm install css-mcp Entry: src/server.js (ESM, stdio transport) 4 tools: get_docs, get_browser_compatibility, analyze_css, analyze_project_css

Test results: 12 calls, 100% success, p50=319ms (network-bound for docs/compat, 1-7ms for local analysis)

get_docs ({slug}) — fetch MDN documentation for CSS features:

• "grid" → 35K chars, full MDN page with syntax, values, examples, formal definition ✓ (398ms)
• "flexbox" → 20K chars, "Basic concepts of flexbox" guide ✓ (882ms)
• ":has" → 13K chars, :has() pseudo-class docs ✓ (141ms)
• "calc" → 17K chars, calc() function docs ✓ (688ms)
• "container-queries" → ⚠️ 404 (not a valid MDN slug — returns HTML 404 page as text, no error thrown) (883ms)
• "totally-fake-property-xyz" → ⚠️ 404 (same behavior — check for "fetch_failed" in response text) (341ms)

get_browser_compatibility ({bcd_id}) — browser support data from BCD:

• "css.properties.grid" → Chrome 57+, Firefox 52+, Safari 10.1+, Edge 16+, with spec URLs ✓ (319ms)
• "css.selectors.has" → Chrome 105+, Firefox 121+, Safari 15.4+ ✓ (176ms)
• "css.properties.container-type" → Chrome 105+, Firefox 110+, Safari 16+ ✓ (265ms)

analyze_css ({css, summaryOnly?}) — local CSS quality analysis:

• Simple flex layout (4 rules) → {sourceLinesOfCode:15, rules:4, maxComplexity:2, maxSpecificity:[0,2,0]} ✓ (7ms)
• Problematic CSS (deep nesting, !important, vendor prefixes) → {maxComplexity:12, maxSpecificity:[1,2,1]} ✓ (1ms)
• Full analysis (summaryOnly:false) → 12K chars with 150+ metrics (complexity score, declaration stats, selector patterns, custom properties, media queries, container queries) ✓ (1ms)

analyze_project_css ({path, includeFullAnalysis?, exclude?}) — project-wide analysis (not tested — requires directory with .css files)

Key gotchas

1. ⚠️ `get_docs` returns 404 HTML as success — invalid slugs return the full MDN 404 page HTML (~86K chars) as text content, NOT an MCP error. Check response for "fetch_failed" prefix to detect failures.
2. Slug format is auto-normalized — simple slugs like "grid", ":has", "calc", "::before" work. Compound concepts like "container-queries" may NOT map to valid MDN paths (use the canonical path like "CSS_containment/Container_queries" or the property "container-type" instead).
3. BCD ID format is strict — css.properties.X for properties, css.selectors.X for selectors, css.at-rules.X for at-rules. Using wrong format returns an error.
4. `get_docs` and `get_browser_compatibility` are NETWORK-BOUND — 141-883ms latency (MDN/GitHub fetch). analyze_css is purely local at 1-7ms.
5. `analyze_css` summaryOnly:true returns ~550 chars (lightweight), summaryOnly:false returns ~12K chars with 150+ metrics.
6. `analyze_project_css` auto-excludes node_modules and .min.css files.
7. Specificity returned as array — [id, class, type] format (e.g. [1,2,1] = 1 ID + 2 classes + 1 type selector).