Add css linter

[patrickelectric]

Fix #191

Summary by Sourcery

Add CSS linting to the frontend and clean up styles to satisfy the new rules.

Enhancements:

• Add Stylelint and related Vue/SCSS configs as dev dependencies and standardize various CSS values and shadows across Vue components.
• Remove empty style blocks and minor redundant CSS declarations in Vue components to improve code cleanliness.

Build:

• Extend frontend lint script to run Stylelint alongside ESLint and add dedicated CSS lint and auto-fix npm scripts.

[sourcery-ai]

Reviewer's Guide

Adds Stylelint-based CSS linting to the frontend build tooling and updates existing Vue/CSS styles to conform to the new lint rules, including normalizing zero units, cleaning up redundant/empty style blocks, and adjusting a few specific properties to match lint expectations.

File-Level Changes

Change	Details	Files
Add Stylelint tooling and npm scripts for CSS/SCSS/Vue style linting.	Extend existing lint script to run Stylelint over all Vue/CSS/SCSS files under src Add dedicated lint:css and lint:css:fix scripts for targeted CSS linting and autofix Introduce Stylelint and related plugins/configs plus postcss-html as devDependencies Update yarn.lock to capture the new Stylelint-related dependencies	core/frontend/package.json core/frontend/yarn.lock
Normalize CSS values and shorthands to satisfy Stylelint rules without changing behavior.	Remove unnecessary px units from zero-valued length properties (top/left/margins/shadows/text-shadow/etc.) Normalize box-shadow syntax to use consistent ordering and shorthand zeros Adjust padding/margin declarations to use concise forms where possible Standardize certain color-related values like currentColor/currentcolor per lint expectations	core/frontend/src/components/kraken/cards/StoreExtensionCard.vue core/frontend/src/components/vehiclesetup/viewers/GenericViewer.vue core/frontend/src/App.vue core/frontend/src/components/app/ImagePicker.vue core/frontend/src/components/kraken/modals/ExtensionSettingsModal.vue core/frontend/src/components/video-manager/VideoManager.vue core/frontend/src/components/video-manager/VideoStream.vue core/frontend/src/components/wizard/ActionStepper.vue core/frontend/src/components/wizard/Wizard.vue core/frontend/src/views/ExtensionManagerView.vue core/frontend/src/views/ExtensionView.vue core/frontend/src/views/MainView.vue
Clean up or simplify CSS in Vue components to align with lint rules.	Remove entirely empty <style> or <style scoped> blocks from a number of Vue single-file components Deduplicate overlapping CSS rules (e.g., merged duplicate th, td rules into a single block) Slightly simplify a layout rule by dropping an unnecessary display:flex declaration from an endpoint button container	core/frontend/src/components/vehiclesetup/configuration/accelerometer/FullAccelerometerCalibration.vue core/frontend/src/components/vehiclesetup/configuration/accelerometer/QuickAccelerometerCalibration.vue core/frontend/src/components/vehiclesetup/configuration/compass/AutoCoordinateDetector.vue core/frontend/src/components/vehiclesetup/configuration/compass/CompassLearn.vue core/frontend/src/components/vehiclesetup/configuration/compass/LargeVehicleCompassCalibrator.vue core/frontend/src/components/app/PirateModeTrayMenu.vue core/frontend/src/components/autopilot/BoardChangeDialog.vue core/frontend/src/components/autopilot/EndpointCreationDialog.vue core/frontend/src/components/bridges/BridgeCreationDialog.vue core/frontend/src/components/common/PasswordInput.vue core/frontend/src/components/ethernet/EthernetTrayMenu.vue core/frontend/src/components/notifications/ConfigMenu.vue core/frontend/src/components/notifications/NotificationManager.vue core/frontend/src/components/notifications/TrayButton.vue core/frontend/src/components/vehiclesetup/configuration/compass/CompassParams.vue core/frontend/src/components/wifi/ConnectionDialog.vue core/frontend/src/components/wifi/DisconnectionDialog.vue core/frontend/src/components/wifi/WifiTrayMenu.vue core/frontend/src/components/vehiclesetup/overview/LeakInfo.vue core/frontend/src/components/vehiclesetup/overview/PowerInfo.vue core/frontend/src/components/autopilot/EndpointCard.vue

Assessment against linked issues

Issue	Objective	Addressed	Explanation
#191	Integrate automated CSS validation into the frontend linting workflow (invoked via the existing lint script).	✅
#191	Configure a CSS linter for the project's CSS/SCSS/Vue styles and update existing styles to comply with the new linting rules.	✅

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[sourcery-ai]

Hey - I've found 1 issue, and left some high level feedback:

• In EndpointCard.vue, .endpoint-buttons keeps gap: 8px but no longer sets display: flex, which likely breaks the intended layout and makes the gap ineffective; consider restoring the flex (or grid) display.
• The stylelint 'src/**/*.{vue,css,scss}' glob in the npm scripts may not work as expected on Windows shells due to single-quote handling and glob expansion; consider using double quotes or a cross-platform runner (e.g. cross-env-shell or a JS-based glob) if Windows support is needed.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- In `EndpointCard.vue`, `.endpoint-buttons` keeps `gap: 8px` but no longer sets `display: flex`, which likely breaks the intended layout and makes the `gap` ineffective; consider restoring the flex (or grid) display.
- The `stylelint 'src/**/*.{vue,css,scss}'` glob in the npm scripts may not work as expected on Windows shells due to single-quote handling and glob expansion; consider using double quotes or a cross-platform runner (e.g. `cross-env-shell` or a JS-based glob) if Windows support is needed.

## Individual Comments

### Comment 1
<location> `core/frontend/src/components/autopilot/EndpointCard.vue:203-207` </location>
<code_context>
 <style scoped>
 .endpoint-buttons {
   gap: 8px;
-  display: flex;
   position: absolute;
   right: -16px;
   top: 50%;
</code_context>

<issue_to_address>
**issue (bug_risk):** Removing `display: flex` from `.endpoint-buttons` will likely break layout and make `gap` ineffective.

Since `gap` only works on flex/grid containers, this change will both disable the spacing and likely misalign the buttons. If the layout isn’t meant to change, keep `display: flex;` here or apply `gap` to a flex parent instead.
</issue_to_address>

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}