Preview/Stylelint#97
Conversation
…gs across error and warning severities
WalkthroughThree new stylesheet files are introduced: Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
…rites its default extending stylelint-config-standard-scss (bare rules-only config without extends prevents the SCSS parser and plugin loading)
|
@coderabbitai full review |
✅ Actions performedFull review triggered. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@stylelint/styles.css`:
- Around line 30-40: The fixtures are inert because .stylelintrc.json currently
disables selector-class-pattern, length-zero-no-unit, and
shorthand-property-no-redundant-values; either re-enable those rules in
.stylelintrc.json so the sandbox emits warnings, or update the CSS to follow the
rules: change invalid unit "100pixels" to a valid unit (e.g., "100px"), use "0"
instead of "0px" to trigger/comply with length-zero-no-unit, collapse the
four-value margin to a shorthand if redundant, and rename class selectors (e.g.,
.some_class and .cta_button) to match the selector-class-pattern (e.g.,
kebab-case like .some-class and .cta-button) so the intended warnings/fixtures
become active.
- Around line 10-16: The CSS uses invalid properties 'colour' and 'text-style'
but the sandbox won't flag them because ".stylelintrc.json" has
"property-no-unknown": null; either enable the rule by setting
"property-no-unknown": true in .stylelintrc.json (so the linter will report
'colour' and 'text-style') or change the fixture to use valid/intentional
unknown examples (e.g., keep 'colour' and 'text-style' as-is) while leaving the
rule enabled; update the configuration or the declarations accordingly so the
intended rule is actually exercised.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Central YAML (base), Repository UI (inherited)
Review profile: CHILL
Plan: Enterprise
Run ID: 9bb16879-7639-4bb2-8adb-ad82f0ff8927
📒 Files selected for processing (3)
stylelint/_layout.scssstylelint/components.scssstylelint/styles.css
| body { | ||
| colour: #ffffff; | ||
| background: var(--primary); | ||
| text-style: bold; | ||
| margin: 0px; | ||
| padding: 0; | ||
| font-family: Arial Black, sans-serif; |
There was a problem hiding this comment.
These declarations won't exercise property-no-unknown as written.
Line 11 (colour) and Line 13 (text-style) look like the property-no-unknown fixture, but .stylelintrc.json:1-37 sets "property-no-unknown": null, so the sandbox will not report either one. If this PR is meant to showcase that rule, the config or fixture needs to change.
🧰 Tools
🪛 Stylelint (17.9.0)
[error] 16-16: Expected quotes around "Arial Black" (font-family-name-quotes)
(font-family-name-quotes)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@stylelint/styles.css` around lines 10 - 16, The CSS uses invalid properties
'colour' and 'text-style' but the sandbox won't flag them because
".stylelintrc.json" has "property-no-unknown": null; either enable the rule by
setting "property-no-unknown": true in .stylelintrc.json (so the linter will
report 'colour' and 'text-style') or change the fixture to use valid/intentional
unknown examples (e.g., keep 'colour' and 'text-style' as-is) while leaving the
rule enabled; update the configuration or the declarations accordingly so the
intended rule is actually exercised.
| .some_class { | ||
| width: 100pixels; | ||
| height: 0px; | ||
| margin: 5px 5px 5px 5px; | ||
| } | ||
|
|
||
| .cta_button { | ||
| background: var(--accent); | ||
| color: #ffffff; | ||
| padding: 8px 12px; | ||
| border-radius: 4px; |
There was a problem hiding this comment.
Several advertised warning fixtures are currently inert.
.stylelintrc.json:1-37 disables "selector-class-pattern", "length-zero-no-unit", and "shorthand-property-no-redundant-values", so Line 30 (.some_class), Line 32 (0px), Line 33 (four-value margin), and Line 36 (.cta_button) will not produce those warnings in the sandbox.
🧰 Tools
🪛 Stylelint (17.9.0)
[error] 31-31: Unknown unit "pixels" (unit-no-unknown)
(unit-no-unknown)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@stylelint/styles.css` around lines 30 - 40, The fixtures are inert because
.stylelintrc.json currently disables selector-class-pattern,
length-zero-no-unit, and shorthand-property-no-redundant-values; either
re-enable those rules in .stylelintrc.json so the sandbox emits warnings, or
update the CSS to follow the rules: change invalid unit "100pixels" to a valid
unit (e.g., "100px"), use "0" instead of "0px" to trigger/comply with
length-zero-no-unit, collapse the four-value margin to a shorthand if redundant,
and rename class selectors (e.g., .some_class and .cta_button) to match the
selector-class-pattern (e.g., kebab-case like .some-class and .cta-button) so
the intended warnings/fixtures become active.
1 participant
Demonstrates the Stylelint sandboxer tool. Three CSS/SCSS files (styles.css, components.scss, _layout.scss) for a demoapp design system, with intentionally embedded violations across 17+ rules: color-no-invalid-hex, property-no-unknown, unit-no-unknown, selector-type-no-unknown, block-no-empty, comment-no-empty, at-rule-no-unknown, function-no-unknown, declaration-block-no-shorthand-property-overrides (errors), and declaration-block-no-duplicate-properties, no-duplicate-selectors, length-zero-no-unit, shorthand-property-no-redundant-values, selector-max-id, selector-class-pattern, max-nesting-depth, font-family-name-quotes (warnings). Repo-level .stylelintrc.json at root with explicit per-rule severities — JSON only because .stylelintrc.js triggers the sandboxer's executable-config security skip (same gate that previously blocked ember-template-lint).
Summary by CodeRabbit