feat(packages/sui-bundler): add tailwind support

Author: andresz1

packages/sui-bundler/package.json

@@ -54,6 +54,7 @@
     "strip-ansi": "6.0.1",
     "style-loader": "3.3.4",
     "swc-loader": "0.2.6",
+    "tailwindcss": "3.4.14",
     "url": "0.11.0",
     "webpack-dev-server": "5.0.4",
     "webpack-manifest-plugin": "5.0.0",

packages/sui-bundler/shared/index.js

@@ -1,3 +1,4 @@
+const fs = require('fs')
 const {config} = require('./config.js')
 
 exports.MAIN_ENTRY_POINT = './app'
@@ -7,6 +8,9 @@ exports.cleanList = list => list.filter(Boolean)
 
 exports.when = (check, getValue) => (check ? getValue() : false)
 
+exports.isTailwindEnabled = () =>
+  fs.existsSync(`${process.cwd()}/tailwind.config.js`)
+
 exports.envVars = (env = []) =>
   env.reduce(
     (acc, variable) => {

packages/sui-bundler/shared/module-rules-sass.js

@@ -1,6 +1,6 @@
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 
-const {cleanList, config, when} = require('./index')
+const {cleanList, config, when, isTailwindEnabled} = require('./index')
 
 module.exports = {
   test: /(\.css|\.scss)$/,
@@ -18,6 +18,7 @@ module.exports = {
       options: {
         postcssOptions: {
           plugins: [
+            ...(isTailwindEnabled() ? [require('tailwindcss').default()] : []),
             require('autoprefixer')({
               overrideBrowserslist: config.targets
             })

packages/sui-bundler/webpack.config.dev.js

@@ -5,7 +5,7 @@ const webpack = require('webpack')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')
 
-const {envVars, MAIN_ENTRY_POINT, config, cleanList, when} = require('./shared/index.js')
+const {envVars, MAIN_ENTRY_POINT, config, cleanList, when, isTailwindEnabled} = require('./shared/index.js')
 const definePlugin = require('./shared/define.js')
 const manifestLoaderRules = require('./shared/module-rules-manifest-loader.js')
 const {aliasFromConfig, defaultAlias} = require('./shared/resolve-alias.js')
@@ -104,6 +104,9 @@ const webpackConfig = {
             options: {
               postcssOptions: {
                 plugins: [
+                  ...(isTailwindEnabled()
+                    ? [require('tailwindcss').default()]
+                    : []),
                   require('autoprefixer')({
                     overrideBrowserslist: config.targets
                   })