Frontend static code analysis tool for detecting unused and undefined CSS classes
npm install aidp-style-analyzerA frontend static code analysis tool for detecting unused and undefined CSS classes in your projects. It deeply parses Vue, React, HTML, and style files, with intelligent support for Tailwind CSS.
1. Detect Unused CSS Classes: Scans CSS/SCSS/LESS and Vue to report classes defined but not used in templates.
2. Detect Undefined CSS Classes: Scans HTML/JSX/TSX and Vue to report classes used but not defined in stylesheets.
3. Framework Support:
* Vue: Deep parsing of .vue SFCs (supports and ).
* React: Supports .jsx and .tsx.
4. Tailwind CSS Integration: Automatically reads tailwind.config.js to identify and validate Tailwind utility classes (ignoring generated utilities to prevent false positives).
5. Preprocessors: Supports .scss, .less, and standard .css.
6. Customizable Exclusion: Support ignoring specific class name patterns via regex.
``bash`
npm install aidp-style-analyzer --save-dev
Run the analyzer on your project directory:
`bash`
npx aidp-style-analyzer [directory] [options]
Options:
* [directory]: Root directory of the target project (default: current directory).-i, --ignore
* : Regex patterns to ignore class names (e.g., ^js- for JavaScript hooks).-f, --format
* : Output format. Supports console (default) or json.-o, --output
* : Output the report to a specified file.
Examples:
Analyze the current directory:
`bash`
npx aidp-style-analyzer .
Analyze a specific project and ignore classes starting with test- or js-:`bash`
npx aidp-style-analyzer ./src -i "^test-" "^js-"
Output a JSON report:
`bash`
npx aidp-style-analyzer ./src -f json -o report.json
You can also use the analyzer programmatically in your Node.js scripts:
`javascript
const { Analyzer, formatReport } = require('aidp-style-analyzer');
const path = require('path');
async function run() {
const rootDir = path.resolve(__dirname, './src');
const analyzer = new Analyzer(rootDir, {
ignorePatterns: ['^js-']
});
const issues = await analyzer.run();
// Print report to console
console.log(formatReport(issues, rootDir, 'console'));
// Or process issues manually
issues.forEach(issue => {
if (issue.type === 'undefined') {
console.error(Undefined class "${issue.name}" in ${issue.file}:${issue.line});
}
});
}
run();
`
* Tailwind Configuration: The tool attempts to load the target project's tailwind.config.js. Loading may fail if the configuration uses complex runtime logic or non-standard environment dependencies.'btn-' + type
* Dynamic Class Names: Dynamically constructed class names (e.g., ) cannot be fully identified by static analysis. It is recommended to use complete class name strings or add them to the ignore list.
---
一款前端静态代码分析工具,专注于检测项目中未使用和未定义的 CSS 类。它能够深度解析 Vue、React、HTML 及样式文件,并智能支持 Tailwind CSS。
1. 检测未使用的 CSS 类:扫描 CSS/SCSS/LESS 及 Vue