switch vue template compiler to condense whitespace

Overview

Switch the Vue template compiler option from the deprecated preserveWhitespace: false to whitespace: 'condense' in the webpack configuration. This removes whitespace-only text nodes between elements (instead of collapsing them to a single space), eliminating a class of Prettier-induced whitespace bugs and aligning with the Vue 3 default behavior.

Complexity: Low
Target branch: develop

Context

The vue-loader compiler option preserveWhitespace was deprecated in Vue 2.6, replaced by whitespace: 'condense'. The key behavioral difference: whitespace-only text nodes between element tags that contain newlines are removed with condense (instead of collapsed to a single space with preserveWhitespace: false).

This matters because Prettier reformats Vue templates by inserting newlines between inline elements. With the current setting, those newlines become visible spaces that cause subtle layout issues — gaps appearing or disappearing depending on formatting. This has been a recurring source of bugs:

• https://github.com/learningequality/kolibri-design-system/issues/166
• https://github.com/learningequality/kolibri/issues/3974

The config lives in packages/kolibri-build/src/webpack.config.base.js (line 49). There is a corresponding issue for KDS: learningequality/kolibri-design-system#1110.

Original issue context

Our Prettier-based formatting of components often introduces significant whitespace between inline DOM nodes with negative and hard-to-debug consequences.

Sometimes we even disable prettier in order to avoid these issues. Our current configuration uses preserveWhitespace: false. This option was deprecated in Vue 2.6 and replaced with whitespace: 'condense', which is the default behavior for Vue 3.

preserveWhitespace: false	whitespace: 'condense'

The Change

Replace preserveWhitespace: false with whitespace: 'condense' in packages/kolibri-build/src/webpack.config.base.js.

This will cause minor styling regressions wherever adjacent inline elements rely on inter-element whitespace for spacing (newlines between elements that currently collapse to a space will be removed entirely). These regressions must be found and fixed in the same PR by adding explicit CSS margins or padding.

To find regressions, search Vue templates for patterns where inline elements are separated by newlines — adjacent <span> elements, inline components next to text separators, links adjacent to other inline content.

Out of Scope

• The corresponding KDS change (tracked in learningequality/kolibri-design-system#1110)
• Any broader Prettier configuration changes
• Vue 3 migration work beyond this alignment

Acceptance Criteria

General

• preserveWhitespace: false is replaced with whitespace: 'condense' in packages/kolibri-build/src/webpack.config.base.js
• Templates with adjacent inline elements relying on inter-element whitespace are identified and fixed with explicit CSS margins/padding
• PR includes a before/after screenshot table documenting each regression fix

Testing

• Existing tests pass
• Visual spot-check of each fixed area confirms spacing matches pre-change appearance

References

• Vue 2 whitespace: 'condense' documentation
• Vue 3 default whitespace behavior
• KDS counterpart: learningequality/kolibri-design-system#1110

AI usage

This issue was restructured from the original description using Claude Code. The scope decisions (fix regressions in same PR, targeted template search, before/after screenshot table) were confirmed through iterative Q&A with a maintainer.

Start with packages/kolibri-build/src/webpack.config.base.js and inspect the existing Vue compiler option. Search Vue templates for adjacent inline elements that rely on newline spacing, then run the existing tests and perform the requested visual spot-checks. Done means the compiler option is updated, any spacing regressions have explicit CSS spacing, and before/after screenshots document each fix.