CSS Prefix Added

assets/css/style.css

@@ -1,3 +1,5 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+.s-whmcs {
+    @tailwind base;
+    @tailwind components;
+    @tailwind utilities;
+}

build.js

@@ -0,0 +1,65 @@
+const postcss = require('postcss');
+const postcssImport = require('postcss-import');
+const postcssNested = require('postcss-nested');
+const tailwindcss = require('tailwindcss');
+const autoprefixer = require('autoprefixer');
+const cssnano =  require('cssnano');
+const fs = require('fs');
+const chokidar = require('chokidar');
+
+const inputFile = './assets/css/style.css';
+const outputFile = './assets/css/style.min.css';
+const templatesFolder = './templates'; // Update with your templates folder path
+
+const plugins = [
+  postcssImport,
+  postcssNested,
+  tailwindcss,
+  autoprefixer,
+  cssnano
+];
+
+const processCSS = async () => {
+  try {
+    const css = fs.readFileSync(inputFile, 'utf8');
+
+    const result = await postcss(plugins).process(css, {
+      from: inputFile,
+      to: outputFile,
+      map: { inline: false },
+    });
+
+    fs.writeFileSync(outputFile, result.css);
+
+    console.log('CSS build completed successfully.');
+  } catch (error) {
+    console.error('Error building CSS:', error);
+  }
+};
+
+// Function to watch for CSS file changes
+const watchCSS = () => {
+  console.log('Watching for CSS file changes...');
+  chokidar.watch(inputFile).on('change', () => {
+    console.log('CSS file changed. Rebuilding...');
+    processCSS();
+  });
+};
+
+// Function to watch for template file changes
+const watchTemplates = () => {
+  console.log('Watching for template file changes...');
+  chokidar.watch(templatesFolder).on('change', () => {
+    console.log('Template file changed. Rebuilding CSS...');
+    processCSS();
+  });
+};
+
+// Start the initial CSS build
+processCSS();
+
+// Start watching for changes in watch mode
+if (process.argv.includes('--watch')) {
+  watchCSS();
+  watchTemplates(); // Add this line to watch templates folder
+}

package.json

@@ -3,8 +3,8 @@
   "module": "index.ts",
   "type": "module",
   "scripts": {
-    "build": "tailwindcss -i ./assets/css/style.css -o ./assets/css/style.min.css --minify",
-    "watch": "tailwindcss -i ./assets/css/style.css -o ./assets/css/style.min.css --watch --minify"
+    "build": "node build.js",
+    "watch": "node build.js --watch"
   },
   "devDependencies": {
     "bun-types": "latest"
@@ -13,6 +13,12 @@
     "typescript": "^5.0.0"
   },
   "dependencies": {
+    "autoprefixer": "^10.4.16",
+    "chokidar": "^3.5.3",
+    "cssnano": "^6.0.1",
+    "postcss": "^8.4.31",
+    "postcss-import": "^15.1.0",
+    "postcss-nested": "^6.0.1",
     "tailwindcss": "^3.3.5"
   }
 }

postcss.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+    plugins: {
+      'postcss-import': {},
+      'postcss-nested': {},
+      'tailwindcss': {},
+      'autoprefixer': {},
+      'cssnano': {}
+    }
+  };

tailwind.config.js

@@ -1,5 +1,8 @@
 module.exports = {
     content: ["./templates/**/*.{tpl,js}"],
+    // corePlugins: {
+    //     preflight: false,
+    // },
     theme: {
         extend: {},
     },

templates/client.tpl

@@ -1,6 +1,6 @@
 <link href="modules/servers/scalewithus/assets/css/style.min.css" rel="stylesheet">
 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">
-<div class="text-left bg-white">
+<div class="text-left bg-white s-whmcs">
     <div class="p-4 bg-gray-300">
         <h2 class="font-semibold text-md mb-3">Service Info</h2>
         <div class="text-gray-700">