mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-01-26 10:59:53 +00:00
[ci] add stylelint dependency and minimal config (#5926)
## Summary Adds [stylelint](https://stylelint.io/) configuration and tooling to enforce CSS/SCSS code quality and consistency across Vue components. Starts with 21 focused rules for linting CSS in Vue SFC files and standalone stylesheets. Configuration uses postcss-html to parse Vue `<style>` blocks and includes whitelists for Tailwind v4 at-rules (`@reference`, `@plugin`, `@custom-variant`, `@utility`) and Electron-specific CSS properties (`speak: none`, `app-region`). Rules emphasize modern CSS syntax (numeric font weights, modern color functions, double-colon pseudo-elements) while avoiding overly opinionated rules like hex color length enforcement (for now). Currently finds 113 issues (79% auto-fixable). This PR only adds the tooling via `pnpm stylelint` and `pnpm stylelint:fix` scripts - no pre-commit hooks or CI integration yet. A follow-up PR will auto-fix the fixable issues and optionally add enforcement to the commit workflow. ## Changes - **What**: Integrated [stylelint](https://stylelint.io/) with Vue.js support via postcss-html parser - **Dependencies**: Added `stylelint@16.24.0`, `postcss-html@1.8.0` ## Review Focus CSS rule strictness and Tailwind CSS compatibility - particularly the `no-descending-specificity` rule and Tailwind-specific function ignores. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5926-ci-add-stylelint-dependency-and-minimal-config-2836d73d3650813ea7b7eb714ba7748a) by [Unito](https://www.unito.io)
This commit is contained in:
73
.stylelintrc.json
Normal file
73
.stylelintrc.json
Normal file
@@ -0,0 +1,73 @@
|
||||
{
|
||||
"extends": [],
|
||||
"overrides": [
|
||||
{
|
||||
"files": ["*.vue", "**/*.vue"],
|
||||
"customSyntax": "postcss-html"
|
||||
}
|
||||
],
|
||||
"rules": {
|
||||
"import-notation": "url",
|
||||
"font-family-no-missing-generic-family-keyword": true,
|
||||
"declaration-block-no-redundant-longhand-properties": true,
|
||||
"declaration-property-value-no-unknown": [
|
||||
true,
|
||||
{
|
||||
"ignoreProperties": {
|
||||
"speak": ["none"],
|
||||
"app-region": ["drag", "no-drag"]
|
||||
}
|
||||
}
|
||||
],
|
||||
"color-function-notation": "modern",
|
||||
"shorthand-property-no-redundant-values": true,
|
||||
"selector-pseudo-element-colon-notation": "double",
|
||||
"no-duplicate-selectors": true,
|
||||
"font-weight-notation": "numeric",
|
||||
"length-zero-no-unit": true,
|
||||
"color-no-invalid-hex": true,
|
||||
"number-max-precision": 4,
|
||||
"property-no-vendor-prefix": true,
|
||||
"value-no-vendor-prefix": true,
|
||||
"selector-no-vendor-prefix": true,
|
||||
"media-feature-name-no-vendor-prefix": true,
|
||||
"selector-max-universal": 1,
|
||||
"selector-max-type": 2,
|
||||
"declaration-block-no-duplicate-properties": true,
|
||||
"block-no-empty": true,
|
||||
"no-descending-specificity": true,
|
||||
"no-duplicate-at-import-rules": true,
|
||||
"at-rule-no-unknown": [
|
||||
true,
|
||||
{
|
||||
"ignoreAtRules": [
|
||||
"tailwind",
|
||||
"apply",
|
||||
"layer",
|
||||
"config",
|
||||
"theme",
|
||||
"reference",
|
||||
"plugin",
|
||||
"custom-variant",
|
||||
"utility"
|
||||
]
|
||||
}
|
||||
],
|
||||
"function-no-unknown": [
|
||||
true,
|
||||
{
|
||||
"ignoreFunctions": [
|
||||
"theme"
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
"ignoreFiles": [
|
||||
"node_modules/**",
|
||||
"dist/**",
|
||||
"playwright-report/**",
|
||||
"public/**",
|
||||
"src/lib/litegraph/**"
|
||||
],
|
||||
"files": ["**/*.css", "**/*.vue"]
|
||||
}
|
||||
Reference in New Issue
Block a user