@gxp-dev/tools 2.0.93 → 2.1.0

package/bin/lib/commands/dev.js

@@ -7,9 +7,17 @@
 
 const path = require("path")
 const fs = require("fs")
-const { spawn } = require("child_process")
+const childProcess = require("child_process")
 const shell = require("shelljs")
 const dotenv = require("dotenv")
+
+// Module-private spawn reference so tests can swap in a stub via
+// `setSpawnForTesting`. Production code paths still call the real
+// `child_process.spawn` because the default closes over it.
+let _spawn = childProcess.spawn
+function setSpawnForTesting(fn) {
+	_spawn = fn || childProcess.spawn
+}
 const {
 	findProjectRoot,
 	resolveGxPaths,
@@ -53,7 +61,7 @@ function createLogger(jsonMode) {
  * Returns the child process.
  */
 function spawnService(name, command, logger) {
-	const child = spawn(command, {
+	const child = _spawn(command, {
 		shell: true,
 		stdio: ["ignore", "pipe", "pipe"],
 		env: process.env,
@@ -289,8 +297,9 @@ function devCommand(argv) {
 		logger.info("🎭 Mock API will be enabled")
 	}
 
-	// Socket server starts by default unless --no-socket is passed
-	const noSocket = argv["no-socket"]
+	// Socket server starts by default unless --no-socket is passed. See
+	// shouldDisableSocket() for the yargs-negation quirk it papers over.
+	const noSocket = shouldDisableSocket(argv)
 	let serverJsPath = ""
 	if (!noSocket) {
 		// Check for local server.js first, then runtime directory
@@ -340,9 +349,10 @@ function devCommand(argv) {
 	if (!process.env.NODE_LOG_LEVEL) {
 		process.env.NODE_LOG_LEVEL = argv["node-log-level"] || "info"
 	}
-	if (!process.env.NODE_PORT) {
-		process.env.NODE_PORT = String(finalPort)
-	}
+	// NODE_PORT is the source of truth for the socket server (server.cjs reads
+	// process.env). Always set it to the resolved finalPort so that a CLI
+	// `--port` overrides anything that dotenv loaded from .env earlier.
+	process.env.NODE_PORT = String(finalPort)
 	if (!process.env.COMPONENT_PATH) {
 		process.env.COMPONENT_PATH = argv["component-path"] || "./src/Plugin.vue"
 	}
@@ -401,12 +411,15 @@ function devCommand(argv) {
 	// Normalize path separators to forward slashes for cross-platform shell compatibility
 	const normalizedViteConfigPath = viteConfigPath.replace(/\\/g, "/")
 
-	// Build the canonical service list (raw commands, no concurrently wrapping)
+	// Build the canonical service list (raw commands, no concurrently wrapping).
+	// Pass --port to vite directly: vite's loadEnv() only reads .env files —
+	// it does NOT inherit from process.env — so setting NODE_PORT above isn't
+	// enough on its own. The CLI flag wins over the config every time.
 	const services = []
 	services.push({
 		name: "VITE",
 		color: "cyan",
-		command: `npx vite dev --config "${normalizedViteConfigPath}"`,
+		command: `npx vite dev --config "${normalizedViteConfigPath}" --port ${finalPort}`,
 	})
 
 	if (serverJsPath) {
@@ -455,6 +468,23 @@ function devCommand(argv) {
 	shell.exec(command)
 }
 
+/**
+ * Pure helper exposed for unit testing the `--no-socket` flag-parsing fix.
+ * yargs interprets `--no-socket` from the CLI as `argv.socket = false`
+ * (boolean negation), NOT as `argv["no-socket"] = true`. We accept either
+ * form so the flag behaves the way the help text advertises.
+ */
+function shouldDisableSocket(argv) {
+	return argv["no-socket"] === true || argv.socket === false
+}
+
 module.exports = {
 	devCommand,
+	// Exposed for unit testing. These are pure-ish helpers that drive the
+	// NDJSON logger and child-process orchestration used by `gxdev dev`.
+	createLogger,
+	spawnService,
+	runServicesJson,
+	shouldDisableSocket,
+	setSpawnForTesting,
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@gxp-dev/tools",
-	"version": "2.0.93",
+	"version": "2.1.0",
 	"description": "Dev tools to create platform plugins",
 	"type": "commonjs",
 	"publishConfig": {
@@ -20,8 +20,10 @@
 	"scripts": {
 		"prepare": "git config core.hooksPath .githooks || true",
 		"test": "vitest run",
+		"test:run": "vitest run",
 		"test:watch": "vitest",
 		"test:coverage": "vitest run --coverage",
+		"test:e2e": "RUN_CLI_E2E=1 vitest run --config vitest.e2e.config.js",
 		"dev": "concurrently 'vite dev' 'nodemon config/server.js'",
 		"dev-app": "vite dev",
 		"ext:firefox": "web-ext run --source-dir browser-extensions/firefox",

package/runtime/vite.config.js

@@ -123,16 +123,28 @@ function hasLocalFile(fileName) {
 /**
  * Try to load the `@tailwindcss/vite` plugin from the project's node_modules.
  *
- * Tailwind 4 ships as a dev-only base CSS framework — `tailwindcss` and
- * `@tailwindcss/vite` are declared in the project's devDependencies and
- * imported via `@import "tailwindcss";` inside the theme-layouts (which are
- * dev-only; the production build entry is `src/Plugin.vue`). Loading the
- * Vite plugin here lets that import generate utility CSS without each
- * project having to wire it up in `vite.extend.js`. If the user has removed
- * Tailwind we silently skip — the layouts work without it, just without
- * Tailwind's default styling.
+ * 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() {
+async function loadTailwindPlugin(command) {
+	if (command !== "serve") {
+		return null
+	}
 	try {
 		const mod = await import("@tailwindcss/vite")
 		const plugin = mod.default ?? mod
@@ -438,9 +450,10 @@ export default defineConfig(async (ctx) => {
 	const useHttps = getHttpsConfig(env) !== undefined
 
 	// Load Tailwind 4 Vite plugin from the project's node_modules if present.
-	const tailwindPlugin = await loadTailwindPlugin()
+	// Dev-only — production builds skip it (see loadTailwindPlugin docs).
+	const tailwindPlugin = await loadTailwindPlugin(ctx.command)
 	if (tailwindPlugin) {
-		console.log("🎨 Tailwind: @tailwindcss/vite plugin loaded")
+		console.log("🎨 Tailwind: @tailwindcss/vite plugin loaded (dev)")
 	}
 
 	// Get API proxy target for non-mock environments