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

Author: andresz1

packages/sui-bundler/package.json

@@ -46,10 +46,11 @@
     "stream-http": "3.2.0",
     "strip-ansi": "6.0.1",
     "style-loader": "3.3.1",
+    "tailwindcss": "3.2.7",
     "url": "0.11.0",
     "webpack": "5.74.0",
     "webpack-dev-server": "4.10.0",
     "webpack-manifest-plugin": "5.0.0",
     "webpack-node-externals": "3.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.js'
@@ -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

@@ -9,7 +9,8 @@ const {
   MAIN_ENTRY_POINT,
   config,
   cleanList,
-  when
+  when,
+  isTailwindEnabled
 } = require('./shared/index.js')
 const definePlugin = require('./shared/define.js')
 const manifestLoaderRules = require('./shared/module-rules-manifest-loader.js')
@@ -99,6 +100,9 @@ const webpackConfig = {
             options: {
               postcssOptions: {
                 plugins: [
+                  ...(isTailwindEnabled()
+                    ? [require('tailwindcss').default()]
+                    : []),
                   require('autoprefixer')({
                     overrideBrowserslist: config.targets
                   })