Use more specific names for the version picker CSS classes and add them to the PurgeCSS safelist (#2264)

assets/js/versions.template.js

@@ -44,10 +44,10 @@ function appendVersion(parent, name, segment, url) {
     // The list item
     const li = document.createElement("li");
     if (segment === selected) {
-        li.classList.add("selected");
+        li.classList.add("version-picker-selected");
     }
     if (segment === "latest") {
-        li.classList.add("latest");
+        li.classList.add("version-picker-latest");
     }
     parent.appendChild(li);
 

assets/scss/_styles_project.scss

@@ -57,18 +57,13 @@ Custom SCSS for the Matrix spec
     overflow-y: auto;
   }
 
-  /* As these styles are only applied by JavaScript, PurgeCSS doesn't see them
+  ul#version-selector li.version-picker-selected a {
-   * in the source code and removes them unless we explicitly tell it not to.
-   */
-  /* purgecss start ignore */
-  ul#version-selector li.selected a {
     font-weight: bold;
   }
 
-  ul#version-selector li.latest a {
+  ul#version-selector li.version-picker-latest a {
     color: $secondary;
   }
-  /* purgecss end ignore */
 }
 
 /* Styles for the sidebar nav */

changelogs/internal/newsfragments/2264.clarification

@@ -0,0 +1 @@
+Add version picker in the navbar.

postcss.config.js

@@ -16,6 +16,9 @@ const purgecss = require('@fullhuman/postcss-purgecss')({
             extensions: ["json"],
         },
     ],
+    // As these classes are only applied by JavaScript, PurgeCSS doesn't see them
+    // in the source code and removes them unless we explicitly tell it not to.
+    safelist: ['version-picker-selected', 'version-picker-latest']
 });
 
 module.exports = {