@gxp-dev/tools 2.0.92 → 2.0.94

package/bin/lib/commands/init.js

@@ -29,6 +29,7 @@ const {
 	safeCopyFile,
 	createPackageJson,
 	updateAppManifest,
+	ensureBaseFramework,
 	installDependencies,
 	updateExistingProject,
 	ensureMkcertInstalled,
@@ -721,6 +722,7 @@ async function initCommand(argv) {
 			console.log("Updating existing project...")
 			updateExistingProject(projectPath)
 			copyBundleFiles(projectPath, paths, false)
+			ensureBaseFramework(projectPath)
 			console.log("✅ Project updated!")
 			return
 		}

package/bin/lib/constants.js

@@ -8,6 +8,12 @@
 const isWin = process.platform === "win32"
 const exportCmd = isWin ? "set" : "export"
 
+// Base CSS framework loaded by theme-layouts during development.
+// Versioned here so the same value lands in package.json devDependencies
+// AND the app-manifest's baseFramework field (platform reads the manifest
+// to know which CSS framework to provide for the live plugin).
+const TAILWIND_VERSION = "^4.3.0"
+
 // Required dependencies for GxP projects
 const REQUIRED_DEPENDENCIES = {
 	dotenv: "^16.4.5",
@@ -23,8 +29,12 @@ const REQUIRED_DEV_DEPENDENCIES = {
 	vitest: "^4.1.5",
 	"@vue/test-utils": "^2.4.6",
 	"happy-dom": "^15.11.0",
+	tailwindcss: TAILWIND_VERSION,
+	"@tailwindcss/vite": TAILWIND_VERSION,
 }
 
+const BASE_FRAMEWORK = `tailwindcss@${TAILWIND_VERSION}`
+
 // Default scripts for package.json
 const DEFAULT_SCRIPTS = {
 	dev: "gxdev dev --cli",
@@ -131,4 +141,6 @@ module.exports = {
 	DEFAULT_PORTS,
 	PACKAGE_NAME,
 	ENVIRONMENT_URLS,
+	TAILWIND_VERSION,
+	BASE_FRAMEWORK,
 }

package/bin/lib/utils/files.js

@@ -11,6 +11,7 @@ const {
 	REQUIRED_DEPENDENCIES,
 	REQUIRED_DEV_DEPENDENCIES,
 	DEFAULT_SCRIPTS,
+	BASE_FRAMEWORK,
 } = require("../constants")
 const { loadGlobalConfig } = require("./paths")
 
@@ -89,6 +90,9 @@ function updateAppManifest(projectPath, projectName, description = "") {
 			manifest.description = `GxP Plugin: ${projectName}`
 		}
 
+		// Tell the platform which base CSS framework the layouts load.
+		manifest.baseFramework = BASE_FRAMEWORK
+
 		// Update strings with project name
 		if (manifest.strings && manifest.strings.default) {
 			manifest.strings.default.welcome_text = `Welcome to ${projectName}`
@@ -101,6 +105,33 @@ function updateAppManifest(projectPath, projectName, description = "") {
 	}
 }
 
+/**
+ * Ensures app-manifest.json has the current baseFramework value.
+ * Used during existing-project updates where the manifest file is not overwritten.
+ * @param {string} projectPath - Path to project directory
+ */
+function ensureBaseFramework(projectPath) {
+	const manifestPath = path.join(projectPath, "app-manifest.json")
+	if (!fs.existsSync(manifestPath)) {
+		return
+	}
+
+	try {
+		const manifest = JSON.parse(fs.readFileSync(manifestPath, "utf-8"))
+		if (manifest.baseFramework === BASE_FRAMEWORK) {
+			return
+		}
+		manifest.baseFramework = BASE_FRAMEWORK
+		fs.writeFileSync(manifestPath, JSON.stringify(manifest, null, "\t"))
+		console.log(`✓ Set baseFramework in app-manifest.json (${BASE_FRAMEWORK})`)
+	} catch (error) {
+		console.warn(
+			"⚠ Could not set baseFramework in app-manifest.json:",
+			error.message,
+		)
+	}
+}
+
 /**
  * Installs npm dependencies
  */
@@ -244,6 +275,7 @@ module.exports = {
 	safeCopyFile,
 	createPackageJson,
 	updateAppManifest,
+	ensureBaseFramework,
 	installDependencies,
 	updateExistingProject,
 	isImageMagickInstalled,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@gxp-dev/tools",
-	"version": "2.0.92",
+	"version": "2.0.94",
 	"description": "Dev tools to create platform plugins",
 	"type": "commonjs",
 	"publishConfig": {

package/runtime/stores/gxpPortalConfigStore.js

@@ -47,7 +47,7 @@ function getApiConfig() {
 	const projectId = import.meta.env.VITE_API_PROJECT_ID || ""
 	const useHttps = import.meta.env.VITE_USE_HTTPS !== "false"
 	const nodePort = import.meta.env.VITE_NODE_PORT || "3060"
-	const mockPort = import.meta.env.VITE_SOCKET_IO_PORT || "3061"
+	const mockPort = import.meta.env.VITE_SOCKET_IO_PORT || "3069"
 
 	// Check if we're in development mode (Vite dev server)
 	const isDev = import.meta.env.DEV

package/runtime/vite.config.js

@@ -120,6 +120,40 @@ function hasLocalFile(fileName) {
  * concatenated, objects (resolve.alias, define, etc.) are merged key-by-key,
  * primitives are overwritten.
  */
+/**
+ * Try to load the `@tailwindcss/vite` plugin from the project's node_modules.
+ *
+ * Tailwind 4 is a DEV-ONLY base CSS framework here — declared in the project's
+ * devDependencies and imported via `@import "tailwindcss";` inside the
+ * theme-layouts. We deliberately do not run it during `vite build`:
+ *
+ *   1. The layouts aren't part of the production build (entry is
+ *      `src/Plugin.vue`), so there's no `@import "tailwindcss"` reaching the
+ *      build graph and the generated utilities would have nowhere to live.
+ *   2. The plugin scans the whole project (including `node_modules`) for
+ *      candidate class names. `@gxp-dev/uikit` ships compiled Vue files
+ *      containing arbitrary-value classes like
+ *      `bg-[var(--keyboard_key_active_background_color,var(--primary))]`,
+ *      which Tailwind 4 lowers to CSS with spaces in the var name — invalid
+ *      CSS that breaks `lightningcss` minification at build time.
+ *
+ * In dev (`command === "serve"`) we load it; in build we skip and let the
+ * platform supply Tailwind at runtime (per `app-manifest.json.baseFramework`).
+ * Silently no-ops if the user has uninstalled Tailwind.
+ */
+async function loadTailwindPlugin(command) {
+	if (command !== "serve") {
+		return null
+	}
+	try {
+		const mod = await import("@tailwindcss/vite")
+		const plugin = mod.default ?? mod
+		return typeof plugin === "function" ? plugin() : null
+	} catch {
+		return null
+	}
+}
+
 async function loadExtensionConfig(ctx, runtimeConfig) {
 	const candidates = ["vite.extend.js", "vite.extend.mjs"]
 	for (const name of candidates) {
@@ -415,6 +449,13 @@ export default defineConfig(async (ctx) => {
 	// Determine if HTTPS is enabled
 	const useHttps = getHttpsConfig(env) !== undefined
 
+	// Load Tailwind 4 Vite plugin from the project's node_modules if present.
+	// Dev-only — production builds skip it (see loadTailwindPlugin docs).
+	const tailwindPlugin = await loadTailwindPlugin(ctx.command)
+	if (tailwindPlugin) {
+		console.log("🎨 Tailwind: @tailwindcss/vite plugin loaded (dev)")
+	}
+
 	// Get API proxy target for non-mock environments
 	const apiProxyTarget = getApiProxyTarget(env)
 	if (apiProxyTarget) {
@@ -448,6 +489,8 @@ export default defineConfig(async (ctx) => {
 		},
 		plugins: [
 			runtimeFilesPlugin,
+			// Tailwind 4 Vite plugin (no-op if @tailwindcss/vite isn't installed).
+			...((tailwindPlugin && [tailwindPlugin]) || []),
 			// Source tracker must run BEFORE vue() to transform templates before compilation
 			...(useSourceTracker ? [gxpSourceTrackerPlugin()] : []),
 			vue(),

package/template/app-manifest.json

@@ -4,6 +4,7 @@
 	"description": "GxToolkit Plugin",
 	"manifest_version": 3,
 	"asset_dir": "/src/public",
+	"baseFramework": "tailwindcss@^4.3.0",
 	"configurationFile": "configuration.json",
 	"appInstructionsFile": "app-instructions.md",
 	"defaultStylingFile": "default-styling.css",

package/template/env.example

@@ -24,7 +24,7 @@ API_ENV=mock
 # Development server configuration
 NODE_PORT=3060
 CLIENT_PORT=3060
-SOCKET_IO_PORT=3061
+SOCKET_IO_PORT=3069
 
 # Logging configuration
 NODE_LOG_LEVEL=info

package/template/theme-layouts/PrivateLayout.vue

@@ -2,6 +2,16 @@
 	<slot />
 </template>
 
+<!--
+	Tailwind base/utilities for development only. The layouts wrap the plugin in
+	the dev runtime but are NOT part of the production build (build entry is
+	src/Plugin.vue), so this CSS never ships in dist/. Remove this block if you
+	don't want Tailwind defaults applied while developing.
+-->
+<style>
+@import "tailwindcss";
+</style>
+
 <style scoped></style>
 
 <script setup>

package/template/theme-layouts/PublicLayout.vue

@@ -2,6 +2,16 @@
 	<slot />
 </template>
 
+<!--
+	Tailwind base/utilities for development only. The layouts wrap the plugin in
+	the dev runtime but are NOT part of the production build (build entry is
+	src/Plugin.vue), so this CSS never ships in dist/. Remove this block if you
+	don't want Tailwind defaults applied while developing.
+-->
+<style>
+@import "tailwindcss";
+</style>
+
 <style scoped></style>
 
 <script setup>

package/template/theme-layouts/SystemLayout.vue

@@ -2,6 +2,16 @@
 	<slot />
 </template>
 
+<!--
+	Tailwind base/utilities for development only. The layouts wrap the plugin in
+	the dev runtime but are NOT part of the production build (build entry is
+	src/Plugin.vue), so this CSS never ships in dist/. Remove this block if you
+	don't want Tailwind defaults applied while developing.
+-->
+<style>
+@import "tailwindcss";
+</style>
+
 <style scoped></style>
 
 <script setup>