Usage of SFC CSS Modules and removal of SCSS/Sass

Status

Accepted.

Context

Styles in POLAR are currently written as scoped styles in single-file components, partly using SCSS/Sass.

Two questions were raised:

• Should SFC CSS Modules be used to scope styles? It has to be clarified whether they work with custom elements.
• Is SCSS/Sass still required? The features we use it for - nested styles, colour functions and variables - are available as native CSS by now. Nesting and oklch are baseline, and SCSS variables can be replaced by CSS variables.

Decision

• We do not use SFC CSS Modules. They are not supported with Vue custom elements, which POLAR is built from.
• We use SFC CSS Modules in the iceberg test client.
• We remove SCSS/Sass and write plain CSS instead, using native nesting, oklch and CSS variables.

Consequences

• (+) One build step and one dependency less.
• (+) Styles are written in standard CSS, which lowers the entry barrier for contributors.
• (+) CSS variables can be changed at runtime and by consumers, which SCSS variables cannot.
• (o) Existing SCSS styles have to be migrated to plain CSS.
• (-) Style scoping keeps relying on Vue's scoped attribute instead of CSS Modules.