CSS Compatibility MCP

一个基于 Model Context Protocol 的工具型服务器，提供两项前端日常开发常用能力：

• addCSSPrefixes：使用 Autoprefixer 为 CSS 添加兼容性前缀，可按需指定目标浏览器。
• getCompatibilitySolution：查询常见 CSS 兼容性问题，获取解决方案与参考链接。

快速开始

npm install css-compatibility-mcp

本项目将 src/index.js 暴露为可执行文件，可直接通过 npx 或全局安装后启动。

npx css-compatibility-mcp

服务器会通过 stdio 与 MCP 客户端通信。推荐在 mcp.json 中添加如下配置：

{
  "clients": [
    {
      "name": "css-compatibility-mcp",
      "bin": "css-compatibility-mcp",
      "transport": {
        "type": "stdio"
      }
    }
  ]
}

工具说明

addCSSPrefixes

• 输入
  • css：必填，待处理的 CSS 字符串。
  • browsers：可选，字符串或字符串数组，遵循 Browserslist 语法。未传入时默认使用 > 1%, last 2 versions, not dead。
• 输出
  • css：添加前缀后的 CSS。
  • warnings：Autoprefixer 返回的告警列表（若有）。
  • browsers：实际使用的浏览器范围。

getCompatibilitySolution

• 输入
  • property：可选，CSS 属性名称或相关关键词。
  • issue：可选，问题描述关键词。
  • 至少提供其中一个字段。
• 输出
  • query：原始查询条件。
  • matches：匹配到的兼容性方案，包含摘要、解决方案与参考资料。
  • suggestions：当无匹配结果时，返回的可选关键词提示（若有）。

开发指南

# 安装依赖
npm install

# 启动 MCP 服务器（开发模式）
npm start

代码结构：

src/
  index.js              # MCP 服务器入口
  tools/
    autoprefixer.js     # 自动前缀工具实现
    compatibility.js    # 兼容性方案查询工具
  utils/
    browserSupport.js   # 浏览器范围处理
  data/
    compatibility.json  # 兼容性知识库

欢迎根据团队需求扩展 compatibility.json，或在工具中加入更多能力。发布前请更新版本号并补充变更日志。