chore: Upgrade Tailwind CSS to 3.3.2 (#7380)

app/javascript/packs/widget.js

@@ -38,8 +38,8 @@ Vue.use(VueFormulate, {
     isValidPhoneNumber: ({ value }) => isPhoneNumberValidWithDialCode(value),
   },
   classes: {
-    outer: 'mb-4 wrapper',
+    outer: 'mb-2 wrapper',
-    error: 'text-red-400 mt-2 text-xs font-medium',
+    error: 'text-red-400 mt-2 text-xs leading-3 font-medium',
   },
 });
 // Event Bus

app/javascript/shared/components/Branding.vue

@@ -7,7 +7,7 @@
       :href="brandRedirectURL"
       rel="noreferrer noopener nofollow"
       target="_blank"
-      class="branding--link justify-center"
+      class="branding--link justify-center items-center leading-3"
     >
       <img
         class="branding--image"

app/javascript/shared/components/Button.vue

@@ -34,9 +34,9 @@ export default {
   },
   computed: {
     buttonClassName() {
-      let className = 'text-white py-3 px-4 rounded shadow-sm';
+      let className = 'text-white py-3 px-4 rounded shadow-sm leading-4';
       if (this.type === 'clear') {
-        className = 'flex mx-auto mt-4 text-xs w-auto text-black-600';
+        className = 'flex mx-auto mt-4 text-xs leading-3 w-auto text-black-600';
       }
 
       if (this.type === 'blue' && !Object.keys(this.buttonStyles).length) {

app/javascript/widget/components/ChatHeader.vue

@@ -19,19 +19,19 @@
       />
       <div>
         <div
-          class="font-medium text-base flex items-center"
+          class="font-medium text-base leading-4 flex items-center"
           :class="$dm('text-black-900', 'dark:text-slate-50')"
         >
           <span v-dompurify-html="title" class="mr-1" />
           <div
             :class="
-              `h-2 w-2 rounded-full leading-4
+              `h-2 w-2 rounded-full
               ${isOnline ? 'bg-green-500' : 'hidden'}`
             "
           />
         </div>
         <div
-          class="text-xs mt-1"
+          class="text-xs mt-1 leading-3"
           :class="$dm('text-black-700', 'dark:text-slate-400')"
         >
           {{ replyWaitMessage }}

app/javascript/widget/components/ChatHeaderExpanded.vue

@@ -17,7 +17,7 @@
     </div>
     <h2
       v-dompurify-html="introHeading"
-      class="mt-5 text-3xl mb-3 font-normal"
+      class="mt-5 text-3xl mb-3 leading-8 font-normal"
       :class="$dm('text-slate-900', 'dark:text-slate-50')"
     />
     <p

app/javascript/widget/components/Form/Input.vue

@@ -1,6 +1,10 @@
 <template>
   <label class="block">
-    <div v-if="label" class="mb-2 text-xs font-medium" :class="labelClass">
+    <div
+      v-if="label"
+      class="mb-2 text-xs leading-3 font-medium"
+      :class="labelClass"
+    >
       {{ label }}
     </div>
     <input
@@ -11,12 +15,12 @@
       :value="value"
       @change="onChange"
     />
-    <div v-if="error" class="text-red-400 mt-2 text-xs font-medium">
+    <div v-if="error" class="text-red-400 mt-2 text-xs leading-3 font-medium">
       {{ error }}
     </div>
     <div
       v-if="!error && helpText"
-      class="text-red-400 mt-2 text-xs font-medium"
+      class="text-red-400 mt-2 text-xs leading-3 font-medium"
     >
       {{ helpText }}
     </div>

app/javascript/widget/components/Form/TextArea.vue

@@ -1,6 +1,10 @@
 <template>
   <label class="block">
-    <div v-if="label" class="mb-2 text-xs font-medium" :class="labelClass">
+    <div
+      v-if="label"
+      class="mb-2 text-xs leading-3 font-medium"
+      :class="labelClass"
+    >
       {{ label }}
     </div>
     <textarea
@@ -10,7 +14,7 @@
       :value="value"
       @change="onChange"
     />
-    <div v-if="error" class="text-red-400 mt-2 text-xs font-medium">
+    <div v-if="error" class="text-red-400 mt-2 text-xs leading-3 font-medium">
       {{ error }}
     </div>
   </label>

app/javascript/widget/components/PreChat/Form.vue

@@ -46,7 +46,7 @@
     />
 
     <custom-button
-      class="font-medium my-5"
+      class="font-medium mt-2 mb-5"
       block
       :bg-color="widgetColor"
       :text-color="textColor"
@@ -180,7 +180,7 @@ export default {
       return contactAttributes;
     },
     inputStyles() {
-      return `mt-2 border rounded w-full py-2 px-3 text-slate-700 outline-none`;
+      return `mt-1 border rounded w-full py-2 px-3 text-slate-700 outline-none`;
     },
     isInputDarkOrLightMode() {
       return `${this.$dm('bg-white', 'dark:bg-slate-600')} ${this.$dm(
@@ -306,6 +306,7 @@ export default {
     .formulate-input-wrapper {
       display: flex;
       align-items: center;
+      line-height: $space-normal;
 
       label {
         margin-left: 0.2rem;

app/javascript/widget/components/TeamAvailability.vue

@@ -12,7 +12,7 @@
               : $t('TEAM_AVAILABILITY.OFFLINE')
           }}
         </div>
-        <div class="text-xs leading-4 mt-1">
+        <div class="text-xs leading-3 mt-1">
           {{ replyWaitMessage }}
         </div>
       </div>

app/javascript/widget/components/dropdown/DropdownMenuItem.vue

@@ -21,7 +21,7 @@ export default {
     },
     textClass: {
       type: String,
-      default: 'text-sm',
+      default: 'text-sm leading-3',
     },
     icon: {
       type: Boolean,

config/webpack/environment.js

@@ -3,6 +3,28 @@ const { VueLoaderPlugin } = require('vue-loader');
 const resolve = require('./resolve');
 const vue = require('./loaders/vue');
 
+// Implementation reference: https://chwt.app/webpacker-tailwind-jit
+const sassLoader = environment.loaders.get('sass');
+const sassLoaderConfig = sassLoader.use.find(
+  element => element.loader === 'sass-loader'
+);
+
+const options = sassLoaderConfig.options;
+options.implementation = require('sass');
+
+const hotfixPostcssLoaderConfig = subloader => {
+  const subloaderName = subloader.loader;
+  if (subloaderName === 'postcss-loader') {
+    subloader.options.postcssOptions = subloader.options.config;
+    delete subloader.options.config;
+  }
+};
+
+environment.loaders.keys().forEach(loaderName => {
+  const loader = environment.loaders.get(loaderName);
+  loader.use.forEach(hotfixPostcssLoaderConfig);
+});
+
 environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin());
 environment.loaders.prepend('vue', vue);
 

lib/tasks/asset_clean.rake

@@ -0,0 +1,21 @@
+# Asset clean logic taken from the article https://chwt.app/heroku-slug-size
+
+namespace :assets do
+  desc "Remove 'node_modules' folder"
+  task rm_node_modules: :environment do
+    Rails.logger.info 'Removing node_modules folder'
+    FileUtils.remove_dir('node_modules', true)
+  end
+end
+
+skip_clean = %w[no false n f].include?(ENV.fetch('WEBPACKER_PRECOMPILE', nil))
+
+unless skip_clean
+  if Rake::Task.task_defined?('assets:clean')
+    Rake::Task['assets:clean'].enhance do
+      Rake::Task['assets:rm_node_modules'].invoke
+    end
+  else
+    Rake::Task.define_task('assets:clean' => 'assets:rm_node_modules')
+  end
+end

package.json

@@ -41,8 +41,9 @@
     "@sentry/tracing": "^6.19.7",
     "@sentry/vue": "^6.19.7",
     "@sindresorhus/slugify": "1.1.0",
-    "@tailwindcss/typography": "0.2.0",
+    "@tailwindcss/typography": "^0.5.9",
     "activestorage": "^5.2.6",
+    "autoprefixer": "^10.4.14",
     "axios": "^0.21.2",
     "babel-plugin-syntax-jsx": "^6.18.0",
     "babel-plugin-transform-vue-jsx": "^3.7.0",
@@ -65,9 +66,11 @@
     "md5": "^2.3.0",
     "ninja-keys": "^1.1.9",
     "opus-recorder": "^8.0.5",
+    "postcss": "^8.4.24",
+    "postcss-loader": "^4.2.0",
     "semver": "7.3.5",
     "spinkit": "~1.2.5",
-    "tailwindcss": "^1.9.6",
+    "tailwindcss": "^3.3.2",
     "turbolinks": "^5.2.0",
     "url-loader": "^2.0.0",
     "urlpattern-polyfill": "^6.0.2",
@@ -133,6 +136,7 @@
     "jest-serializer-vue": "^2.0.2",
     "jest-transform-stub": "^2.0.0",
     "lint-staged": "10.5.4",
+    "postcss-preset-env": "^8.5.1",
     "prettier": "^1.16.4",
     "rimraf": "^3.0.0",
     "size-limit": "^8.2.4",

tailwind.config.js

@@ -1,23 +1,17 @@
-const { colors } = require('tailwindcss/defaultTheme');
-
 module.exports = {
   dark: 'class',
-  purge: [
+  content: [
     './app/javascript/widget/**/*.vue',
     './app/javascript/portal/**/*.vue',
     './app/javascript/shared/**/*.vue',
     './app/javascript/survey/**/*.vue',
     './app/views/**/*.html.erb',
   ],
-  future: {
-    removeDeprecatedGapUtilities: true,
-  },
-  experimental: {
-    darkModeVariant: true,
-  },
   theme: {
     colors: {
-      white: colors.white,
+      transparent: 'transparent',
+      white: '#fff',
+      current: 'currentColor',
       woot: {
         25: '#F5FAFF',
         50: '#EBF5FF',
@@ -94,6 +88,7 @@ module.exports = {
         800: '#D11320',
         900: '#C30011',
       },
+      body: '#2f3b49',
     },
     extend: {
       screens: {