Maintenance: Added eslint plugin for tailwindcss.

.eslintrc.js

@@ -1,4 +1,4 @@
-// Copyright (C) 2012-2021 Zammad Foundation, https://zammad-foundation.org/
+// Copyright (C) 2012-2022 Zammad Foundation, https://zammad-foundation.org/
 
 const path = require('path')
 
@@ -9,7 +9,14 @@ module.exports = {
     jest: true,
     node: true,
   },
-  plugins: ['@typescript-eslint', 'vue', 'prettier', 'jest', 'zammad'],
+  plugins: [
+    '@typescript-eslint',
+    'vue',
+    'prettier',
+    'jest',
+    'tailwindcss',
+    'zammad',
+  ],
   extends: [
     'airbnb-base',
     'plugin:vue/vue3-recommended',
@@ -17,6 +24,7 @@ module.exports = {
     'plugin:@typescript-eslint/recommended',
     'plugin:prettier/recommended',
     'plugin:jest/recommended',
+    'plugin:tailwindcss/recommended',
     '@vue/prettier',
     '@vue/typescript/recommended',
     'prettier',
@@ -100,6 +108,9 @@ module.exports = {
 
     // Don't require a default value for the props.
     'vue/require-default-prop': 'off',
+
+    // Disabled for now, because it's not working on the CI and also leads to a bad performance.
+    'tailwindcss/no-custom-classname': 'off',
   },
   overrides: [
     {

app/frontend/apps/mobile/App.vue

@@ -3,7 +3,7 @@
 <template>
   <CommonNotifications />
   <div
-    class="min-h-screen min-w-screen bg-black text-white text-center text-sm antialiased font-sans select-none"
+    class="min-w-full min-h-screen font-sans text-sm antialiased text-center text-white bg-black select-none"
   >
     <router-view v-if="applicationLoaded.value" />
   </div>

app/frontend/apps/mobile/components/layout/LayoutMain.vue

@@ -1,8 +1,8 @@
 <!-- Copyright (C) 2012-2022 Zammad Foundation, https://zammad-foundation.org/ -->
 
 <template>
-  <div class="flex flex-col h-screen overflow-hidden">
-    <main class="flex-1 overflow-y-scroll">
+  <div class="flex overflow-hidden flex-col h-screen">
+    <main class="overflow-y-scroll flex-1">
       <router-view v-slot="{ Component }">
         <TransitionViewNavigation>
           <component v-bind:is="Component" />
@@ -11,7 +11,7 @@
     </main>
     <footer
       v-if="showBottomNavigation"
-      class="w-full bg-black text-center border-t p-4"
+      class="p-4 w-full text-center bg-black border-t"
     >
       Bottom-Navigation
     </footer>

app/frontend/apps/mobile/components/transition/TransitionViewNavigation.vue

@@ -1,8 +1,8 @@
 <!-- Copyright (C) 2012-2022 Zammad Foundation, https://zammad-foundation.org/ -->
 
 <template>
-  <main class="min-h-screen grid flex-1 overflow-hidden">
-    <transition class="flex-auto z-10" v-bind:name="viewTransition">
+  <main class="grid overflow-hidden flex-1 min-h-screen">
+    <transition class="z-10 flex-auto" v-bind:name="viewTransition">
       <slot></slot>
     </transition>
   </main>

app/frontend/apps/mobile/views/Home.vue

@@ -13,7 +13,7 @@
     <br />
     <p v-on:click="fetchCurrentUser">fetchCurrentUser</p>
     <br /><br />
-    <h1 class="text-lg mb-4">Configs:</h1>
+    <h1 class="mb-4 text-lg">Configs:</h1>
     <template v-if="config.value">
       <p v-for="(value, key) in config.value" v-bind:key="(key as string)">
         Key: {{ key }}<br />

app/frontend/apps/mobile/views/Login.vue

@@ -2,45 +2,45 @@
 
 <template>
   <!-- TODO: Only a dummy implementation for the login... -->
-  <div class="flex flex-col h-full min-h-screen items-center justify-center">
-    <div class="max-w-md w-full">
-      <div class="flex-grow flex flex-col justify-center">
-        <div class="my-5 p-8 flex-grow">
+  <div class="flex flex-col justify-center items-center h-full min-h-screen">
+    <div class="w-full max-w-md">
+      <div class="flex flex-col grow justify-center">
+        <div class="grow p-8 my-5">
           <div class="flex justify-center p-2">
             <CommonLogo />
           </div>
-          <div class="flex justify-center p-2 mb-6 font-extrabold text-2xl">
+          <div class="flex justify-center p-2 mb-6 text-2xl font-extrabold">
             {{ 'Zammad' }}
           </div>
 
           <form class="text-left">
-            <fieldset class="floating-input relative">
+            <fieldset class="relative floating-input">
               <input
                 id="username"
                 v-model="loginFormValues.login"
                 type="text"
                 v-bind:placeholder="i18n.t('Username / Email')"
-                class="block h-14 bg-gray-300 mt-1 w-full text-sm rounded border-none focus:outline-none"
+                class="block mt-1 w-full h-14 text-sm bg-gray-300 rounded border-none focus:outline-none"
               />
               <label
                 for="username"
-                class="absolute top-0 left-0 px-3 py-5 h-full pointer-events-none transform origin-left transition-all duration-100 ease-in-out text-base"
+                class="absolute top-0 left-0 py-5 px-3 h-full text-base transition-all duration-100 ease-in-out origin-left pointer-events-none"
               >
                 {{ i18n.t('Username / Email') }}
               </label>
             </fieldset>
 
-            <fieldset class="floating-input relative">
+            <fieldset class="relative floating-input">
               <input
                 id="password"
                 v-model="loginFormValues.password"
                 type="password"
                 v-bind:placeholder="i18n.t('Password')"
-                class="block h-14 bg-gray-300 mt-1 w-full text-sm rounded border-none focus:outline-none"
+                class="block mt-1 w-full h-14 text-sm bg-gray-300 rounded border-none focus:outline-none"
               />
               <label
                 for="password"
-                class="absolute top-0 left-0 px-3 py-5 h-full pointer-events-none transform origin-left transition-all duration-100 ease-in-out text-base"
+                class="absolute top-0 left-0 py-5 px-3 h-full text-base transition-all duration-100 ease-in-out origin-left pointer-events-none"
               >
                 {{ i18n.t('Password') }}
               </label>
@@ -54,8 +54,8 @@
                 </label> -->
           </form>
 
-          <div class="flex justify-between flex-grow items-baseline mt-1">
-            <a class="text-yellow cursor-pointer select-none underline">
+          <div class="flex grow justify-between items-baseline mt-1">
+            <a class="text-yellow underline cursor-pointer select-none">
               {{ i18n.t('Register') }}
             </a>
 
@@ -64,9 +64,9 @@
             </a>
           </div>
 
-          <div class="flex flex-grow items-cemter justify-center mt-8 mx-8">
+          <div class="flex grow justify-center items-center mx-8 mt-8">
             <button
-              class="h-14 bg-yellow text-black text-xl font-semibold w-full py-2 px-4 rounded select-none"
+              class="py-2 px-4 w-full h-14 text-xl font-semibold text-black bg-yellow rounded select-none"
               v-on:click="login"
             >
               {{ i18n.t('Sign in') }}

app/frontend/common/components/common/CommonIcon.vue

@@ -3,7 +3,7 @@
 <template>
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    class="icon fill-current"
+    class="fill-current icon"
     v-bind:class="iconClass"
     v-bind:width="finalSize.width"
     v-bind:height="finalSize.height"

app/frontend/common/components/common/CommonNotifications.vue

@@ -1,8 +1,8 @@
 <!-- Copyright (C) 2012-2022 Zammad Foundation, https://zammad-foundation.org/ -->
 
 <template>
-  <div id="Notifications" class="w-full flex justify-center">
-    <div class="fixed z-50 top-0 right-0">
+  <div id="Notifications" class="flex justify-center w-full">
+    <div class="fixed top-0 right-0 z-50">
       <transition-group
         tag="div"
         enter-class="opacity-0"
@@ -11,7 +11,7 @@
         <div v-for="notification in notifications" v-bind:key="notification.id">
           <div class="flex justify-center">
             <div
-              class="flex items-center py-2 px-4 rounded m-1"
+              class="flex items-center py-2 px-4 m-1 rounded"
               v-bind:class="getClassName(notification.type)"
             >
               <CommonIcon

package.json

@@ -46,9 +46,10 @@
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-prettier-vue": "^3.1.0",
     "eslint-plugin-storybook": "^0.5.5",
+    "eslint-plugin-tailwindcss": "^3.0.4",
     "eslint-plugin-vue": "^8.2.0",
     "eslint-plugin-zammad": "file:.eslint",
-    "jest": "^27.4.6",
+    "jest": "^27.4.7",
     "jest-mock-console": "^1.2.3",
     "jest-transform-stub": "^2.0.0",
     "mock-apollo-client": "^1.2.0",
@@ -63,7 +64,7 @@
     "stylelint-config-standard-scss": "^3.0.0",
     "stylelint-prettier": "^2.0.0",
     "stylelint-scss": "^4.1.0",
-    "tailwindcss": "^3.0.10",
+    "tailwindcss": "^3.0.11",
     "ts-jest": "^27.1.2",
     "type-fest": "^2.8.0",
     "typescript": "^4.5.4",