@nx/react 23.0.0-beta.0 → 23.0.0-beta.10

package/src/generators/application/lib/create-application-files.js

@@ -16,7 +16,7 @@ const has_rspack_plugin_1 = require("../../../utils/has-rspack-plugin");
 const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
 const versions_1 = require("../../../utils/versions");
 function getDefaultTemplateVariables(host, options) {
-    const hasStyleFile = ['scss', 'css', 'less'].includes(options.style);
+    const hasStyleFile = ['scss', 'css'].includes(options.style);
     const appTests = (0, get_app_tests_1.getAppTests)(options);
     return {
         ...options.names,
@@ -33,7 +33,7 @@ function getDefaultTemplateVariables(host, options) {
         offsetFromRoot: (0, devkit_1.offsetFromRoot)(options.appProjectRoot),
         appTests,
         inSourceVitestTests: (0, get_in_source_vitest_tests_template_1.getInSourceVitestTestsTemplate)(appTests),
-        style: options.style === 'tailwind' ? 'css' : options.style,
+        style: options.style,
         hasStyleFile,
         isUsingTsSolutionSetup: (0, ts_solution_setup_1.isUsingTsSolutionSetup)(host),
         port: options.port ?? 4200,
@@ -55,25 +55,12 @@ function createNxRspackPluginOptions(options, rootOffset, tsx = true) {
         }, `./src/main.${tsx ? 'tsx' : 'ts'}`),
         tsConfig: './tsconfig.app.json',
         assets: ['./src/favicon.ico', './src/assets'],
-        styles: options.styledModule || !options.hasStyles
-            ? []
-            : [
-                `./src/styles.${options.style !== 'tailwind' ? options.style : 'css'}`,
-            ],
+        styles: !options.hasStyles ? [] : [`./src/styles.${options.style}`],
     };
 }
 async function createApplicationFiles(host, options) {
     let styleSolutionSpecificAppFiles;
-    if (options.styledModule && options.style !== 'styled-jsx') {
-        styleSolutionSpecificAppFiles = '../files/style-styled-module';
-    }
-    else if (options.style === 'styled-jsx') {
-        styleSolutionSpecificAppFiles = '../files/style-styled-jsx';
-    }
-    else if (options.style === 'tailwind') {
-        styleSolutionSpecificAppFiles = '../files/style-tailwind';
-    }
-    else if (options.style === 'none') {
+    if (options.style === 'none') {
         styleSolutionSpecificAppFiles = '../files/style-none';
     }
     else if (options.globalCss) {
@@ -107,53 +94,18 @@ async function createApplicationFiles(host, options) {
                         '@nx/react/babel',
                         {
                             runtime: 'automatic',
-                            importSource: options.style === '@emotion/styled'
-                                ? '@emotion/react'
-                                : undefined,
                         },
                     ],
                 ],
-                plugins: [
-                    options.style === 'styled-components'
-                        ? ['styled-components', { pure: true, ssr: true }]
-                        : undefined,
-                    options.style === 'styled-jsx' ? 'styled-jsx/babel' : undefined,
-                    options.style === '@emotion/styled'
-                        ? '@emotion/babel-plugin'
-                        : undefined,
-                ].filter(Boolean),
+                plugins: [],
             });
         }
         else if (options.compiler === 'swc') {
-            const swcrc = {
+            (0, devkit_1.writeJson)(host, `${options.appProjectRoot}/.swcrc`, {
                 jsc: {
                     target: 'es2016',
                 },
-            };
-            if (options.style === 'styled-components') {
-                swcrc.jsc.experimental = {
-                    plugins: [
-                        [
-                            '@swc/plugin-styled-components',
-                            {
-                                displayName: true,
-                                ssr: true,
-                            },
-                        ],
-                    ],
-                };
-            }
-            else if (options.style === '@emotion/styled') {
-                swcrc.jsc.experimental = {
-                    plugins: [['@swc/plugin-emotion', {}]],
-                };
-            }
-            else if (options.style === 'styled-jsx') {
-                swcrc.jsc.experimental = {
-                    plugins: [['@swc/plugin-styled-jsx', {}]],
-                };
-            }
-            (0, devkit_1.writeJson)(host, `${options.appProjectRoot}/.swcrc`, swcrc);
+            });
         }
     }
     else if (options.bundler === 'rspack') {
@@ -207,11 +159,7 @@ function createNxWebpackPluginOptions(options, rootOffset) {
         }, `./src/main.tsx`),
         tsConfig: './tsconfig.app.json',
         assets: ['./src/favicon.ico', './src/assets'],
