fix(react): add missing style preprocessors when using Vite (#13600)

2022-12-02 16:56:23 -05:00 · 2022-12-02 16:56:23 -05:00 · 67c7822ad3
commit 67c7822ad3
parent 3e2b8d987f
18 changed files with 195 additions and 17 deletions
--- a/docs/generated/packages/vite.json
+++ b/docs/generated/packages/vite.json
@ -124,6 +124,12 @@
            "type": "boolean",
            "default": false,
            "description": "Skip generating a vite config file"
+          },
+          "coverageProvider": {
+            "type": "string",
+            "enum": ["c8", "istanbul"],
+            "default": "c8",
+            "description": "Coverage provider to use."
          }
        },
        "required": ["project"],
--- a/packages/react/src/generators/application/application.spec.ts
+++ b/packages/react/src/generators/application/application.spec.ts
@ -970,7 +970,8 @@ describe('app', () => {

  describe('setup React app with --bundler=vite', () => {
    let viteAppTree: Tree;
-    beforeAll(async () => {
+
+    beforeEach(async () => {
      viteAppTree = createTreeWithEmptyV1Workspace();
      await applicationGenerator(viteAppTree, { ...schema, bundler: 'vite' });
    });
@ -984,6 +985,7 @@ describe('app', () => {
        buildTarget: 'my-app:build',
      });
    });
+
    it('should add dependencies in package.json', () => {
      const packageJson = readJson(viteAppTree, '/package.json');

@ -1020,6 +1022,30 @@ describe('app', () => {
        viteAppTree.exists('/apps/insourceTests/src/app/app.spec.tsx')
      ).toBe(false);
    });
+
+    it.each`
+      style     | pkg
+      ${'less'} | ${'less'}
+      ${'scss'} | ${'sass'}
+      ${'styl'} | ${'stylus'}
+    `(
+      'should add style preprocessor when vite is used',
+      async ({ style, pkg }) => {
+        await applicationGenerator(viteAppTree, {
+          ...schema,
+          style,
+          bundler: 'vite',
+          unitTestRunner: 'vitest',
+          name: style,
+        });
+
+        expect(readJson(viteAppTree, 'package.json')).toMatchObject({
+          devDependencies: {
+            [pkg]: expect.any(String),
+          },
+        });
+      }
+    );
  });

  describe('setting generator defaults', () => {
--- a/packages/react/src/generators/application/application.ts
+++ b/packages/react/src/generators/application/application.ts
@ -31,6 +31,7 @@ import {
  swcCoreVersion,
  swcLoaderVersion,
 } from '../../utils/versions';
+import { installCommonDependencies } from './lib/install-common-dependencies';

 async function addLinting(host: Tree, options: NormalizedSchema) {
  const tasks: GeneratorCallback[] = [];
@ -122,6 +123,7 @@ export async function applicationGenerator(host: Tree, schema: Schema) {

    const vitestTask = await vitestGenerator(host, {
      uiFramework: 'react',
+      coverageProvider: 'c8',
      project: options.projectName,
      inSourceTests: options.inSourceTests,
    });
@ -153,6 +155,8 @@ export async function applicationGenerator(host: Tree, schema: Schema) {

  // Handle tsconfig.spec.json for jest or vitest
  updateSpecConfig(host, options);
+  const stylePreprocessorTask = installCommonDependencies(host, options);
+  tasks.push(stylePreprocessorTask);
  const styledTask = addStyledModuleDependencies(host, options.styledModule);
  tasks.push(styledTask);
  const routingTask = addRouting(host, options);
--- a/packages/react/src/generators/application/lib/install-common-dependencies.ts
+++ b/packages/react/src/generators/application/lib/install-common-dependencies.ts
@ -0,0 +1,35 @@
+import { addDependenciesToPackageJson, Tree } from '@nrwl/devkit';
+import {
+  lessVersion,
+  sassVersion,
+  stylusVersion,
+} from '../../../utils/versions';
+import { NormalizedSchema } from '../schema';
+
+export function installCommonDependencies(
+  host: Tree,
+  options: NormalizedSchema
+) {
+  let devDependencies = null;
+
+  // Vite requires style preprocessors to be installed manually.
+  // `@nrwl/webpack` installs them automatically for now.
+  // TODO(jack): Once we clean up webpack we can remove this check
+  if (options.bundler === 'vite' || options.unitTestRunner === 'vitest') {
+    switch (options.style) {
+      case 'scss':
+        devDependencies = { sass: sassVersion };
+        break;
+      case 'less':
+        devDependencies = { less: lessVersion };
+        break;
+      case 'styl':
+        devDependencies = { stylus: stylusVersion };
+        break;
+    }
+  }
+
+  return devDependencies
+    ? addDependenciesToPackageJson(host, {}, devDependencies)
+    : function noop() {};
+}
--- a/packages/react/src/generators/component/component.spec.ts
+++ b/packages/react/src/generators/component/component.spec.ts
@ -312,6 +312,7 @@ describe('component', () => {
        .read('libs/my-lib/src/lib/hello/hello.tsx')
        .toString();
      expect(content).toContain('<style jsx>');
+      expect(content).not.toContain("styles['container']");
    });

    it('should add dependencies to package.json', async () => {
--- a/packages/react/src/generators/component/files/fileName.tsxtmpl
+++ b/packages/react/src/generators/component/files/fileName.tsxtmpl
@ -14,7 +14,7 @@ import { Route, Link } from 'react-router-dom';
  import styled from '<%= styledModule %>';
  <% } else {
    var wrapper = 'div';
-    var extras = globalCss ? '' : " className={styles['container']}";
+    var extras = globalCss || styledModule === 'styled-jsx' ? '' : " className={styles['container']}";
  %>
  <%- style !== 'styled-jsx' ? globalCss ? `import './${fileName}.${style}';` : `import styles from './${fileName}.module.${style}';`: '' %>
  <% }
--- a/packages/react/src/generators/library/lib/install-common-dependencies.ts
+++ b/packages/react/src/generators/library/lib/install-common-dependencies.ts
@ -0,0 +1,44 @@
+import { addDependenciesToPackageJson, Tree } from '@nrwl/devkit';
+import {
+  lessVersion,
+  reactDomVersion,
+  reactVersion,
+  sassVersion,
+  stylusVersion,
+  swcCoreVersion,
+} from '../../../utils/versions';
+import { NormalizedSchema } from '../schema';
+
+export function installCommonDependencies(
+  host: Tree,
+  options: NormalizedSchema
+) {
+  const devDependencies =
+    options.compiler === 'swc' ? { '@swc/core': swcCoreVersion } : {};
+
+  // Vite requires style preprocessors to be installed manually.
+  // `@nrwl/webpack` installs them automatically for now.
+  // TODO(jack): Once we clean up webpack we can remove this check
+  if (options.bundler === 'vite' || options.unitTestRunner === 'vitest') {
+    switch (options.style) {
+      case 'scss':
+        devDependencies['sass'] = sassVersion;
+        break;
+      case 'less':
+        devDependencies['less'] = lessVersion;
+        break;
+      case 'styl':
+        devDependencies['stylus'] = stylusVersion;
+        break;
+    }
+  }
+
+  return addDependenciesToPackageJson(
+    host,
+    {
+      react: reactVersion,
+      'react-dom': reactDomVersion,
+    },
+    devDependencies
+  );
+}
--- a/packages/react/src/generators/library/library.spec.ts
+++ b/packages/react/src/generators/library/library.spec.ts
@ -771,4 +771,28 @@ describe('lib', () => {
      }).not.toThrow();
    }
  );
+
+  it.each`
+    style     | pkg
+    ${'less'} | ${'less'}
+    ${'scss'} | ${'sass'}
+    ${'styl'} | ${'stylus'}
+  `(
+    'should add style preprocessor when vite is used',
+    async ({ style, pkg }) => {
+      await libraryGenerator(tree, {
+        ...defaultSchema,
+        style,
+        bundler: 'vite',
+        unitTestRunner: 'vitest',
+        name: 'myLib',
+      });
+
+      expect(readJson(tree, 'package.json')).toMatchObject({
+        devDependencies: {
+          [pkg]: expect.any(String),
+        },
+      });
+    }
+  );
 });
--- a/packages/react/src/generators/library/library.ts
+++ b/packages/react/src/generators/library/library.ts
@ -1,5 +1,4 @@
 import {
-  addDependenciesToPackageJson,
  addProjectConfiguration,
  convertNxGenerator,
  ensurePackage,
@ -11,12 +10,7 @@ import {
 } from '@nrwl/devkit';
 import { runTasksInSerial } from '@nrwl/workspace/src/utilities/run-tasks-in-serial';

-import {
-  nxVersion,
-  reactDomVersion,
-  reactVersion,
-  swcCoreVersion,
-} from '../../utils/versions';
+import { nxVersion } from '../../utils/versions';
 import componentGenerator from '../component/component';
 import initGenerator from '../init/init';
 import { Schema } from './schema';
@ -27,6 +21,7 @@ import { addLinting } from './lib/add-linting';
 import { updateAppRoutes } from './lib/update-app-routes';
 import { createFiles } from './lib/create-files';
 import { updateBaseTsConfig } from './lib/update-base-tsconfig';
+import { installCommonDependencies } from './lib/install-common-dependencies';

 export async function libraryGenerator(host: Tree, schema: Schema) {
  const tasks: GeneratorCallback[] = [];
@ -123,6 +118,7 @@ export async function libraryGenerator(host: Tree, schema: Schema) {
    const vitestTask = await vitestGenerator(host, {
      uiFramework: 'react',
      project: options.name,
+      coverageProvider: 'c8',
      inSourceTests: options.inSourceTests,
    });
    tasks.push(vitestTask);
@ -153,14 +149,7 @@ export async function libraryGenerator(host: Tree, schema: Schema) {
  }

  if (!options.skipPackageJson) {
-    const installReactTask = await addDependenciesToPackageJson(
-      host,
-      {
-        react: reactVersion,
-        'react-dom': reactDomVersion,
-      },
-      options.compiler === 'swc' ? { '@swc/core': swcCoreVersion } : {}
-    );
+    const installReactTask = await installCommonDependencies(host, options);
    tasks.push(installReactTask);
  }

--- a/packages/react/src/utils/versions.ts
+++ b/packages/react/src/utils/versions.ts
@ -52,3 +52,8 @@ export const isbotVersion = '^3.6.5';
 export const corsVersion = '~2.8.5';
 export const typesCorsVersion = '~2.8.12';
 export const moduleFederationNodeVersion = '~0.9.6';
+
+// style preprocessors
+export const lessVersion = '3.12.2';
+export const sassVersion = '^1.55.0';
+export const stylusVersion = '^0.55.0';
--- a/packages/vite/src/generators/configuration/configuration.ts
+++ b/packages/vite/src/generators/configuration/configuration.ts
@ -59,6 +59,7 @@ export async function viteConfigurationGenerator(tree: Tree, schema: Schema) {
      project: schema.project,
      uiFramework: schema.uiFramework,
      inSourceTests: schema.inSourceTests,
+      coverageProvider: 'c8',
      skipViteConfig: true,
    });
    tasks.push(vitestTask);
--- a/packages/vite/src/generators/vitest/schema.d.ts
+++ b/packages/vite/src/generators/vitest/schema.d.ts
@ -1,6 +1,7 @@
 export interface VitestGeneratorSchema {
  project: string;
  uiFramework: 'react' | 'none';
+  coverageProvider: 'c8' | 'istanbul';
  inSourceTests?: boolean;
  skipViteConfig?: boolean;
 }
--- a/packages/vite/src/generators/vitest/schema.json
+++ b/packages/vite/src/generators/vitest/schema.json
@ -26,6 +26,12 @@
      "type": "boolean",
      "default": false,
      "description": "Skip generating a vite config file"
+    },
+    "coverageProvider": {
+      "type": "string",
+      "enum": ["c8", "istanbul"],
+      "default": "c8",
+      "description": "Coverage provider to use."
    }
  },
  "required": ["project"]
--- a/packages/vite/src/generators/vitest/vitest-generator.ts
+++ b/packages/vite/src/generators/vitest/vitest-generator.ts
@ -1,4 +1,5 @@
 import {
+  addDependenciesToPackageJson,
  convertNxGenerator,
  formatFiles,
  generateFiles,
@ -18,6 +19,10 @@ import { VitestGeneratorSchema } from './schema';

 import { runTasksInSerial } from '@nrwl/workspace/src/utilities/run-tasks-in-serial';
 import initGenerator from '../init/init';
+import {
+  vitestCoverageC8Version,
+  vitestCoverageIstanbulVersion,
+} from '../../utils/versions';

 export async function vitestGenerator(
  tree: Tree,
@ -45,6 +50,22 @@ export async function vitestGenerator(
  createFiles(tree, schema, root);
  updateTsConfig(tree, schema, root);

+  const installCoverageProviderTask = addDependenciesToPackageJson(
+    tree,
+    {},
+    schema.coverageProvider === 'istanbul'
+      ? {
+          '@vitest/coverage-istanbul': vitestCoverageIstanbulVersion,
+        }
+      : {
+          '@vitest/coverage-c8': vitestCoverageC8Version,
+        }
+  );
+  tasks.push(installCoverageProviderTask);
+
+  if (schema.coverageProvider === 'istanbul') {
+  }
+
  await formatFiles(tree);

  return runTasksInSerial(...tasks);
--- a/packages/vite/src/generators/vitest/vitest.spec.ts
+++ b/packages/vite/src/generators/vitest/vitest.spec.ts
@ -10,6 +10,7 @@ describe('vitest generator', () => {
  const options: VitestGeneratorSchema = {
    project: 'my-test-react-app',
    uiFramework: 'react',
+    coverageProvider: 'c8',
  };

  beforeEach(async () => {
@ -126,6 +127,9 @@ describe('vitest generator', () => {
                
                test: {
            globals: true,
+            cache: {
+              dir: '../../node_modules/.vitest'
+            },
            environment: 'jsdom',
            include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
            
@ -169,6 +173,9 @@ describe('vitest generator', () => {
          },
                test: {
            globals: true,
+            cache: {
+              dir: '../../node_modules/.vitest'
+            },
            environment: 'jsdom',
            include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
            includeSource: ['src/**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}']
--- a/packages/vite/src/utils/generator-utils.ts
+++ b/packages/vite/src/utils/generator-utils.ts
@ -354,6 +354,9 @@ export function writeViteConfig(tree: Tree, options: Schema) {
  const testOption = options.includeVitest
    ? `test: {
    globals: true,
+    cache: {
+      dir: '${offsetFromRoot(projectConfig.root)}node_modules/.vitest'
+    },
    environment: 'jsdom',
    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
    ${
--- a/packages/vite/src/utils/versions.ts
+++ b/packages/vite/src/utils/versions.ts
@ -9,3 +9,7 @@ export const vitePluginVueJsxVersion = '^2.1.1';
 export const viteTsConfigPathsVersion = '^3.5.2';
 export const jsdomVersion = '~20.0.3';
 export const vitePluginDtsVersion = '~1.7.1';
+
+// Coverage providers
+export const vitestCoverageC8Version = '~0.25.3';
+export const vitestCoverageIstanbulVersion = '~0.25.3';
--- a/packages/web/src/generators/application/application.ts
+++ b/packages/web/src/generators/application/application.ts
@ -220,6 +220,7 @@ export async function applicationGenerator(host: Tree, schema: Schema) {
    const vitestTask = await vitestGenerator(host, {
      uiFramework: 'none',
      project: options.projectName,
+      coverageProvider: 'c8',
      inSourceTests: options.inSourceTests,
    });
    tasks.push(vitestTask);