switch vue template compiler to condense whitespace

[rtibbles]

❌ This issue is not open for contribution. Visit Contributing guidelines to learn about the contributing process and how to find suitable issues.

Observed behavior

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

Some examples:

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

Sometimes we even disable prettier in order to avoid these issues:

https://github.com/learningequality/kolibri-design-system/blob/fe3ab268a8ed0470d1ac74e23c56b0a8c8e5f9e0/docs/common/DocsExternalLink.vue#L3-L6

There are indeed still issues extant. For example in Firefox on mac on KDS I see:

Our current configuration uses preserveWhitespace: false:

https://github.com/learningequality/kolibri/blob/4c1eca4e4e68945a4733382100013c07baaebb9f/packages/kolibri-tools/lib/webpack.config.base.js#L125-L127

This option was deprecated in Vue 2.6 and replaced with whitespace: 'condense', which has slightly different behavior.

In particular, a whitespace-only text node between element tags that contains new lines is:

• condensed into a single space for preserveWhitespace: false
• removed for whitespace: 'condense'

This is the default behavior for Vue 3.

Expected behavior

In KDS, add this to the build property of nuxt.config.js: js loaders: { vue: { compilerOptions: { whitespace: 'condense', }, }, },

Unfortunately, this change will likely introduce some minor styling regressions in locations where we currently rely on the whitespace existing. For example in KDS, making this switch has this effect:

preserveWhitespace: false	whitespace: 'condense'

The solution here is to explicitly assign margins to inline elements rather than relying on whitespace. For example:

  <div class="link-wrapper">
    <DocsGithubLink
      v-if="showLink"
      :href="linkUrl"
      :text="linkText"
    />
    <span v-else>
      Local environment
    </span>
-    <span>|</span>
+    <span style="margin: 4px">|</span>
    <DocsGithubLink text="Changelog" href="https://github.com/learningequality/kolibri-design-system/blob/main/CHANGELOG.md" />
  </div>

While it may take some time to find all these cases, the regressions are relatively minor, in the long run we'll remove a class of frustrating CSS styling issues and ease the migration to Vue 3.

User-facing consequences

For developers, remove the conflict between Prettier auto-formatting and user-facing layout.