fix: reset Tailwind separator

I found occurrences like so:

```
grep -Eo '\w+_\w+' app/styles/styles.scss | sort -u > ../classes-custom.txt
rg -Io 'class="[^"]*_[a-z0-9][^"]+' | sed 's/class="//' | tr ' ' '\n' | grep _ | sort -u > ../classes-used.txt
grep -v -f ../classes-custom.txt ../classes-used.txt
```

Fixes #376

CHANGELOG.md

@@ -12,6 +12,7 @@
 
 - Font is now a dependency, not checked-in files (and the font looks slightly different)
 - New loading spinners in result tabs
+- Undo override of Tailwind classname separator for Pug [#376](https://github.com/spraakbanken/korp-frontend/issues/376)
 
 ### Fixed
 

app/scripts/components/corpus-chooser/corpus-chooser.ts

@@ -63,7 +63,7 @@ angular.module("korpApp").component("corpusChooser", {
         <div class="scroll_checkboxes shrink-0" ng-class="{'cursor-pointer': $ctrl.initialized}">
             <div
                 ng-click="$ctrl.onShowChooser()"
-                class="hp_topframe no-underline flex justify-between items-center border border-gray-400 transition-all duration-500 hover_bg-blue-50 rounded h-12"
+                class="hp_topframe no-underline flex justify-between items-center border border-gray-400 transition-all duration-500 hover:bg-blue-50 rounded h-12"
             >
                 <div ng-if="$ctrl.initialized">
                     <span ng-if-start="$ctrl.selectCount != 1">{{ $ctrl.selectCount }}</span>

app/scripts/components/extended/add-box.js

@@ -7,7 +7,7 @@ angular.module("korpApp").component("addBox", {
         <div class="mt-10 mr-14 inline-block" ng-mouseleave="$ctrl.reset()">
             <button
                 ng-class="{'fade-out': $ctrl.showStuffSelectButtons}"
-                class="btn btn-sm image_button insert_token border-gray-300 transition duration-200 hover_bg-gray-200"
+                class="btn btn-sm image_button insert_token border-gray-300 transition duration-200 hover:bg-gray-200"
                 ng-click="$ctrl.addTokenLocal()"
             >
                 <i class="fa-solid fa-lg fa-plus-circle text-blue-600 mr-1"></i>
@@ -16,7 +16,7 @@ angular.module("korpApp").component("addBox", {
             <div class="mt-2">
                 <button
                     ng-show="!$ctrl.showStuffSelectButtons"
-                    class="btn btn-sm image_button insert_token border-gray-300 transition duration-200 hover_bg-gray-200"
+                    class="btn btn-sm image_button insert_token border-gray-300 transition duration-200 hover:bg-gray-200"
                     ng-click="$ctrl.showSelectButtons()"
                 >
                     <i class="fa-solid fa-lg fa-plus-circle text-orange-900 mr-1"></i>
@@ -25,14 +25,14 @@ angular.module("korpApp").component("addBox", {
                 <div class="pos-buttons" ng-class="{'fade-in': $ctrl.showStuffSelectButtons}">
                     <button
                         ng-click="$ctrl.addStructTokenLocal()"
-                        class="block btn btn-sm image_button insert_token border-gray-300 transition duration-200 hover_bg-gray-200"
+                        class="block btn btn-sm image_button insert_token border-gray-300 transition duration-200 hover:bg-gray-200"
                     >
                         <i class="fa-solid fa-arrow-left mr-1"></i>
                         {{ 'before_token' | loc:$root.lang }}
                     </button>
                     <button
                         ng-click="$ctrl.addStructTokenLocal(false)"
-                        class="block btn btn-sm image_button insert_token border-gray-300 transition duration-200 hover_bg-gray-200 mt-2"
+                        class="block btn btn-sm image_button insert_token border-gray-300 transition duration-200 hover:bg-gray-200 mt-2"
                     >
                         <i class="fa-solid fa-arrow-right mr-1"></i>
                         {{ 'after_token' | loc:$root.lang }}

app/scripts/components/header.js

@@ -41,7 +41,7 @@ angular.module("korpApp").component("header", {
 
                     <radio-list options="$ctrl.languages" ng-model="lang"> </radio-list>
 
-                    <a class="transiton duration-200 hover_text-blue-600" ng-click="$ctrl.citeClick()">
+                    <a class="transiton duration-200 hover:text-blue-600" ng-click="$ctrl.citeClick()">
                         {{'about_cite_header' | loc:$root.lang}}
                     </a>
 
@@ -105,20 +105,20 @@ angular.module("korpApp").component("header", {
                     </svg>
                 </div>
 
-                <div class="grow min-[1150px]_hidden"></div>
+                <div class="grow min-[1150px]:hidden"></div>
                 <corpus-chooser></corpus-chooser>
-                <div class="grow hidden min-[1150px]_block"></div>
+                <div class="grow hidden min-[1150px]:block"></div>
 
                 <a
-                    class="hidden min-[1150px]_flex h-20 shrink flex-col justify-end"
+                    class="hidden min-[1150px]:flex h-20 shrink flex-col justify-end"
                     href="https://spraakbanken.gu.se/"
                     target="_blank"
                 >
                     <img ng-if="$root.lang == 'swe'" src="${sbxLogo}" />
                     <img ng-if="$root.lang != 'swe'" src="${sbxLogoEn}" />
                 </a>
 
-                <a class="hidden xl_block shrink-0 h-32 -mt-2" href="https://gu.se/" target="_blank">
+                <a class="hidden xl:block shrink-0 h-32 -mt-2" href="https://gu.se/" target="_blank">
                     <img src="${guLogo}" class="h-full" />
                 </a>
             </div>

app/scripts/components/search-examples.ts

@@ -13,7 +13,7 @@ export default angular.module("korpApp").component("searchExamples", {
         <section ng-if="examples">
             <h2 class="text-xl font-bold">{{"example_queries" | loc:$root.lang}}</h2>
             <ul class="my-2 list-disc">
-                <li ng-repeat="example in examples" class="ml-6 mt-2 first_mt-0">
+                <li ng-repeat="example in examples" class="ml-6 mt-2 first:mt-0">
                     <a ng-click="$ctrl.setSearch(example.params)"> {{example.label | locObj:$root.lang}} </a>
                     <span ng-if="example.hint" class="italic">
                         – <span ng-bind-html="example.hint | locObj:$root.lang | trust" />

app/scripts/components/searchtabs.js

@@ -38,7 +38,7 @@ angular.module("korpApp").component("searchtabs", {
                     <compare-search></compare-search>
                 </uib-tab>
                 <div class="flex justify-end items-center">
-                    <select class="hidden md_block shrink min-w-0 m-1" id="search_history"></select>
+                    <select class="hidden md:block shrink min-w-0 m-1" id="search_history"></select>
                 </div>
             </uib-tabset>
             <div

app/scripts/components/simple-search.js

@@ -16,7 +16,7 @@ angular.module("korpApp").component("simpleSearch", {
     template: html`
         <div id="korp-simple">
             <global-filters lang="lang"></global-filters>
-            <div class="sm_flex justify-between">
+            <div class="sm:flex justify-between">
                 <form>
                     <autoc
                         id="simple_text"

app/scripts/components/tab-preloader.ts

@@ -10,7 +10,7 @@ angular.module("korpApp").component("tabPreloader", {
             class="h-0.5 bg-current absolute bottom-0 left-0"
             style="width: {{$ctrl.progress || 0}}%"
         ></div>
-        <i class="fa-solid fa-spinner motion-safe_animate-spin-slow"></i>
+        <i class="fa-solid fa-spinner motion-safe:animate-spin-slow"></i>
     </div>`,
     bindings: {
         progress: "<",

tailwind.config.js

@@ -1,7 +1,5 @@
 /** @format */
 module.exports = {
-    // pug doesn't support special characters in class names, so no colon.
-    separator: "_",
     content: ["./app/**/*.js", "./app/**/*.ts", "./app/**/*.html"],
     theme: {
         extend: {