Remove SCSS — migrate to plain CSS

[helylle]

Remove SCSS — migrate to plain CSS

Summary

• Remove sass and sass-loader from the build chain; CSS is now processed by postcss-loader (already in the pipeline) with postcss-custom-media for breakpoint variables. postcss-import resolves @import before postcss-custom-media runs so that @custom-media definitions in variables.css are visible to all files; css-loader import resolution is disabled to avoid double-processing. Both PostCSS plugins can be removed once @custom-media ships natively in browsers.
• Rename all 36 .scss partials to .css and drop the _ prefix convention
• Convert all SCSS syntax to native CSS equivalents:
  • $variables → CSS custom properties (var(--*)) on :root
  • @use partials → @import (resolved at build time by postcss-import)
  • @media (max-width: $bp-md) → @media (--bp-md) via @custom-media
  • @extend (17 instances) → inlined declarations or utility classes
  • #{$a}__item interpolation → descendant selector nesting
  • SCSS math → calc() with custom properties
  • // comments → /* */
• Update stylelint config from stylelint-config-standard-scss to stylelint-config-standard
• Replace hardcoded color/breakpoint values with existing CSS variables where missed
• Extract 4 box-shadow tokens (--shadow-sm, --shadow-md, --shadow-lg, --shadow-nav) to variables.css, replacing 9 hardcoded values across 7 files
• Remove !important flags on .status-box borders that were only needed to override the old @extend .accordion
• Refactor accordion CSS from BEM naming to semantic element selectors with native CSS nesting. Remove 6 BEM classes from JSX (accordion__item, accordion__heading, accordion__button, accordion__panel, accordion-icon, accordion-title), merge .accordion-nested into &.nested modifier, remove dead .disabled/.expanded rules. Replace overflow: hidden with border-radius on first/last children to fix clipped focus outlines.
• Rename accordion content class to .accordion-panel to avoid collision with .panel in base.css (page layout background)
• Fix outline-offset: -var(--border-width) → calc(-1 * var(--border-width)) — CSS custom properties require calc() for negation
• Add flex-direction: column to fieldset legend to restore vertical stacking lost when SCSS @extend label was inlined
• Expand &__suffix concatenation in reactSelect.css to full class names — native CSS nesting wraps selector lists in :is(), breaking & concatenation that worked in SCSS

Review fixes

• Restructure reactSelect.css selectors, fix accordion border-radius on single items, add missing fieldset reset in forms.css, correct input border variable reference
• Add stylelint to GitHub Actions linter job, VS Code recommended extensions, and editor-on-save config
• Fix all stylelint errors: disable no-descending-specificity (too noisy with CSS nesting), ignore third-party class name patterns (react-select, font-awesome) via config overrides, rename IDs to kebab-case
• Replace deprecated clip with clip-path: inset(50%) in visually-hidden patterns
• Remove dead ::input-placeholder pseudo-element (old non-Chromium Edge)
• Replace deprecated word-break: break-word with overflow-wrap: anywhere (spec equivalent)

Why

The project uses only basic SCSS features (variables, nesting, @extend, interpolation). No mixins, functions, maps, or loops. Every feature used now has a native CSS equivalent with baseline 2024 browser support. Removing SCSS:

• Eliminates a compile step and 2 build dependencies (sass, sass-loader)
• Removes Dart Sass deprecation warnings and @import → @use migration pressure
• CSS in DevTools matches source — no source map indirection
• Unblocks native CSS features (@layer, @scope, @property) without preprocessor interference

[sonarqubecloud]

Quality Gate passed

Issues
2 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud