fix(tools): properly set babel-make-styles version for vNext (#19519)

microsoft · Aug 30, 2021 · 624ebbf · 624ebbf
1 parent 77a8622
commit 624ebbf
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 33 deletions.
diff --git a/tools/generators/migrate-converged-pkg/index.spec.ts b/tools/generators/migrate-converged-pkg/index.spec.ts
@@ -64,6 +64,15 @@ describe('migrate-converged-pkg generator', () => {
         '@proj/old-v8-bar': '8.0.41',
       },
     });
+    tree = setupDummyPackage(tree, {
+      name: '@proj/babel-make-styles',
+      version: '9.0.0-alpha.0',
+      dependencies: {
+        '@proj/make-styles': '^9.0.0-alpha.1',
+      },
+      tsConfig: { extends: '../../tsconfig.base.json', compilerOptions: {}, include: ['src'] },
+      projectConfiguration: { tags: ['vNext', 'platform:node'], sourceRoot: 'packages/babel-make-styles/src' },
+    });
   });
 
   describe('general', () => {
@@ -881,7 +890,7 @@ describe('migrate-converged-pkg generator', () => {
           '@babel/transform-react-pure-annotations',
         ],
       });
-      expect(devDeps[babelMakeStylesPkg]).toBe('*');
+      expect(devDeps[babelMakeStylesPkg]).toBe('^9.0.0-alpha.0');
     });
 
     it(`should add @fluentui/babel-make-styles plugin only if needed`, async () => {
@@ -895,7 +904,7 @@ describe('migrate-converged-pkg generator', () => {
         }
 
         json.devDependencies = json.devDependencies || {};
-        json.devDependencies[babelMakeStylesPkg] = '*';
+        json.devDependencies[babelMakeStylesPkg] = '^9.0.0-alpha.0';
 
         return json;
       });
@@ -911,7 +920,7 @@ describe('migrate-converged-pkg generator', () => {
           '@babel/transform-react-pure-annotations',
         ],
       });
-      expect(devDeps[babelMakeStylesPkg]).toBe('*');
+      expect(devDeps[babelMakeStylesPkg]).toBe('^9.0.0-alpha.0');
 
       await generator(tree, options);
 
@@ -996,8 +1005,13 @@ describe('migrate-converged-pkg generator', () => {
 
       await generator(tree, { stats: true });
 
-      expect(loggerInfoSpy.mock.calls[2][0]).toEqual('Migrated (0):');
-      expect(loggerInfoSpy.mock.calls[3][0]).toEqual('');
+      // babel-make-styles is booted as migrated
+      expect(loggerInfoSpy.mock.calls[2][0]).toEqual('Migrated (1):');
+      expect(loggerInfoSpy.mock.calls[3][0]).toEqual(
+        expect.stringContaining(stripIndents`
+      - @proj/babel-make-styles
+      `),
+      );
       expect(loggerInfoSpy.mock.calls[5][0]).toEqual(`Not migrated (3):`);
       expect(loggerInfoSpy.mock.calls[6][0]).toEqual(
         expect.stringContaining(stripIndents`
@@ -1012,7 +1026,7 @@ describe('migrate-converged-pkg generator', () => {
       await generator(tree, options);
       await generator(tree, { stats: true });
 
-      expect(loggerInfoSpy.mock.calls[2][0]).toEqual('Migrated (1):');
+      expect(loggerInfoSpy.mock.calls[2][0]).toEqual('Migrated (2):');
       expect(loggerInfoSpy.mock.calls[5][0]).toEqual(`Not migrated (2):`);
     });
   });
@@ -1058,7 +1072,13 @@ describe('migrate-converged-pkg generator', () => {
 function setupDummyPackage(
   tree: Tree,
   options: AssertedSchema &
-    Partial<{ version: string; dependencies: Record<string, string>; compilerOptions: TsConfig['compilerOptions'] }>,
+    Partial<{
+      version: string;
+      dependencies: Record<string, string>;
+      tsConfig: TsConfig;
+      babelConfig: Partial<{ presets: string[]; plugins: string[] }>;
+      projectConfiguration: Partial<ReturnType<typeof readProjectConfiguration>>;
+    }>,
 ) {
   const workspaceConfig = readWorkspaceConfiguration(tree);
   const defaults = {
@@ -1070,7 +1090,10 @@ function setupDummyPackage(
       tslib: '^2.1.0',
       someThirdPartyDep: '^11.1.2',
     },
-    compilerOptions: { baseUrl: '.', typeRoots: ['../../node_modules/@types', '../../typings'] },
+    babelConfig: {
+      plugins: ['module:@fluentui/babel-make-styles', 'annotate-pure-calls', '@babel/transform-react-pure-annotations'],
+    },
+    tsConfig: { compilerOptions: { baseUrl: '.', typeRoots: ['../../node_modules/@types', '../../typings'] } },
   };
 
   const normalizedOptions = { ...defaults, ...options };
@@ -1099,7 +1122,7 @@ function setupDummyPackage(
       dependencies: normalizedOptions.dependencies,
     },
     tsConfig: {
-      compilerOptions: normalizedOptions.compilerOptions,
+      ...normalizedOptions.tsConfig,
     },
     jestConfig: stripIndents`
       const { createConfig } = require('@fluentui/scripts/jest/jest-resources');
@@ -1158,7 +1181,7 @@ function setupDummyPackage(
       visualtests
     `,
     babelConfig: {
-      plugins: ['module:@fluentui/babel-make-styles', 'annotate-pure-calls', '@babel/transform-react-pure-annotations'],
+      ...normalizedOptions.babelConfig,
     },
   };
 
@@ -1173,6 +1196,7 @@ function setupDummyPackage(
     root: paths.root,
     projectType: 'library',
     targets: {},
+    ...options.projectConfiguration,
   });
 
   return tree;

diff --git a/tools/generators/migrate-converged-pkg/index.ts b/tools/generators/migrate-converged-pkg/index.ts
@@ -239,36 +239,46 @@ const templates = {
 
 function normalizeOptions(host: Tree, options: AssertedSchema) {
   const defaults = {};
-  const workspaceConfig = readWorkspaceConfiguration(host);
-  const projectConfig = readProjectConfiguration(host, options.name);
+  const project = getProjectConfig(host, { packageName: options.name });
 
   return {
     ...defaults,
     ...options,
-    projectConfig,
-    workspaceConfig: workspaceConfig,
+    ...project,
+
     /**
      * package name without npmScope (@scopeName)
      */
-    normalizedPkgName: options.name.replace(`@${workspaceConfig.npmScope}/`, ''),
-    paths: {
-      configRoot: joinPathFragments(projectConfig.root, 'config'),
-      packageJson: joinPathFragments(projectConfig.root, 'package.json'),
-      tsconfig: joinPathFragments(projectConfig.root, 'tsconfig.json'),
-      babelConfig: joinPathFragments(projectConfig.root, '.babelrc.json'),
-      jestConfig: joinPathFragments(projectConfig.root, 'jest.config.js'),
-      rootTsconfig: '/tsconfig.base.json',
-      rootJestPreset: '/jest.preset.js',
-      rootJestConfig: '/jest.config.js',
-      npmConfig: joinPathFragments(projectConfig.root, '.npmignore'),
-      storybook: {
-        rootFolder: joinPathFragments(projectConfig.root, '.storybook'),
-        tsconfig: joinPathFragments(projectConfig.root, '.storybook/tsconfig.json'),
-        main: joinPathFragments(projectConfig.root, '.storybook/main.js'),
-        preview: joinPathFragments(projectConfig.root, '.storybook/preview.js'),
-      },
+    normalizedPkgName: options.name.replace(`@${project.workspaceConfig.npmScope}/`, ''),
+  };
+}
+
+function getProjectConfig(tree: Tree, options: { packageName: string }) {
+  const projectConfig = readProjectConfiguration(tree, options.packageName);
+  const workspaceConfig = readWorkspaceConfiguration(tree);
+  const paths = {
+    configRoot: joinPathFragments(projectConfig.root, 'config'),
+    packageJson: joinPathFragments(projectConfig.root, 'package.json'),
+    tsconfig: joinPathFragments(projectConfig.root, 'tsconfig.json'),
+    babelConfig: joinPathFragments(projectConfig.root, '.babelrc.json'),
+    jestConfig: joinPathFragments(projectConfig.root, 'jest.config.js'),
+    rootTsconfig: '/tsconfig.base.json',
+    rootJestPreset: '/jest.preset.js',
+    rootJestConfig: '/jest.config.js',
+    npmConfig: joinPathFragments(projectConfig.root, '.npmignore'),
+    storybook: {
+      rootFolder: joinPathFragments(projectConfig.root, '.storybook'),
+      tsconfig: joinPathFragments(projectConfig.root, '.storybook/tsconfig.json'),
+      main: joinPathFragments(projectConfig.root, '.storybook/main.js'),
+      preview: joinPathFragments(projectConfig.root, '.storybook/preview.js'),
     },
   };
+
+  return {
+    projectConfig,
+    workspaceConfig,
+    paths,
+  };
 }
 
 /**
@@ -698,10 +708,13 @@ function setupBabel(tree: Tree, options: NormalizedSchema) {
 
   const config = templates.babelConfig({ extraPlugins });
 
+  const babelMakeStylesProjectName = `${currentProjectNpmScope}/babel-make-styles`;
   if (shouldAddMakeStylesPlugin) {
-    pkgJson.devDependencies[`${currentProjectNpmScope}/babel-make-styles`] = '*';
+    const babelMakeStylesProject = getProjectConfig(tree, { packageName: babelMakeStylesProjectName });
+    const babelMakeStylesPkgJson: PackageJson = readJson(tree, babelMakeStylesProject.paths.packageJson);
+    pkgJson.devDependencies[babelMakeStylesProjectName] = `^${babelMakeStylesPkgJson.version}`;
   } else {
-    delete pkgJson.devDependencies[`${currentProjectNpmScope}/babel-make-styles`];
+    delete pkgJson.devDependencies[babelMakeStylesProjectName];
   }
 
   tree.write(options.paths.babelConfig, serializeJson(config));