@nx/next 20.5.0-beta.4 → 20.5.0-beta.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/next",
-  "version": "20.5.0-beta.4",
+  "version": "20.5.0-beta.5",
   "private": false,
   "description": "The Next.js plugin for Nx contains executors and generators for managing Next.js applications and libraries within an Nx workspace. It provides:\n\n\n- Scaffolding for creating, building, serving, linting, and testing Next.js applications.\n\n- Integration with building, serving, and exporting a Next.js application.\n\n- Integration with React libraries within the workspace. \n\nWhen using Next.js in Nx, you get the out-of-the-box support for TypeScript, Playwright, Cypress, and Jest. No need to configure anything: watch mode, source maps, and typings just work.",
   "repository": {
@@ -35,7 +35,7 @@
     "next": ">=14.0.0"
   },
   "dependencies": {
-    "@nx/devkit": "20.5.0-beta.4",
+    "@nx/devkit": "20.5.0-beta.5",
     "@babel/plugin-proposal-decorators": "^7.22.7",
     "@svgr/webpack": "^8.1.0",
     "copy-webpack-plugin": "^10.2.4",
@@ -44,11 +44,11 @@
     "semver": "^7.5.3",
     "tslib": "^2.3.0",
     "webpack-merge": "^5.8.0",
-    "@nx/js": "20.5.0-beta.4",
-    "@nx/eslint": "20.5.0-beta.4",
-    "@nx/react": "20.5.0-beta.4",
-    "@nx/web": "20.5.0-beta.4",
-    "@nx/webpack": "20.5.0-beta.4",
+    "@nx/js": "20.5.0-beta.5",
+    "@nx/eslint": "20.5.0-beta.5",
+    "@nx/react": "20.5.0-beta.5",
+    "@nx/web": "20.5.0-beta.5",
+    "@nx/webpack": "20.5.0-beta.5",
     "@phenomnomnominal/tsquery": "~5.0.1"
   },
   "publishConfig": {

package/src/generators/application/application.js

@@ -4,7 +4,7 @@ exports.applicationGenerator = applicationGenerator;
 exports.applicationGeneratorInternal = applicationGeneratorInternal;
 const devkit_1 = require("@nx/devkit");
 const js_1 = require("@nx/js");
-const react_1 = require("@nx/react");
+const setup_tailwind_1 = require("../setup-tailwind/setup-tailwind");
 const versions_1 = require("@nx/react/src/utils/versions");
 const version_utils_1 = require("@nx/react/src/utils/version-utils");
 const normalize_options_1 = require("./lib/normalize-options");
@@ -58,7 +58,7 @@ async function applicationGeneratorInternal(host, schema) {
     const lintTask = await (0, add_linting_1.addLinting)(host, options);
     tasks.push(lintTask);
     if (options.style === 'tailwind') {
-        const tailwindTask = await (0, react_1.setupTailwindGenerator)(host, {
+        const tailwindTask = await (0, setup_tailwind_1.setupTailwindGenerator)(host, {
             project: options.projectName,
         });
         tasks.push(tailwindTask);
@@ -89,6 +89,7 @@ async function applicationGeneratorInternal(host, schema) {
         };
         if (options.unitTestRunner && options.unitTestRunner !== 'none') {
             devDependencies['@testing-library/react'] = versions_1.testingLibraryReactVersion;
+            devDependencies['@testing-library/dom'] = versions_1.testingLibraryDomVersion;
         }
         tasks.push((0, devkit_1.addDependenciesToPackageJson)(host, { tslib: versions_2.tsLibVersion }, devDependencies));
     }

package/src/generators/library/library.js

@@ -44,6 +44,7 @@ async function libraryGeneratorInternal(host, rawOptions) {
         }
         if (options.unitTestRunner && options.unitTestRunner !== 'none') {
             devDependencies['@testing-library/react'] = versions_1.testingLibraryReactVersion;
+            devDependencies['@testing-library/dom'] = versions_1.testingLibraryDomVersion;
         }
         tasks.push((0, devkit_1.addDependenciesToPackageJson)(host, { tslib: versions_2.tsLibVersion }, devDependencies));
     }

package/src/generators/setup-tailwind/files/postcss.config.js__tmpl__

@@ -0,0 +1,15 @@
+const { join } = require('path');
+
+// Note: If you use library-specific PostCSS/Tailwind configuration then you should remove the `postcssConfig` build
+// option from your application's configuration (i.e. project.json).
+//
+// See: https://nx.dev/guides/using-tailwind-css-in-react#step-4:-applying-configuration-to-libraries
+
+module.exports = {
+  plugins: {
+    tailwindcss: {
+      config: join(__dirname, 'tailwind.config.js'),
+    },
+    autoprefixer: {},
+  },
+}

package/src/generators/setup-tailwind/files/tailwind.config.js__tmpl__

@@ -0,0 +1,23 @@
+// const { createGlobPatternsForDependencies } = require('@nx/next/tailwind');
+
+// The above utility import will not work if you are using Next.js' --turbo.
+// Instead you will have to manually add the dependent paths to be included.
+// For example
+// ../libs/buttons/**/*.{ts,tsx,js,jsx,html}',                 <--- Adding a shared lib
+// !../libs/buttons/**/*.{stories,spec}.{ts,tsx,js,jsx,html}', <--- Skip adding spec/stories files from shared lib
+
+// If you are **not** using `--turbo` you can uncomment both lines 1 & 19.
+// A discussion of the issue can be found: https://github.com/nrwl/nx/issues/26510
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './{src,pages,components,app}/**/*.{ts,tsx,js,jsx,html}',
+    '!./{src,pages,components,app}/**/*.{stories,spec}.{ts,tsx,js,jsx,html}',
+//     ...createGlobPatternsForDependencies(__dirname)
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};

package/src/generators/setup-tailwind/lib/add-tailwind-style-imports.d.ts

@@ -0,0 +1,3 @@
+import { ProjectConfiguration, Tree } from '@nx/devkit';
+import { SetupTailwindOptions } from '../schema';
+export declare function addTailwindStyleImports(tree: Tree, project: ProjectConfiguration, _options: SetupTailwindOptions): void;

package/src/generators/setup-tailwind/lib/add-tailwind-style-imports.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addTailwindStyleImports = addTailwindStyleImports;
+const devkit_1 = require("@nx/devkit");
+// base directories and file types to simplify locating the stylesheet
+const baseDirs = ['src', 'pages', 'src/pages', 'src/app', 'app'];
+const fileNames = ['styles', 'global'];
+const extensions = ['.css', '.scss', '.less'];
+const knownLocations = baseDirs.flatMap((dir) => fileNames.flatMap((name) => extensions.map((ext) => `${dir}/${name}${ext}`)));
+function addTailwindStyleImports(tree, project, _options) {
+    const candidates = knownLocations.map((currentPath) => (0, devkit_1.joinPathFragments)(project.root, currentPath));
+    const stylesPath = candidates.find((currentStylePath) => tree.exists(currentStylePath));
+    if (stylesPath) {
+        const content = tree.read(stylesPath).toString();
+        tree.write(stylesPath, `@tailwind base;\n@tailwind components;\n@tailwind utilities;\n${content}`);
+    }
+    else {
+        devkit_1.logger.warn((0, devkit_1.stripIndents) `
+        Could not find stylesheet to update. Add the following imports to your stylesheet (e.g. styles.css):
+        
+          @tailwind base;
+          @tailwind components;
+          @tailwind utilities;
+          
+        See our guide for more details: https://nx.dev/guides/using-tailwind-css-in-react`);
+    }
+}

package/src/generators/setup-tailwind/lib/update-project.d.ts

@@ -0,0 +1,3 @@
+import type { ProjectConfiguration, Tree } from '@nx/devkit';
+import { SetupTailwindOptions } from '../schema';
+export declare function updateProject(tree: Tree, config: ProjectConfiguration, options: SetupTailwindOptions): void;

package/src/generators/setup-tailwind/lib/update-project.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.updateProject = updateProject;
+const devkit_1 = require("@nx/devkit");
+function updateProject(tree, config, options) {
+    if (config?.targets?.build?.executor === '@nx/webpack:webpack') {
+        config.targets.build.options ??= {};
+        config.targets.build.options.postcssConfig = (0, devkit_1.joinPathFragments)(config.root, 'postcss.config.js');
+        (0, devkit_1.updateProjectConfiguration)(tree, options.project, config);
+    }
+}

package/src/generators/setup-tailwind/schema.d.ts

@@ -0,0 +1,6 @@
+export interface SetupTailwindOptions {
+    project: string;
+    buildTarget?: string;
+    skipFormat?: boolean;
+    skipPackageJson?: boolean;
+}

package/src/generators/setup-tailwind/schema.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/src/generators/setup-tailwind/schema.json

@@ -0,0 +1,47 @@
+{
+  "$schema": "https://json-schema.org/schema",
+  "cli": "nx",
+  "$id": "NxNextTailwindSetupGenerator",
+  "title": "Configures Tailwind CSS for an application or a buildable/publishable library.",
+  "description": "Adds the Tailwind CSS configuration files for a Next.js project and installs, if needed, the packages required for Tailwind CSS to work.",
+  "type": "object",
+  "examples": [
+    {
+      "command": "nx g setup-tailwind --project=my-app",
+      "description": "Initialize Tailwind configuration for the `my-app` project."
+    }
+  ],
+  "properties": {
+    "project": {
+      "type": "string",
+      "description": "The name of the project to add the Tailwind CSS setup for.",
+      "alias": "p",
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      },
+      "x-dropdown": "projects",
+      "x-prompt": "What project would you like to add the Tailwind CSS setup?",
+      "x-priority": "important"
+    },
+    "buildTarget": {
+      "type": "string",
+      "description": "The name of the target used to build the project. This option is not needed in most cases.",
+      "default": "build",
+      "x-priority": "important"
+    },
+    "skipFormat": {
+      "type": "boolean",
+      "description": "Skips formatting the workspace after the generator completes.",
+      "x-priority": "internal"
+    },
+    "skipPackageJson": {
+      "type": "boolean",
+      "default": false,
+      "description": "Do not add dependencies to `package.json`.",
+      "x-priority": "internal"
+    }
+  },
+  "additionalProperties": false,
+  "required": ["project"]
+}

package/src/generators/setup-tailwind/setup-tailwind.d.ts

@@ -0,0 +1,4 @@
+import type { GeneratorCallback, Tree } from '@nx/devkit';
+import type { SetupTailwindOptions } from './schema';
+export declare function setupTailwindGenerator(tree: Tree, options: SetupTailwindOptions): Promise<GeneratorCallback>;
+export default setupTailwindGenerator;

package/src/generators/setup-tailwind/setup-tailwind.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setupTailwindGenerator = setupTailwindGenerator;
+const devkit_1 = require("@nx/devkit");
+const versions_1 = require("@nx/react/src/utils/versions");
+const add_tailwind_style_imports_1 = require("./lib/add-tailwind-style-imports");
+const update_project_1 = require("./lib/update-project");
+const path_1 = require("path");
+async function setupTailwindGenerator(tree, options) {
+    const tasks = [];
+    const project = (0, devkit_1.readProjectConfiguration)(tree, options.project);
+    if (tree.exists((0, devkit_1.joinPathFragments)(project.root, 'postcss.config.js')) ||
+        tree.exists((0, devkit_1.joinPathFragments)(project.root, 'tailwind.config.js'))) {
+        devkit_1.logger.info(`Skipping setup since there are existing PostCSS or Tailwind configuration files. For manual setup instructions, see https://nx.dev/guides/using-tailwind-css-in-react.`);
+        return;
+    }
+    (0, devkit_1.generateFiles)(tree, (0, path_1.join)(__dirname, './files'), project.root, {
+        tmpl: '',
+    });
+    (0, add_tailwind_style_imports_1.addTailwindStyleImports)(tree, project, options);
+    (0, update_project_1.updateProject)(tree, project, options);
+    if (!options.skipPackageJson) {
+        tasks.push((0, devkit_1.addDependenciesToPackageJson)(tree, {}, {
+            autoprefixer: versions_1.autoprefixerVersion,
+            postcss: versions_1.postcssVersion,
+            tailwindcss: versions_1.tailwindcssVersion,
+        }));
+    }
+    if (!options.skipFormat) {
+        await (0, devkit_1.formatFiles)(tree);
+    }
+    return (0, devkit_1.runTasksInSerial)(...tasks);
+}
+exports.default = setupTailwindGenerator;

package/tailwind.d.ts

@@ -1,2 +1,6 @@
-import { createGlobPatternsForDependencies } from '@nx/react/tailwind';
-export { createGlobPatternsForDependencies };
+/**
+ * Generates a set of glob patterns based off the source root of the app and its dependencies
+ * @param dirPath workspace relative directory path that will be used to infer the parent project and dependencies
+ * @param fileGlobPattern pass a custom glob pattern to be used
+ */
+export declare function createGlobPatternsForDependencies(dirPath: string, fileGlobPatternToInclude?: string, fileGlobPatternToExclude?: string): string[];

package/tailwind.js

@@ -1,6 +1,32 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createGlobPatternsForDependencies = void 0;
-// Re-exporting for convenience and backwards compatibility.
-const tailwind_1 = require("@nx/react/tailwind");
-Object.defineProperty(exports, "createGlobPatternsForDependencies", { enumerable: true, get: function () { return tailwind_1.createGlobPatternsForDependencies; } });
+exports.createGlobPatternsForDependencies = createGlobPatternsForDependencies;
+const generate_globs_1 = require("@nx/js/src/utils/generate-globs");
+const path_1 = require("path");
+/**
+ * Generates a set of glob patterns based off the source root of the app and its dependencies
+ * @param dirPath workspace relative directory path that will be used to infer the parent project and dependencies
+ * @param fileGlobPattern pass a custom glob pattern to be used
+ */
+function createGlobPatternsForDependencies(dirPath, fileGlobPatternToInclude = '/**/*.{tsx,ts,jsx,js,html}', fileGlobPatternToExclude = '/**/*.{stories,spec}.{tsx,ts,jsx,js,html}') {
+    try {
+        return [
+            ...(0, generate_globs_1.createGlobPatternsForDependencies)(dirPath, fileGlobPatternToInclude).map((glob) => (0, path_1.relative)(dirPath, glob)),
+            ...(0, generate_globs_1.createGlobPatternsForDependencies)(dirPath, fileGlobPatternToExclude).map((glob) => `!${(0, path_1.relative)(dirPath, glob)}`),
+        ];
+    }
+    catch (e) {
+        /**
+         * It should not be possible to reach this point when the utility is invoked as part of the normal
+         * lifecycle of Nx executors. However, other tooling, such as the VSCode Tailwind IntelliSense plugin
+         * or JetBrains editors such as WebStorm, may execute the tailwind.config.js file in order to provide
+         * autocomplete features, for example.
+         *
+         * In order to best support that use-case, we therefore do not hard error when the ProjectGraph is
+         * fundamently unavailable in this tailwind-specific context.
+         */
+        console.warn('\nWARNING: There was an error creating glob patterns, returning an empty array\n' +
+            `${e.message}\n`);
+        return [];
+    }
+}