-        styles: options.styledModule || !options.hasStyles
-            ? []
-            : [
-                `./src/styles.${options.style !== 'tailwind' ? options.style : 'css'}`,
-            ],
+        styles: !options.hasStyles ? [] : [`./src/styles.${options.style}`],
     };
 }
 function generateReactRouterFiles(tree, options, templateVariables) {

package/src/generators/application/lib/install-common-dependencies.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"install-common-dependencies.d.ts","sourceRoot":"","sources":["../../../../../../../packages/react/src/generators/application/lib/install-common-dependencies.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgC,IAAI,EAAE,MAAM,YAAY,CAAC;AAchE,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAG7C,wBAAsB,yBAAyB,CAC7C,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,gBAAgB,mDA6D1B"}
+{"version":3,"file":"install-common-dependencies.d.ts","sourceRoot":"","sources":["../../../../../../../packages/react/src/generators/application/lib/install-common-dependencies.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgC,IAAI,EAAE,MAAM,YAAY,CAAC;AAahE,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAG7C,wBAAsB,yBAAyB,CAC7C,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,gBAAgB,mDAwD1B"}

package/src/generators/application/lib/install-common-dependencies.js

@@ -32,13 +32,8 @@ async function installCommonDependencies(host, options) {
     // Vite requires style preprocessors to be installed manually.
     // `@nx/webpack` installs them automatically for now.
     if (options.bundler === 'vite' || options.unitTestRunner === 'vitest') {
-        switch (options.style) {
-            case 'scss':
-                devDependencies['sass'] = versions_1.sassVersion;
-                break;
-            case 'less':
-                devDependencies['less'] = versions_1.lessVersion;
-                break;
+        if (options.style === 'scss') {
+            devDependencies['sass'] = versions_1.sassVersion;
         }
     }
     if (options.bundler === 'webpack') {

package/src/generators/application/lib/normalize-options.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"normalize-options.d.ts","sourceRoot":"","sources":["../../../../../../../packages/react/src/generators/application/lib/normalize-options.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAqB,MAAM,YAAY,CAAC;AASrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAIrD,wBAAsB,gBAAgB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAC9D,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,MAAM,GACd,OAAO,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,CA6E9B"}
+{"version":3,"file":"normalize-options.d.ts","sourceRoot":"","sources":["../../../../../../../packages/react/src/generators/application/lib/normalize-options.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAqB,MAAM,YAAY,CAAC;AASrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAIrD,wBAAsB,gBAAgB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAC9D,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,MAAM,GACd,OAAO,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAwE9B"}

package/src/generators/application/lib/normalize-options.js

@@ -2,13 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.normalizeOptions = normalizeOptions;
 const devkit_1 = require("@nx/devkit");
-const project_name_and_root_utils_1 = require("@nx/devkit/src/generators/project-name-and-root-utils");
+const internal_1 = require("@nx/devkit/internal");
 const assertion_1 = require("../../../utils/assertion");
 const find_free_port_1 = require("./find-free-port");
 const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
 async function normalizeOptions(host, options) {
-    await (0, project_name_and_root_utils_1.ensureRootProjectName)(options, 'application');
-    const { projectName, names: projectNames, projectRoot: appProjectRoot, importPath, } = await (0, project_name_and_root_utils_1.determineProjectNameAndRootOptions)(host, {
+    await (0, internal_1.ensureRootProjectName)(options, 'application');
+    const { projectName, names: projectNames, projectRoot: appProjectRoot, importPath, } = await (0, internal_1.determineProjectNameAndRootOptions)(host, {
         name: options.name,
         projectType: 'application',
         directory: options.directory,
@@ -27,9 +27,6 @@ async function normalizeOptions(host, options) {
         ? options.tags.split(',').map((s) => s.trim())
         : [];
     const fileName = 'app';
-    const styledModule = /^(css|scss|less|tailwind|none)$/.test(options.style)
-        ? null
-        : options.style;
     (0, assertion_1.assertValidStyle)(options.style);
     (0, assertion_1.assertValidReactRouter)(options.useReactRouter, options.bundler);
     if (options.useReactRouter && !options.bundler) {
@@ -45,7 +42,6 @@ async function normalizeOptions(host, options) {
         e2eProjectRoot,
         parsedTags,
         fileName,
-        styledModule,
         hasStyles: options.style !== 'none',
         names: (0, devkit_1.names)(projectNames.projectSimpleName),
         isUsingTsSolutionConfig,

package/src/generators/application/lib/update-jest-config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"update-jest-config.d.ts","sourceRoot":"","sources":["../../../../../../../packages/react/src/generators/application/lib/update-jest-config.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAc,MAAM,YAAY,CAAC;AAE9C,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,gBAAgB,QAoCrE"}
+{"version":3,"file":"update-jest-config.d.ts","sourceRoot":"","sources":["../../../../../../../packages/react/src/generators/application/lib/update-jest-config.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAc,MAAM,YAAY,CAAC;AAE9C,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,gBAAgB,QAiCrE"}

package/src/generators/application/lib/update-jest-config.js

@@ -10,9 +10,6 @@ function updateSpecConfig(host, options) {
     (0, devkit_1.updateJson)(host, `${options.appProjectRoot}/tsconfig.spec.json`, (json) => {
         const compilerOptions = json.compilerOptions ?? {};
         const types = compilerOptions.types ?? [];
-        if (options.style === 'styled-jsx') {
-            types.push('@nx/react/typings/styled-jsx.d.ts');
-        }
         types.push('@nx/react/typings/cssmodule.d.ts', '@nx/react/typings/image.d.ts');
         compilerOptions.types = types;
         json.compilerOptions = compilerOptions;

package/src/generators/application/schema.d.ts

@@ -44,7 +44,6 @@ export interface NormalizedSchema<T extends Schema = Schema> extends T {
   importPath: string;
   parsedTags: string[];
   fileName: string;
-  styledModule: null | SupportedStyles;
   hasStyles: boolean;
   unitTestRunner: 'jest' | 'vitest' | 'none';
   addPlugin?: boolean;

package/src/generators/application/schema.json

@@ -45,6 +45,7 @@
       "type": "string",
       "default": "css",
       "alias": "s",
+      "enum": ["css", "scss", "none"],
       "x-prompt": {
         "message": "Which stylesheet format would you like to use?",
         "type": "list",
@@ -55,27 +56,7 @@
           },
           {
             "value": "scss",
-            "label": "SASS(.scss)       [ https://sass-lang.com                    ]"
-          },
-          {
-            "value": "less",
-            "label": "LESS              [ https://lesscss.org                      ]"
-          },
-          {
-            "value": "tailwind",
-            "label": "tailwind          [ https://tailwindcss.com/                 ]"
-          },
-          {
-            "value": "styled-components",
-            "label": "styled-components [ https://styled-components.com            ]"
-          },
-          {
-            "value": "@emotion/styled",
-            "label": "emotion           [ https://emotion.sh                       ]"
-          },
-          {
-            "value": "styled-jsx",
-            "label": "styled-jsx        [ https://www.npmjs.com/package/styled-jsx ]"
+            "label": "SASS(.scss)       [ https://sass-lang.com   ]"
           },
           {
             "value": "none",

package/src/generators/component/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../../../../packages/react/src/generators/component/component.ts"],"names":[],"mappings":"AAAA,OAAO,EAKL,iBAAiB,EAIjB,IAAI,EACL,MAAM,YAAY,CAAC;AASpB,OAAO,EAAoB,MAAM,EAAE,MAAM,UAAU,CAAC;AAGpD,wBAAsB,kBAAkB,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,8BAyBlE;AAiFD,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../../../../packages/react/src/generators/component/component.ts"],"names":[],"mappings":"AAAA,OAAO,EAKL,iBAAiB,EAIjB,IAAI,EACL,MAAM,YAAY,CAAC;AAQpB,OAAO,EAAoB,MAAM,EAAE,MAAM,UAAU,CAAC;AAGpD,wBAAsB,kBAAkB,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,8BAsBlE;AAiFD,eAAe,kBAAkB,CAAC"}

package/src/generators/component/component.js

@@ -4,7 +4,6 @@ exports.componentGenerator = componentGenerator;
 const devkit_1 = require("@nx/devkit");
 const ensure_typescript_1 = require("@nx/js/src/utils/typescript/ensure-typescript");
 const path_1 = require("path");
-const add_styled_dependencies_1 = require("../../rules/add-styled-dependencies");
 const ast_utils_1 = require("../../utils/ast-utils");
 const get_in_source_vitest_tests_template_1 = require("../../utils/get-in-source-vitest-tests-template");
 const versions_1 = require("../../utils/versions");
@@ -14,8 +13,6 @@ async function componentGenerator(host, schema) {
     const options = await (0, normalize_options_1.normalizeOptions)(host, schema);
     createComponentFiles(host, options);
     const tasks = [];
-    const styledTask = (0, add_styled_dependencies_1.addStyledModuleDependencies)(host, options);
-    tasks.push(styledTask);
     addExportsToBarrel(host, options);
     if (options.routing) {
         const routingTask = (0, devkit_1.addDependenciesToPackageJson)(host, { 'react-router-dom': versions_1.reactRouterDomVersion }, {});
@@ -38,10 +35,10 @@ function createComponentFiles(host, options) {
     if (options.skipTests || options.inSourceTests) {
         host.delete((0, devkit_1.joinPathFragments)(options.directory, `${options.fileName}.spec.${options.fileExtension}`));
     }
-    if (options.styledModule || !options.hasStyles || !options.globalCss) {
+    if (!options.hasStyles || !options.globalCss) {
         host.delete((0, path_1.join)(options.directory, `${options.fileName}.${options.style}`));
     }
-    if (options.styledModule || !options.hasStyles || options.globalCss) {
+    if (!options.hasStyles || options.globalCss) {
         host.delete((0, path_1.join)(options.directory, `${options.fileName}.module.${options.style}`));
     }
 }

package/src/generators/component/files/__fileName__.__ext__

@@ -6,34 +6,21 @@ import { Route, Link } from 'react-router-dom';
 <%_ } _%>
 
 <%_ if (hasStyles) {
-   if (styledModule && styledModule !== 'styled-jsx' && styledModule !== 'tailwind') {
-    var wrapper = 'Styled' + className;
-    var extras = '';
-  _%>
-import styled from '<%= styledModule %>';
-  <%_ } else {
     var wrapper = 'div';
-    var extras = globalCss || styledModule === 'styled-jsx' || styledModule === 'tailwind' ? '' : " className={styles['container']}";
+    var extras = globalCss ? '' : " className={styles['container']}";
   _%>
-<%- style !== 'styled-jsx' && style!== 'tailwind' ? globalCss ? `import './${fileName}.${style}';` : `import styles from './${fileName}.module.${style}';`: '' %>
-  <%_ }
-} else {
+<%- globalCss ? `import './${fileName}.${style}';` : `import styles from './${fileName}.module.${style}';` %>
+<%_ } else {
     var wrapper = 'div';
     var extras = '';
 } _%>
 
-<%_ if (styledModule && styledModule !== 'styled-jsx' && styledModule !== 'tailwind') { _%>
-const Styled<%= className %> = styled.div`
-  color: pink;
-`;
-<%_ } _%>
 <%_ if(!isNextPage) { _%>
   <%_ if (classComponent) { _%>
 export class <%= className %> extends Component<% if (isTs) { %><{}><% } %> {
   <% if (isTs) { %>override<% } %> render() {
     return (
       <<%= wrapper %><%- extras %>>
-        <%= styledModule === 'styled-jsx' ? `<style jsx>{\`div { color: pink; }\`}</style>` : `` %>
         <p>Welcome to <%= className %>!</p>
         <%_ if (routing) { _%>
           <ul>
@@ -49,7 +36,6 @@ export class <%= className %> extends Component<% if (isTs) { %><{}><% } %> {
 export function <%= className %>() {
   return (
     <<%= wrapper %><%- extras %>>
-      <%_ if (styledModule === 'styled-jsx') { _%><style jsx>{`div { color: pink; }`}</style><%_ } _%>
       <h1>Welcome to <%= className %>!</h1>
       <%_ if (routing) { _%>
         <ul>
@@ -67,7 +53,6 @@ export default <%= className %>;
 export default function <%= className %>() {
   return (
     <<%= wrapper %><%- extras %>>
-      <%_ if (styledModule === 'styled-jsx') { _%><style jsx>{`div { color: pink; }`}</style><%_ } _%>
       <h1>Welcome to <%= className %>!</h1>
       <% if (routing) { %>
         <ul>

package/src/generators/component/lib/normalize-options.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"normalize-options.d.ts","sourceRoot":"","sources":["../../../../../../../packages/react/src/generators/component/lib/normalize-options.ts"],"names":[],"mappings":"AAAA,OAAO,EAA2C,IAAI,EAAE,MAAM,YAAY,CAAC;AAK3E,OAAO,EAAE,gBAAgB,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAGrD,wBAAsB,gBAAgB,CACpC,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,MAAM,GACd,OAAO,CAAC,gBAAgB,CAAC,CAgE3B"}
+{"version":3,"file":"normalize-options.d.ts","sourceRoot":"","sources":["../../../../../../../packages/react/src/generators/component/lib/normalize-options.ts"],"names":[],"mappings":"AAAA,OAAO,EAA2C,IAAI,EAAE,MAAM,YAAY,CAAC;AAI3E,OAAO,EAAE,gBAAgB,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAGrD,wBAAsB,gBAAgB,CACpC,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,MAAM,GACd,OAAO,CAAC,gBAAgB,CAAC,CA0D3B"}

package/src/generators/component/lib/normalize-options.js

@@ -2,24 +2,20 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.normalizeOptions = normalizeOptions;
 const devkit_1 = require("@nx/devkit");
-const artifact_name_and_directory_utils_1 = require("@nx/devkit/src/generators/artifact-name-and-directory-utils");
+const internal_1 = require("@nx/devkit/internal");
 const assertion_1 = require("../../../utils/assertion");
 const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
 async function normalizeOptions(tree, options) {
     (0, assertion_1.assertValidStyle)(options.style);
-    const { artifactName: name, directory, fileName, filePath, fileExtension, fileExtensionType, project: projectName, } = await (0, artifact_name_and_directory_utils_1.determineArtifactNameAndDirectoryOptions)(tree, {
+    const { artifactName: name, directory, fileName, filePath, fileExtension, fileExtensionType, project: projectName, } = await (0, internal_1.determineArtifactNameAndDirectoryOptions)(tree, {
         path: options.path,
         name: options.name,
         allowedFileExtensions: ['js', 'jsx', 'ts', 'tsx'],
-        fileExtension: options.js ? 'js' : 'tsx',
-        js: options.js,
+        fileExtension: 'tsx',
     });
     const project = (0, devkit_1.readProjectConfiguration)(tree, projectName);
     const { className } = (0, devkit_1.names)(name);
     const { sourceRoot: projectSourceRoot, root: projectRoot, projectType, } = project;
-    const styledModule = /^(css|scss|less|none)$/.test(options.style)
-        ? null
-        : options.style;
     if (options.export &&
         (0, ts_solution_setup_1.getProjectType)(tree, projectRoot, projectType) === 'application') {
         devkit_1.logger.warn(`The "--export" option should not be used with applications and will do nothing.`);
@@ -34,7 +30,6 @@ async function normalizeOptions(tree, options) {
         ...options,
         directory,
         projectName,
-        styledModule,
         hasStyles: options.style !== 'none',
         className,
         fileName,

package/src/generators/component/schema.d.ts

@@ -1,4 +1,4 @@
-import type { FileExtensionType } from '@nx/devkit/src/generators/artifact-name-and-directory-utils';
+import type { FileExtensionType } from '@nx/devkit/internal';
 import { SupportedStyles } from '../../../typings/style';
 
 export interface Schema {
@@ -14,14 +14,9 @@ export interface Schema {
   skipFormat?: boolean;
   // Used by Next.js to determine how React should generate the page
   isNextPage?: boolean;
-
-  /**
-   * @deprecated Provide the full file path including the file extension in the `path` option. This option will be removed in Nx v21.
-   */
-  js?: boolean;
 }
 
-export interface NormalizedSchema extends Omit<Schema, 'js'> {
+export interface NormalizedSchema extends Schema {
   directory: string;
   projectRoot: string;
   projectSourceRoot: string;
@@ -31,6 +26,5 @@ export interface NormalizedSchema extends Omit<Schema, 'js'> {
   fileExtension: string;
   fileExtensionType: FileExtensionType;
   className: string;
-  styledModule: null | string;
   hasStyles: boolean;
 }

package/src/generators/component/schema.json

@@ -25,6 +25,7 @@
       "type": "string",
       "alias": "s",
       "default": "css",
+      "enum": ["css", "scss", "none"],
       "x-prompt": {
         "message": "Which stylesheet format would you like to use?",
         "type": "list",
@@ -35,27 +36,7 @@
           },
           {
             "value": "scss",
-            "label": "SASS(.scss)       [ https://sass-lang.com          ]"
-          },
-          {
-            "value": "less",
-            "label": "LESS              [ https://lesscss.org            ]"
-          },
-          {
-            "value": "tailwind",
-            "label": "tailwind          [ https://tailwindcss.com/       ]"
-          },
-          {
-            "value": "styled-components",
-            "label": "styled-components [ https://styled-components.com ]"
-          },
-          {
-            "value": "@emotion/styled",
-            "label": "emotion           [ https://emotion.sh            ]"
-          },
-          {
-            "value": "styled-jsx",
-            "label": "styled-jsx        [ https://www.npmjs.com/package/styled-jsx ]"
+            "label": "SASS(.scss)       [ https://sass-lang.com   ]"
           },
           {
             "value": "none",
@@ -64,11 +45,6 @@
         ]
       }
     },
-    "js": {
-      "type": "boolean",
-      "description": "Generate JavaScript files rather than TypeScript files.",
-      "x-deprecated": "Provide the full file path including the file extension in the `path` option. This option will be removed in Nx v21."
-    },
     "skipTests": {
       "type": "boolean",
       "description": "When true, does not create `spec.ts` test files for the new component.",

package/src/generators/federate-module/federate-module.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"federate-module.d.ts","sourceRoot":"","sources":["../../../../../../packages/react/src/generators/federate-module/federate-module.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EACjB,IAAI,EAQL,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAOlC,wBAAsB,uBAAuB,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,8BAiEvE;AAED,eAAe,uBAAuB,CAAC"}
+{"version":3,"file":"federate-module.d.ts","sourceRoot":"","sources":["../../../../../../packages/react/src/generators/federate-module/federate-module.ts"],"names":[],"mappings":"AACA,OAAO,EACL,iBAAiB,EACjB,IAAI,EAQL,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAMlC,wBAAsB,uBAAuB,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,8BAiEvE;AAED,eAAe,uBAAuB,CAAC"}

package/src/generators/federate-module/federate-module.js

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.federateModuleGenerator = federateModuleGenerator;
+const internal_1 = require("@nx/devkit/internal");
 const devkit_1 = require("@nx/devkit");
 const remote_1 = require("../remote/remote");
 const utils_1 = require("./lib/utils");
-const project_name_and_root_utils_1 = require("@nx/devkit/src/generators/project-name-and-root-utils");
 const js_1 = require("@nx/js");
 async function federateModuleGenerator(tree, schema) {
     // Check if the file exists
@@ -14,7 +14,7 @@ async function federateModuleGenerator(tree, schema) {
     Path: ${schema.path}`);
     }
     const tasks = [];
-    const { projectName: remoteName, projectRoot: remoteRoot } = await (0, project_name_and_root_utils_1.determineProjectNameAndRootOptions)(tree, {
+    const { projectName: remoteName, projectRoot: remoteRoot } = await (0, internal_1.determineProjectNameAndRootOptions)(tree, {
         name: schema.remote,
         directory: schema.remoteDirectory,
         projectType: 'application',

package/src/generators/hook/hook.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hook.d.ts","sourceRoot":"","sources":["../../../../../../packages/react/src/generators/hook/hook.ts"],"names":[],"mappings":"AACA,OAAO,EAQL,IAAI,EACL,MAAM,YAAY,CAAC;AAQpB,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAclC,wBAAsB,aAAa,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,iBAO7D;AAmHD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"hook.d.ts","sourceRoot":"","sources":["../../../../../../packages/react/src/generators/hook/hook.ts"],"names":[],"mappings":"AAKA,OAAO,EAQL,IAAI,EACL,MAAM,YAAY,CAAC;AAIpB,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAclC,wBAAsB,aAAa,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,iBAO7D;AAmHD,eAAe,aAAa,CAAC"}

package/src/generators/hook/hook.js

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.hookGenerator = hookGenerator;
+const internal_1 = require("@nx/devkit/internal");
 // TODO(jack): Remove inline renderHook function when RTL releases with its own version
 const devkit_1 = require("@nx/devkit");
-const artifact_name_and_directory_utils_1 = require("@nx/devkit/src/generators/artifact-name-and-directory-utils");
 const ensure_typescript_1 = require("@nx/js/src/utils/typescript/ensure-typescript");
 const path_1 = require("path");
 const ast_utils_1 = require("../../utils/ast-utils");
@@ -45,7 +45,7 @@ function addExportsToBarrel(host, options) {
     }
 }
 async function normalizeOptions(host, options) {
-    const { artifactName, directory, fileName: hookFilename, fileExtension, fileExtensionType, project: projectName, } = await (0, artifact_name_and_directory_utils_1.determineArtifactNameAndDirectoryOptions)(host, {
+    const { artifactName, directory, fileName: hookFilename, fileExtension, fileExtensionType, project: projectName, } = await (0, internal_1.determineArtifactNameAndDirectoryOptions)(host, {
         path: options.path,
         name: options.name,
         allowedFileExtensions: ['js', 'ts'],

package/src/generators/host/host.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"host.d.ts","sourceRoot":"","sources":["../../../../../../packages/react/src/generators/host/host.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,iBAAiB,EAKjB,IAAI,EAGL,MAAM,YAAY,CAAC;AAapB,OAAO,EAAoB,MAAM,EAAE,MAAM,UAAU,CAAC;AAYpD,wBAAsB,aAAa,CACjC,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,GACb,OAAO,CAAC,iBAAiB,CAAC,CAmJ5B;AAmCD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"host.d.ts","sourceRoot":"","sources":["../../../../../../packages/react/src/generators/host/host.ts"],"names":[],"mappings":"AACA,OAAO,EAIL,iBAAiB,EAKjB,IAAI,EAGL,MAAM,YAAY,CAAC;AAapB,OAAO,EAAoB,MAAM,EAAE,MAAM,UAAU,CAAC;AAWpD,wBAAsB,aAAa,CACjC,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,GACb,OAAO,CAAC,iBAAiB,CAAC,CAmJ5B;AAmCD,eAAe,aAAa,CAAC"}

package/src/generators/host/host.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.hostGenerator = hostGenerator;
 const tslib_1 = require("tslib");
+const internal_1 = require("@nx/devkit/internal");
 const devkit_1 = require("@nx/devkit");
 const update_module_federation_project_1 = require("../../rules/update-module-federation-project");
 const application_1 = tslib_1.__importDefault(require("../application/application"));
@@ -16,7 +17,6 @@ const add_mf_env_to_inputs_1 = require("../../utils/add-mf-env-to-inputs");
 const js_1 = require("@nx/js");
 const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
 const versions_1 = require("../../utils/versions");
-const project_name_and_root_utils_1 = require("@nx/devkit/src/generators/project-name-and-root-utils");
 const update_module_federation_tsconfig_1 = require("./lib/update-module-federation-tsconfig");
 const normalize_host_name_1 = require("./lib/normalize-host-name");
 async function hostGenerator(host, schema) {
@@ -46,7 +46,7 @@ async function hostGenerator(host, schema) {
             }
         });
     }
-    await (0, project_name_and_root_utils_1.ensureRootProjectName)(options, 'application');
+    await (0, internal_1.ensureRootProjectName)(options, 'application');
     const initTask = await (0, application_1.default)(host, {
         ...options,
         directory: options.appProjectRoot,

package/src/generators/host/lib/normalize-host-name.js

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.normalizeHostName = normalizeHostName;
-const project_name_and_root_utils_1 = require("@nx/devkit/src/generators/project-name-and-root-utils");
+const internal_1 = require("@nx/devkit/internal");
 async function normalizeHostName(tree, directory, name) {
-    const { projectName } = await (0, project_name_and_root_utils_1.determineProjectNameAndRootOptions)(tree, {
+    const { projectName } = await (0, internal_1.determineProjectNameAndRootOptions)(tree, {
         name,
         directory,
         projectType: 'application',

package/src/generators/host/schema.json

@@ -27,6 +27,7 @@
       "type": "string",
       "default": "css",
       "alias": "s",
+      "enum": ["css", "scss", "none"],
       "x-prompt": {
         "message": "Which stylesheet format would you like to use?",
         "type": "list",
@@ -37,27 +38,7 @@
           },
           {
             "value": "scss",
-            "label": "SASS(.scss)       [ https://sass-lang.com                     ]"
-          },
-          {
-            "value": "less",
-            "label": "LESS              [ https://lesscss.org                       ]"
-          },
-          {
-            "value": "tailwind",
-            "label": "tailwind [ https://tailwindcss.com/            ]"
-          },
-          {
-            "value": "styled-components",
-            "label": "styled-components [ https://styled-components.com            ]"
-          },
-          {
-            "value": "@emotion/styled",
-            "label": "emotion           [ https://emotion.sh                       ]"
-          },
-          {
-            "value": "styled-jsx",
-            "label": "styled-jsx        [ https://www.npmjs.com/package/styled-jsx ]"
+            "label": "SASS(.scss)       [ https://sass-lang.com   ]"
           },
           {
             "value": "none",

package/src/generators/init/init.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"init.d.ts","sourceRoot":"","sources":["../../../../../../packages/react/src/generators/init/init.ts"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,iBAAiB,EACtB,KAAK,IAAI,EACV,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAKtC,wBAAsB,kBAAkB,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,8BAyDtE;AAED,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"init.d.ts","sourceRoot":"","sources":["../../../../../../packages/react/src/generators/init/init.ts"],"names":[],"mappings":"AACA,OAAO,EAOL,KAAK,iBAAiB,EACtB,KAAK,IAAI,EACV,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAItC,wBAAsB,kBAAkB,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,8BAyDtE;AAED,eAAe,kBAAkB,CAAC"}

package/src/generators/init/init.js

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.reactInitGenerator = reactInitGenerator;
+const internal_1 = require("@nx/devkit/internal");
 const devkit_1 = require("@nx/devkit");
 const versions_1 = require("../../utils/versions");
 const version_utils_1 = require("../../utils/version-utils");
-const add_plugin_1 = require("@nx/devkit/src/utils/add-plugin");
 const router_plugin_1 = require("../../plugins/router-plugin");
 async function reactInitGenerator(tree, schema) {
     const tasks = [];
@@ -23,7 +23,7 @@ async function reactInitGenerator(tree, schema) {
         process.env.NX_ADD_PLUGINS !== 'false' &&
             nxJson.useInferencePlugins !== false;
     if (schema.useReactRouterPlugin && schema.addPlugin) {
-        await (0, add_plugin_1.addPlugin)(tree, await (0, devkit_1.createProjectGraphAsync)(), '@nx/react/router-plugin', router_plugin_1.createNodesV2, {
+        await (0, internal_1.addPlugin)(tree, await (0, devkit_1.createProjectGraphAsync)(), '@nx/react/router-plugin', router_plugin_1.createNodesV2, {
             buildTargetName: ['build', 'react-router:build', 'react-router-build'],
             devTargetName: ['dev', 'react-router:dev', 'react-router-dev'],
             startTargetName: ['start', 'react-router-serve', 'react-router-start'],

package/src/generators/library/files/common/tsconfig.lib.json__tmpl__

@@ -4,7 +4,6 @@
     "outDir": "<%= offsetFromRoot %>dist/out-tsc",
     "types": [
       "node",
-      <%_ if (style === 'styled-jsx') { %>"@nx/react/typings/styled-jsx.d.ts",<% } _%>
       "@nx/react/typings/cssmodule.d.ts",
       "@nx/react/typings/image.d.ts"
     ]

package/src/generators/library/files/vite/tsconfig.lib.json__tmpl__

@@ -4,7 +4,6 @@
     "outDir": "<%= offsetFromRoot %>dist/out-tsc",
     "types": [
       "node",
-      <%_ if (style === 'styled-jsx') { _%>"@nx/react/typings/styled-jsx.d.ts",<%_ } _%>
       "@nx/react/typings/cssmodule.d.ts",
       "@nx/react/typings/image.d.ts"
     ]