@cedarjs/cli 8.0.0-canary.3372 → 8.0.0-canary.3376

package/dist/commands/generate/scaffold/scaffold.js

@@ -13,7 +13,7 @@ const builder = (yargs) => {
     description: "Generate test files",
     type: "boolean"
   }).option("tailwind", {
-    description: "Generate TailwindCSS version of scaffold.css (automatically set to `true` if TailwindCSS config exists)",
+    description: "Generate TailwindCSS version of scaffold.css (automatically set to `true` if the web side depends on `tailwindcss`)",
     type: "boolean"
   }).option("rollback", {
     description: "Revert all generator actions if an error occurs",

package/dist/commands/generate/scaffold/scaffoldHandler.js

@@ -97,11 +97,21 @@ const getTemplateStrings = (name, scaffoldPath, nestScaffoldByModel = true) => {
     ...getImportComponentNames(name, scaffoldPath, nestScaffoldByModel)
   };
 };
+const webDependsOnTailwindCSS = () => {
+  const webPackageJsonPath = path.join(getPaths().web.base, "package.json");
+  if (!fs.existsSync(webPackageJsonPath)) {
+    return false;
+  }
+  const { dependencies, devDependencies } = JSON.parse(
+    fs.readFileSync(webPackageJsonPath, "utf-8")
+  );
+  return Boolean(
+    dependencies?.["tailwindcss"] || devDependencies?.["tailwindcss"]
+  );
+};
 const shouldUseTailwindCSS = (flag) => {
   if (flag === void 0) {
-    return fs.existsSync(
-      path.join(getPaths().web.config, "tailwind.config.cjs")
-    );
+    return webDependsOnTailwindCSS();
   } else {
     return flag;
   }

package/dist/commands/generate/scaffold/templates/assets/scaffold.tailwind.css.template

@@ -1,3 +1,9 @@
+/**
+ * Makes your app's Tailwind theme and utilities available to `@apply`
+ * without emitting any of the styles in index.css a second time
+ */
+@reference './index.css';
+
 .rw-scaffold {
   @apply bg-white text-gray-600;
 }
@@ -27,8 +33,7 @@
   @apply mx-4 pb-4;
 }
 .rw-segment {
-  @apply rounded-lg overflow-hidden w-full border border-gray-200;
-  scrollbar-color: theme('colors.zinc.400') transparent;
+  @apply rounded-lg overflow-hidden w-full border border-gray-200 scrollbar-thumb-zinc-400 scrollbar-track-transparent;
 }
 .rw-segment::-webkit-scrollbar {
   height: initial;
@@ -80,7 +85,7 @@
 }
 .rw-cell-error,
 .rw-form-error-wrapper {
-  @apply p-4 bg-red-50 text-red-600 border border-red-100 rounded my-4;
+  @apply p-4 bg-red-50 text-red-600 border border-red-100 rounded-sm my-4;
 }
 .rw-form-error-title {
   @apply m-0 font-semibold;
@@ -89,13 +94,13 @@
   @apply mt-2 list-disc list-inside;
 }
 .rw-button {
-  @apply flex justify-center py-1 px-4 border-0 rounded bg-gray-200 text-gray-500 text-xs font-semibold uppercase tracking-wide leading-loose no-underline cursor-pointer transition duration-100;
+  @apply flex justify-center py-1 px-4 border-0 rounded-sm bg-gray-200 text-gray-500 text-xs font-semibold uppercase tracking-wide leading-loose no-underline cursor-pointer transition duration-100;
 }
 .rw-button:hover {
   @apply bg-gray-500 text-white;
 }
 .rw-button.rw-button-small {
-  @apply text-xs rounded-sm py-1 px-2;
+  @apply text-xs rounded-xs py-1 px-2;
 }
 .rw-button.rw-button-green {
   @apply bg-green-500 text-white;
@@ -134,7 +139,7 @@
   @apply text-red-600;
 }
 .rw-input {
-  @apply block mt-2 w-full p-2 bg-white border border-gray-200 rounded outline-none;
+  @apply block mt-2 w-full p-2 bg-white border border-gray-200 rounded-sm outline-hidden;
 }
 .rw-check-radio-items {
   @apply flex justify-items-center;
@@ -153,7 +158,7 @@
   @apply border-red-600 text-red-600;
 }
 .rw-input-error:focus {
-  @apply border-red-600 outline-none;
+  @apply border-red-600 outline-hidden;
   box-shadow: 0 0 5px #c53030;
 }
 .rw-field-error {

package/dist/commands/setup/ui/libraries/tailwindcssHandler.js

@@ -6,7 +6,6 @@ import { Listr } from "listr2";
 import { terminalLink } from "termi-link";
 import { colors as c } from "@cedarjs/cli-helpers/colors";
 import { formatCedarCommand } from "@cedarjs/cli-helpers/packageManager/display";
-import { runBin } from "@cedarjs/cli-helpers/packageManager/exec";
 import {
   addRootPackages,
   addWorkspacePackages
@@ -14,36 +13,24 @@ import {
 import { recordTelemetryAttributes } from "@cedarjs/cli-helpers/telemetry";
 import { errorTelemetry } from "@cedarjs/telemetry";
 import { getPaths, usingVSCode } from "../../../../lib/index.js";
-const tailwindDirectives = [
-  "@tailwind base;",
-  "@tailwind components;",
-  "@tailwind utilities;"
-];
-const tailwindDirectivesExist = (indexCSS) => tailwindDirectives.every(
-  (tailwindDirective) => indexCSS.includes(tailwindDirective)
-);
-const tailwindImportsAndNotes = [
+import { insertPluginsBeforeCedar } from "../../deploy/helpers/index.js";
+const tailwindImport = "@import 'tailwindcss';";
+const tailwindImportRegExp = /@import\s+['"]tailwindcss['"]/;
+const tailwindImportAndNotes = [
   "/**",
   " * START --- SETUP TAILWINDCSS EDIT",
   " *",
-  ` * \`${formatCedarCommand(["setup", "ui", "tailwindcss"])}\` placed these directives here`,
+  ` * \`${formatCedarCommand(["setup", "ui", "tailwindcss"])}\` placed this import here`,
   " * to inject Tailwind's styles into your CSS.",
   " * For more information, see: https://tailwindcss.com/docs/installation",
   " */",
-  ...tailwindDirectives,
+  tailwindImport,
   "/**",
   " * END --- SETUP TAILWINDCSS EDIT",
   " */\n"
 ];
-const recommendedVSCodeExtensions = [
-  "csstools.postcss",
-  "bradlc.vscode-tailwindcss"
-];
+const recommendedVSCodeExtensions = ["bradlc.vscode-tailwindcss"];
 const recommendationTexts = {
-  "csstools.postcss": terminalLink(
-    "PostCSS Language Support",
-    "https://marketplace.visualstudio.com/items?itemName=csstools.postcss"
-  ),
   "bradlc.vscode-tailwindcss": terminalLink(
     "Tailwind CSS IntelliSense",
     "https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss"
@@ -87,9 +74,8 @@ const handler = async ({
   const rwPaths = getPaths();
   const projectPackages = ["prettier-plugin-tailwindcss@^0.8.0"];
   const webWorkspacePackages = [
-    "postcss",
-    "tailwindcss@^3.4.17",
-    "autoprefixer"
+    "tailwindcss@^4.3.3",
+    "@tailwindcss/vite@^4.3.3"
   ];
   const tasks = new Listr(
     [
@@ -140,62 +126,45 @@ const handler = async ({
         }
       },
       {
-        title: "Configuring PostCSS...",
-        task: () => {
-          const postCSSConfigPath = rwPaths.web.postcss;
-          if (!force && fs.existsSync(postCSSConfigPath)) {
+        title: "Adding the Tailwind CSS plugin to the Vite config...",
+        task: (_ctx, task) => {
+          const viteConfigPath = rwPaths.web.viteConfig;
+          if (!viteConfigPath || !fs.existsSync(viteConfigPath)) {
+            throw new Error("Could not find web/vite.config.{ts,js}");
+          }
+          const viteConfig = fs.readFileSync(viteConfigPath, "utf-8");
+          if (viteConfig.includes("@tailwindcss/vite")) {
+            task.skip("The Tailwind CSS Vite plugin is already configured");
+            return;
+          }
+          const viteConfigWithPlugin = insertPluginsBeforeCedar({
+            content: viteConfig,
+            pluginCodes: ["tailwindcss()"]
+          });
+          if (!viteConfigWithPlugin) {
             throw new Error(
-              "PostCSS config already exists.\nUse --force to override existing config."
+              `Could not find \`cedar()\` in the plugins array in ${viteConfigPath}.
+Add \`import tailwindcss from '@tailwindcss/vite'\` to the top of the file and \`tailwindcss()\` to the plugins array yourself, and then run this command again.`
             );
-          } else {
-            const postCSSConfig = fs.readFileSync(
-              path.join(
-                import.meta.dirname,
-                "../templates/postcss.config.cjs.template"
-              ),
-              "utf-8"
-            );
-            fs.mkdirSync(path.dirname(postCSSConfigPath), { recursive: true });
-            return fs.writeFileSync(postCSSConfigPath, postCSSConfig);
           }
-        }
-      },
-      {
-        title: "Initializing Tailwind CSS...",
-        task: async () => {
-          const tailwindConfigPath = path.join(
-            rwPaths.web.config,
-            "tailwind.config.cjs"
+          const tailwindPluginImport = "import tailwindcss from '@tailwindcss/vite'\n";
+          const importAnchor = /^import .* from ['"]vite['"]/m.exec(viteConfigWithPlugin) ?? /^import /m.exec(viteConfigWithPlugin);
+          const insertAt = importAnchor?.index ?? 0;
+          fs.writeFileSync(
+            viteConfigPath,
+            viteConfigWithPlugin.slice(0, insertAt) + tailwindPluginImport + viteConfigWithPlugin.slice(insertAt)
           );
-          if (fs.existsSync(tailwindConfigPath)) {
-            if (force) {
-              fs.unlinkSync(tailwindConfigPath);
-            } else {
-              throw new Error(
-                "Tailwind CSS config already exists.\nUse --force to override existing config."
-              );
-            }
-          }
-          await runBin("tailwindcss", ["init", tailwindConfigPath], {
-            cwd: rwPaths.web.base
-          });
-          const tailwindConfig = fs.readFileSync(tailwindConfigPath, "utf-8");
-          const newTailwindConfig = 'const { join } = require("node:path");\n\n' + tailwindConfig.replace(
-            "content: []",
-            "content: [join(__dirname, '../src/**/*.{js,jsx,ts,tsx}')]"
-          ).replace("export default {", "module.exports = {");
-          fs.writeFileSync(tailwindConfigPath, newTailwindConfig);
         }
       },
       {
-        title: "Adding directives to index.css...",
+        title: "Adding Tailwind CSS import to index.css...",
         task: (_ctx, task) => {
           const INDEX_CSS_PATH = path.join(rwPaths.web.src, "index.css");
           const indexCSS = fs.readFileSync(INDEX_CSS_PATH, "utf-8");
-          if (tailwindDirectivesExist(indexCSS)) {
-            task.skip("Directives already exist in index.css");
+          if (tailwindImportRegExp.test(indexCSS)) {
+            task.skip("Tailwind CSS import already exists in index.css");
           } else {
-            const newIndexCSS = tailwindImportsAndNotes.join("\n") + indexCSS;
+            const newIndexCSS = tailwindImportAndNotes.join("\n") + indexCSS;
             fs.writeFileSync(INDEX_CSS_PATH, newIndexCSS);
           }
         }
@@ -276,7 +245,9 @@ const handler = async ({
             "activeClassName",
             "errorClassName"
           ];
+          const fileAssociations = { "*.css": "tailwindcss" };
           let newSettingsJson = {
+            ["files.associations"]: fileAssociations,
             ["tailwindCSS.classAttributes"]: classAttributes
           };
           if (fs.existsSync(VS_CODE_SETTINGS_PATH)) {
@@ -294,8 +265,13 @@ const handler = async ({
             const mergedClassAttributes = Array.from(
               /* @__PURE__ */ new Set([...classAttributes, ...originalTwClassAttributesJson])
             );
+            const existingAssociations = originalSettingsJson["files.associations"];
             newSettingsJson = {
               ...originalSettingsJson,
+              ["files.associations"]: {
+                ...existingAssociations && typeof existingAssociations === "object" && !Array.isArray(existingAssociations) ? existingAssociations : {},
+                ...fileAssociations
+              },
               ["tailwindCSS.classAttributes"]: mergedClassAttributes
             };
           }
@@ -306,34 +282,38 @@ const handler = async ({
         }
       },
       {
-        title: "Adding tailwind config entry in prettier...",
+        title: "Adding tailwind stylesheet entry in prettier...",
         task: async (_ctx) => {
           const prettierConfigPath = path.join(
             rwPaths.base,
             "prettier.config.cjs"
           );
           const prettierConfig = fs.readFileSync(prettierConfigPath, "utf-8");
-          const tailwindConfigPath = path.relative(
-            rwPaths.base,
-            path.posix.join(rwPaths.web.config, "tailwind.config.cjs")
-          ).replaceAll("\\", "/");
+          const tailwindStylesheetPath = path.relative(rwPaths.base, path.join(rwPaths.web.src, "index.css")).replaceAll("\\", "/");
+          const tailwindStylesheetEntry = `tailwindStylesheet: './${tailwindStylesheetPath}',`;
           let newPrettierConfig = prettierConfig;
-          if (newPrettierConfig.includes("tailwindConfig: ")) {
-            if (force) {
-              newPrettierConfig = newPrettierConfig.replace(
-                /tailwindConfig: .*(,)?/,
-                `tailwindConfig: './${tailwindConfigPath}',`
+          const stringEntryRegExp = /tailwindStylesheet:\s*(['"`])[^'"`\n]*\1,?/;
+          if (newPrettierConfig.includes("tailwindStylesheet")) {
+            if (!force) {
+              throw new Error(
+                "tailwindStylesheet setting already exists in prettier configuration.\nUse --force to override existing config."
               );
-            } else {
+            }
+            if (!stringEntryRegExp.test(newPrettierConfig)) {
               throw new Error(
-                "tailwindConfig setting already exists in prettier configuration.\nUse --force to override existing config."
+                `Could not update the tailwindStylesheet setting in ${prettierConfigPath}.
+Set it to './${tailwindStylesheetPath}' yourself.`
               );
             }
+            newPrettierConfig = newPrettierConfig.replace(
+              stringEntryRegExp,
+              tailwindStylesheetEntry
+            );
           } else {
             newPrettierConfig = newPrettierConfig.replace(
               /,(\n\s*)(\}\n?)$/,
               `,
-  tailwindConfig: './${tailwindConfigPath}',$1$2`
+  ${tailwindStylesheetEntry}$1$2`
             );
           }
           fs.writeFileSync(prettierConfigPath, newPrettierConfig);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cedarjs/cli",
-  "version": "8.0.0-canary.3372",
+  "version": "8.0.0-canary.3376",
   "description": "The CedarJS Command Line",
   "repository": {
     "type": "git",
@@ -36,17 +36,17 @@
     "@babel/preset-typescript": "7.29.7",
     "@babel/traverse": "7.29.10",
     "@babel/types": "7.29.8",
-    "@cedarjs/api-server": "8.0.0-canary.3372",
-    "@cedarjs/babel-config": "8.0.0-canary.3372",
-    "@cedarjs/cli-helpers": "8.0.0-canary.3372",
-    "@cedarjs/internal": "8.0.0-canary.3372",
-    "@cedarjs/prerender": "8.0.0-canary.3372",
-    "@cedarjs/project-config": "8.0.0-canary.3372",
-    "@cedarjs/structure": "8.0.0-canary.3372",
-    "@cedarjs/telemetry": "8.0.0-canary.3372",
-    "@cedarjs/utils": "8.0.0-canary.3372",
-    "@cedarjs/vite": "8.0.0-canary.3372",
-    "@cedarjs/web-server": "8.0.0-canary.3372",
+    "@cedarjs/api-server": "8.0.0-canary.3376",
+    "@cedarjs/babel-config": "8.0.0-canary.3376",
+    "@cedarjs/cli-helpers": "8.0.0-canary.3376",
+    "@cedarjs/internal": "8.0.0-canary.3376",
+    "@cedarjs/prerender": "8.0.0-canary.3376",
+    "@cedarjs/project-config": "8.0.0-canary.3376",
+    "@cedarjs/structure": "8.0.0-canary.3376",
+    "@cedarjs/telemetry": "8.0.0-canary.3376",
+    "@cedarjs/utils": "8.0.0-canary.3376",
+    "@cedarjs/vite": "8.0.0-canary.3376",
+    "@cedarjs/web-server": "8.0.0-canary.3376",
     "@listr2/prompt-adapter-enquirer": "4.3.3",
     "@opentelemetry/api": "1.9.1",
     "@opentelemetry/core": "2.12.0",
@@ -94,7 +94,7 @@
     "yargs": "17.7.3"
   },
   "devDependencies": {
-    "@cedarjs/framework-tools": "8.0.0-canary.3372",
+    "@cedarjs/framework-tools": "8.0.0-canary.3376",
     "@prisma/dmmf": "7.10.0",
     "@types/archiver": "^7.0.0",
     "memfs": "4.80.0",

package/dist/commands/setup/ui/templates/postcss.config.cjs.template

@@ -1,9 +0,0 @@
-const path = require('path')
-
-module.exports = {
-  plugins: [
-    require('tailwindcss/nesting'),
-    require('tailwindcss')(path.resolve(__dirname, 'tailwind.config.cjs')),
-    require('autoprefixer'),
-  ],
-}