fix(tailwind): Ensure tailwind properly purges unused utility classes (#2485)

platform/ui/.webpack/webpack.prod.js

@@ -24,8 +24,8 @@ module.exports = (env, argv) => {
       warnings: true,
     },
     optimization: {
-      minimize: true,
-      sideEffects: true,
+      minimize: false,
+      sideEffects: false,
     },
     output: {
       path: ROOT_DIR,
@@ -34,22 +34,8 @@ module.exports = (env, argv) => {
       filename: pkg.main,
     },
     externals: {
-      '@ohif/core': {
-        commonjs: '@ohif/core',
-        commonjs2: '@ohif/core',
-        amd: '@ohif/core',
-        root: '@ohif/core',
-      },
       react: 'React',
       'react-dom': 'ReactDOM',
     },
-    module: {
-      rules: [
-        {
-          test: /\.css$/i,
-          use: ['style-loader', 'css-loader', 'postcss-loader'],
-        },
-      ],
-    },
   });
 };

platform/ui/package.json

@@ -45,6 +45,7 @@
   },
   "devDependencies": {
     "autoprefixer": "9.7.4",
+    "mini-css-extract-plugin": "^2.1.0",
     "postcss": "^8.3.5",
     "postcss-loader": "^6.1.1",
     "prop-types": "15.7.2",

platform/ui/postcss.config.js

@@ -1,7 +0,0 @@
-const path = require('path');
-const tailwindcss = require('tailwindcss');
-const tailwindConfigPath = path.join(__dirname, 'tailwind.config.js');
-
-module.exports = {
-  plugins: [tailwindcss(tailwindConfigPath), require('autoprefixer')],
-};

platform/ui/src/components/DateRange/DateRange.css

@@ -1,5 +1,5 @@
-.DateRangePicker {
-}
+/*@tailwind base;
+@tailwind utilities;*/
 
 /** CONTAINER STYLES **/
 

platform/ui/src/components/InputGroup/InputGroup.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
+import getGridWidthClass from '../../utils/getGridWidthClass'
 
 import {
   InputText,
@@ -132,7 +133,7 @@ const InputGroup = ({
               key={inputMeta.name}
               className={classnames(
                 'pl-4 first:pl-12',
-                `w-${inputMeta.gridCol}/24`
+                getGridWidthClass(inputMeta.gridCol)
               )}
             >
               {renderFieldInputComponent(inputMeta)}

platform/ui/src/components/SidePanel/SidePanel.jsx

@@ -31,12 +31,12 @@ const baseClasses =
 
 const classesMap = {
   open: {
-    left: `border-r-${borderSize}`,
-    right: `border-l-${borderSize}`,
+    left: `border-r-4`,
+    right: `border-l-4`,
   },
   closed: {
-    left: `border-r-${borderSize} items-end`,
-    right: `border-l-${borderSize} items-start`,
+    left: `border-r-4 items-end`,
+    right: `border-l-4 items-start`,
   },
 };
 

platform/ui/src/components/StudyListTable/StudyListTableRow.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { Icon } from '../';
+import getGridWidthClass from '../../utils/getGridWidthClass';
 
 const StudyListTableRow = props => {
   const { tableData } = props;
@@ -36,14 +37,13 @@ const StudyListTableRow = props => {
                 >
                   {row.map((cell, index) => {
                     const { content, title, gridCol } = cell;
-
                     return (
                       <td
                         key={index}
                         className={classnames(
                           'px-4 py-2 text-base truncate',
                           { 'border-b border-secondary-light': !isExpanded },
-                          `w-${gridCol}/24` || ''
+                          getGridWidthClass(gridCol) || ''
                         )}
                         style={{
                           maxWidth: 0,

platform/ui/src/components/WindowLevelMenuItem/WindowLevelMenuItem.jsx

@@ -12,7 +12,7 @@ const WindowLevelMenuItem = ({ title, subtitle, isSelected, index }) => (
       <span className='text-common-bright mr-2 text-base whitespace-no-wrap'>
         {title}
       </span>
-      <span className='flex-1 text-aqua-pale font-thin text-sm whitespace-no-wrap'>
+      <span className='flex-1 text-aqua-pale font-light text-sm whitespace-no-wrap'>
         {subtitle}
       </span>
       <span className='text-primary-active ml-5 text-sm whitespace-no-wrap'>{index + 1}</span>

platform/ui/src/tailwind.css

@@ -1,11 +1,11 @@
+/* IMPORT CUSTOM FONT */
+@import url('https://fonts.googleapis.com/css?family=Lato:100,300,400,500,700&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-/* IMPORT CUSTOM FONT */
-@import url('https://fonts.googleapis.com/css?family=Lato:100,300,400,500,700&display=swap');
-
-/* Trincate 2 lines utility */
+/* Truncate 2 lines utility */
 .truncate-2-lines {
   overflow: hidden;
   display: -webkit-box;

platform/ui/src/utils/getGridWidthClass.js

@@ -0,0 +1,35 @@
+// This is really annoying, but we can't use string concatenation to produce names
+// or the purger will purge stuff we need. This is a lazy workaground.
+// The alternative would be to use the safelist, but then we would have to remember
+// which components which entry in the safelist are used for.
+// https://tailwindcss.com/docs/optimizing-for-production
+export default function getGridWidthClass(gridCol) {
+  const widthClasses = {
+    1: 'w-1-24',
+    2: 'w-2-24',
+    3: 'w-3-24',
+    4: 'w-4-24',
+    5: 'w-5-24',
+    6: 'w-6-24',
+    7: 'w-7-24',
+    8: 'w-8-24',
+    9: 'w-9-24',
+    10: 'w-10-24',
+    11: 'w-11-24',
+    12: 'w-12-24',
+    13: 'w-13-24',
+    14: 'w-14-24',
+    15: 'w-15-24',
+    16: 'w-16-24',
+    17: 'w-17-24',
+    18: 'w-18-24',
+    19: 'w-19-24',
+    20: 'w-20-24',
+    21: 'w-21-24',
+    22: 'w-22-24',
+    23: 'w-23-24',
+    24: 'w-24-24',
+  };
+
+  return widthClasses[gridCol];
+}

platform/ui/tailwind.config.js

@@ -2,8 +2,10 @@ module.exports = {
   prefix: '',
   important: false,
   separator: ':',
-  purge: false, // TODO: unclear how we should purge when using a component library in another app
-  //purge: ['./src/**/*.jsx', './src/**/*.js'],
+  purge: {
+    content: ['./src/**/*.{jsx,js,css}'],
+    safelist: [],
+  },
   theme: {
     screens: {
       sm: '640px',
@@ -749,7 +751,7 @@ module.exports = {
     ],
     borderRadius: ['responsive', 'focus', 'first', 'last'],
     borderStyle: ['responsive', 'focus'],
-    //borderWidth: ['responsive', 'focus', 'first', 'last'],
+    borderWidth: ['responsive', 'focus', 'first', 'last'],
     boxShadow: ['responsive', 'hover', 'focus'],
     boxSizing: ['responsive'],
     cursor: ['responsive'],
@@ -826,4 +828,8 @@ module.exports = {
   },
   corePlugins: {},
   plugins: [],
+  future: {
+    purgeLayersByDefault: true,
+    standardFontWeights: true,
+  },
 };