Merge pull request #52 from aylonmuramatsu/master

feat: add tailwind v4 to TS

Author: Mortaro

index.js

@@ -28,13 +28,17 @@ inquirer.prompt([
       i18n.template.blank,
       i18n.template.blankTs,
       i18n.template.tawild,
+      i18n.template.tawildv4,
       i18n.template.tawildTs,
+      i18n.template.tawildv4Ts,
     ],
   },
 ])
   .then((answers) => {
     let isTS = false;
     let isTailwind = false;
+    let tailwindVersion = 'v3'
+
 
     switch (answers.template) {
       case i18n.template.blankTs:
@@ -45,13 +49,25 @@ inquirer.prompt([
         isTailwind = true;
         break;
 
+      case i18n.template.tawildv4:
+          isTailwind = true;
+          tailwindVersion = "v4";
+          break;
+
       case i18n.template.tawildTs:
         isTS = true;
         isTailwind = true;
+        tailwindVersion = 'v3'
+        break;
+
+      case i18n.template.tawildv4Ts:
+        isTS = true;
+        isTailwind = true;
+        tailwindVersion = 'v4';
         break;
     }
 
     projectName = (projectName || answers.projectName).replace(/ /g, '_').trim();
 
-    Nulla.tryRun(projectName, isTS, isTailwind);
+    Nulla.tryRun(projectName, isTS, isTailwind, tailwindVersion);
   });

src/locales/en-US.json

@@ -5,7 +5,9 @@
     "blank": "Blank (JavaScript)",
     "blankTs": "Blank (TypeScript) - blank app with TypeScript enabled",
     "tawild": "Tailwind (JavaScript)",
-    "tawildTs": "Tailwind (TypeScript) - Tailwind app with TypeScript enabled"
+    "tawildv4": "Tailwind (Javascript) - Tailwind v4 app",
+    "tawildTs": "Tailwind v3 (TypeScript) - Tailwind v3 app with TypeScript enabled",
+    "tawildv4Ts": "Tailwind v4 (TypeScript) - Tailwind v4 app with TypeScript enabled"
   },
   "error": {
     "default": "error:",

src/locales/pt-BR.json

@@ -5,7 +5,9 @@
     "blank": "Blank (JavaScript)",
     "blankTs": "Blank (TypeScript) - App em branco com TypeScript habilitado",
     "tawild": "Tailwind (JavaScript)",
-    "tawildTs": "Tailwind (TypeScript) - App Tailwind com TypeScript habilitado"
+    "tawildv4": "Tailwind (Javascript) - App Tailwind v4",
+    "tawildTs": "Tailwind v3 (TypeScript) - App Tailwind v3 com TypeScript habilitado",
+    "tawildv4Ts": "Tailwind v4 (TypeScript) - App Tailwind v4 com TypeScript habilitado"
   },
   "error": {
     "default": "erro:",

src/modules.js

@@ -3,6 +3,7 @@
 const fs = require('fs');
 const path = require('path');
 const packageFolder = __dirname;
+const whitelist = ['package', 'webpack', 'tailwind.config']
 
 let lang = Intl.DateTimeFormat().resolvedOptions().locale;
 lang = (lang === 'pt-BR' || lang === 'en-US')
@@ -72,7 +73,7 @@ const replaceLangs = (content) => {
   return content;
 };
 
-Nulla.run = (names, isTS, isTailwind) => {
+Nulla.run = (names, isTS, isTailwind, tailwindVersion = 'v3') => {
   const { projectSlug, projectName } = names;
   const projectPath = path.join(process.cwd(), projectSlug);
 
@@ -92,23 +93,27 @@ Nulla.run = (names, isTS, isTailwind) => {
   // Tailwind check, remove all default files and replace them with Tailwind defaults
   if (isTailwind)
     for (const file of Files.files) {
-      if (file.includes(".tailwind")) {
+      if (file.includes(".tailwind") && tailwindVersion === 'v3' && !file.includes('-v4')) {
         tailwindReplace.push(file.replace(".tailwind", ""))
       }
+      else if(file.includes('.tailwind') && tailwindVersion === 'v4' && (file.includes('-v4') ||!whitelist.some(x => file.includes(x))) )
+        tailwindReplace.push(file.replace(".tailwind-v4", "").replace(".tailwind", ""))
     }
-
+    
   for (const file of Files.files) {
     if (file.match(new RegExp(`.${isTS ? 'js' : 'ts'}x?$`)) && file.indexOf('.config.') === -1) continue;
     if (!isTS && /tsconfig.json/.test(file)) continue;
 
     // Tailwind replacer
     if (isTailwind) {
-
+      if(tailwindVersion === 'v3' && file.includes('-v4')) continue;
+      if(tailwindVersion === 'v4' && whitelist.some(x => file.includes(x) && !file.includes('-v4')) ) continue;
       // Check if the file is going to be replaced by tailwind file
       if (tailwindReplace.includes(file)) continue;
 
       // Do not include css files unless they're supposed to be included
-      if (file.endsWith(".css") && !file.includes("tailwind.")) continue;
+      if (file.endsWith(".css") && !file.includes("tailwind.") && tailwindVersion === 'v3') continue;
+      if(file.endsWith(".css") && tailwindVersion === 'v4' && !file.includes('-v4')) continue
 
     } else if (file.includes("tailwind")) continue; // If it is not tailwind, do not add tailwind files to the bundle
 
@@ -118,7 +123,7 @@ Nulla.run = (names, isTS, isTailwind) => {
     );
     content = Nulla.contentReplacer(content, 'NAME', projectName);
     content = Nulla.contentReplacer(content, 'SLUG', projectSlug);
-    const target = path.join(projectPath, file.replace('_', '.').replace('.tailwind', ''));
+    const target = path.join(projectPath, file.replace('_', '.').replace('.tailwind-v4', '').replace('.tailwind', '').replace("-v4", ""));
     content = Nulla.contentReplacer(content, 'SRC', srcFolder);
     content = Nulla.contentReplacer(content, 'LANG', lang);
     content = replaceLangs(content);
@@ -181,10 +186,10 @@ Nulla.errorHandler = (e) => {
   }
 };
 
-Nulla.tryRun = (name, isTS, isTailwind) => {
+Nulla.tryRun = (name, isTS, isTailwind, tailwindVersion) => {
   try {
     const names = Nulla.storeNames(name);
-    Nulla.run(names, isTS, isTailwind);
+    Nulla.run(names, isTS, isTailwind, tailwindVersion);
   } catch (e) {
     Nulla.errorHandler(e);
   }

src/template/package.tailwind-v4.json

@@ -0,0 +1,18 @@
+{
+  "name": ":!PROJECT_SLUG!:",
+  "version": "0.0.1",
+  "description": "",
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "nullstack": "~0.20.0",
+    "tailwindcss": "^4.1.13",
+    "postcss-loader": "^8.2.0",
+    "postcss": "^8.5.6",
+    "@tailwindcss/postcss": "^4.1.13"
+  },
+  "scripts": {
+    "start": "npx nullstack start",
+    "build": "npx nullstack build"
+  }
+}

src/template/tailwind-v4.css

@@ -0,0 +1 @@
+@import "tailwindcss";

src/template/webpack.config.tailwind-v4.js

@@ -0,0 +1,40 @@
+const [server, client] = require('nullstack/webpack.config')
+
+function customClient(...args) {
+  const config = client(...args)
+  const rule = config.module.rules.find((rule) => rule.test && rule.test.test('.css'))
+  rule.use.push({
+    loader: require.resolve('postcss-loader'),
+    options: {
+      postcssOptions: {
+        plugins: {
+          '@tailwindcss/postcss': {},
+        },
+      },
+    },
+  })
+
+  // Configurar minimizer CSS mais compatível para build
+  if (config.optimization && config.optimization.minimizer) {
+    config.optimization.minimizer = config.optimization.minimizer.map((minimizer) => {
+      if (minimizer.constructor.name === 'CssMinimizerPlugin') {
+        const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
+        return new CssMinimizerPlugin({
+          minimizerOptions: {
+            preset: [
+              'default',
+              {
+                discardComments: { removeAll: true },
+              },
+            ],
+          },
+        })
+      }
+      return minimizer
+    })
+  }
+
+  return config
+}
+
+module.exports = [server, customClient]