fix: build tailwind with rollup in TS (#44713)

* fix: build tailwind with rollup in TS

* Update tools/ui-components/package.json

Co-authored-by: ahmad abdolsaheb <home@mac-16.local>

tools/ui-components/package.json

@@ -30,6 +30,7 @@
     "@rollup/plugin-babel": "5.3.0",
     "@rollup/plugin-commonjs": "19.0.2",
     "@rollup/plugin-node-resolve": "13.1.3",
+    "@rollup/plugin-typescript": "8.3.0",
     "@storybook/addon-actions": "6.4.12",
     "@storybook/addon-docs": "6.4.12",
     "@storybook/addon-essentials": "6.4.12",

tools/ui-components/rollup.config.js

@@ -1,13 +1,14 @@
 import babel from '@rollup/plugin-babel';
 import commonjs from '@rollup/plugin-commonjs';
-import { nodeResolve } from '@rollup/plugin-node-resolve';
+import typescript from '@rollup/plugin-typescript';
 import postcss from 'rollup-plugin-postcss';
 import { terser } from 'rollup-plugin-terser';
+import resolve from '@rollup/plugin-node-resolve';
 
 const production = process.env.NODE_ENV !== 'development';
 
 const config = {
-  input: 'src/index.js',
+  input: 'src/index.ts',
   output: [
     {
       file: 'dist/bundle.js',
@@ -25,8 +26,9 @@ const config = {
     }
   ],
   plugins: [
-    nodeResolve(),
     postcss(),
+    resolve(),
+    typescript({ sourceMap: false }),
     babel({ babelHelpers: 'bundled' }),
     commonjs(),
     production && terser()

tools/ui-components/src/index.ts

@@ -1,3 +1,4 @@
 // Use this file as the entry point for component export
+import './global.css';
 export { Button } from './button';
 export { Alert } from './alert';

tools/ui-components/tailwind.config.js

@@ -1,5 +1,10 @@
 module.exports = {
-  purge: ['./src/**/*.html', './src/**/*.js'],
+  purge: [
+    './src/**/*.html',
+    './src/**/*.js',
+    './src/**/*.ts',
+    './src/**/*.tsx'
+  ],
   darkMode: 'class',
   theme: {
     colors: {