Find mdx plugins in next config (resolve #1367)

Author: webpro

packages/knip/fixtures/plugins/next/next.config.js

@@ -1,11 +1,20 @@
+const createMDX = require('@next/mdx');
 const { PHASE_DEVELOPMENT_SERVER } = require('next/constants');
 
 const withTM = require('next-transpile-modules')([]);
 
+const withMDX = createMDX({
+  options: {
+    remarkPlugins: ['remark-frontmatter', ['remark-mdx-frontmatter', { name: 'metadata' }]],
+    rehypePlugins: [['rehype-starry-night']],
+    recmaPlugins: ['recma-export-filepath'],
+  },
+});
+
 module.exports = phase => {
   const config = withTM({});
-  return {
+  return withMDX({
     pageExtensions: ['ts', 'tsx'],
     ...config,
-  };
+  });
 };

packages/knip/src/plugins/next/index.ts

@@ -1,7 +1,7 @@
 import type { IsPluginEnabled, Plugin, ResolveFromAST } from '../../types/config.js';
-import { toProductionEntry } from '../../util/input.js';
+import { toDependency, toProductionEntry } from '../../util/input.js';
 import { hasDependency } from '../../util/plugin.js';
-import { getPageExtensions } from './resolveFromAST.js';
+import { getMdxPlugins, getPageExtensions } from './resolveFromAST.js';
 
 // https://nextjs.org/docs/getting-started/project-structure
 
@@ -43,7 +43,8 @@ const resolveFromAST: ResolveFromAST = sourceFile => {
   const pageExtensions = getPageExtensions(sourceFile);
   const extensions = pageExtensions.length > 0 ? pageExtensions : defaultPageExtensions;
   const patterns = getEntryFilePatterns(extensions);
-  return patterns.map(id => toProductionEntry(id));
+  const mdxPlugins = getMdxPlugins(sourceFile);
+  return [...patterns.map(id => toProductionEntry(id)), ...Array.from(mdxPlugins).map(id => toDependency(id))];
 };
 
 const plugin: Plugin = {

packages/knip/src/plugins/next/resolveFromAST.ts

@@ -1,5 +1,5 @@
 import ts from 'typescript';
-import { getPropertyValues } from '../../typescript/ast-helpers.js';
+import { getDefaultImportName, getImportMap, getPropertyValues, stripQuotes } from '../../typescript/ast-helpers.js';
 
 export const getPageExtensions = (sourceFile: ts.SourceFile) => {
   const pageExtensions: Set<string> = new Set();
@@ -17,3 +17,50 @@ export const getPageExtensions = (sourceFile: ts.SourceFile) => {
 
   return Array.from(pageExtensions);
 };
+
+const isNamedProp = (prop: ts.ObjectLiteralElementLike, name: string) =>
+  ts.isPropertyAssignment(prop) && prop.name.getText() === name;
+
+export const getMdxPlugins = (sourceFile: ts.SourceFile) => {
+  const plugins = new Set<string>();
+  const importMap = getImportMap(sourceFile);
+  const mdxImportName = getDefaultImportName(importMap, '@next/mdx');
+
+  if (!mdxImportName) return plugins;
+
+  function visit(node: ts.Node): boolean {
+    if (ts.isCallExpression(node) && ts.isIdentifier(node.expression) && node.expression.text === mdxImportName) {
+      if (node.arguments.length > 0 && ts.isObjectLiteralExpression(node.arguments[0])) {
+        const options = node.arguments[0]?.properties.find(prop => isNamedProp(prop, 'options'));
+        if (options && ts.isPropertyAssignment(options)) {
+          if (ts.isObjectLiteralExpression(options.initializer)) {
+            for (const pluginType of ['remarkPlugins', 'rehypePlugins', 'recmaPlugins']) {
+              const props = options.initializer.properties.find(prop => isNamedProp(prop, pluginType));
+              if (props && ts.isPropertyAssignment(props)) {
+                if (ts.isArrayLiteralExpression(props.initializer)) {
+                  for (const element of props.initializer.elements) {
+                    if (ts.isStringLiteral(element)) {
+                      plugins.add(stripQuotes(element.text));
+                    } else if (ts.isArrayLiteralExpression(element) && element.elements.length > 0) {
+                      const firstElement = element.elements[0];
+                      if (ts.isStringLiteral(firstElement)) {
+                        plugins.add(stripQuotes(firstElement.text));
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+      return true;
+    }
+
+    return ts.forEachChild(node, visit) ?? false;
+  }
+
+  visit(sourceFile);
+
+  return plugins;
+};

packages/knip/src/typescript/ast-helpers.ts

@@ -313,6 +313,7 @@ export const isModuleExportsAccess = (node: ts.PropertyAccessExpression) =>
 export const getImportMap = (sourceFile: ts.SourceFile) => {
   const importMap = new Map<string, string>();
   for (const statement of sourceFile.statements) {
+    // ESM
     if (ts.isImportDeclaration(statement)) {
       const importClause = statement.importClause;
       const importPath = stripQuotes(statement.moduleSpecifier.getText());
@@ -321,7 +322,24 @@ export const getImportMap = (sourceFile: ts.SourceFile) => {
         for (const element of importClause.namedBindings.elements) importMap.set(element.name.text, importPath);
       }
     }
+
+    // CommonJS
+    if (ts.isVariableStatement(statement)) {
+      for (const declaration of statement.declarationList.declarations) {
+        if (
+          declaration.initializer &&
+          isRequireCall(declaration.initializer) &&
+          ts.isIdentifier(declaration.name) &&
+          ts.isStringLiteral(declaration.initializer.arguments[0])
+        ) {
+          const importName = declaration.name.text;
+          const importPath = stripQuotes(declaration.initializer.arguments[0].text);
+          importMap.set(importName, importPath);
+        }
+      }
+    }
   }
+
   return importMap;
 };
 

packages/knip/test/plugins/next.test.ts

@@ -16,6 +16,11 @@ test('Find dependencies with the Next.js plugin', async () => {
   assert(issues.files.has(join(cwd, 'pages/unused.jsx')));
 
   assert(issues.unlisted['next.config.js']['next-transpile-modules']);
+  assert(issues.unlisted['next.config.js']['@next/mdx']);
+  assert(issues.unlisted['next.config.js']['remark-frontmatter']);
+  assert(issues.unlisted['next.config.js']['remark-mdx-frontmatter']);
+  assert(issues.unlisted['next.config.js']['rehype-starry-night']);
+  assert(issues.unlisted['next.config.js']['recma-export-filepath']);
   assert(issues.unlisted['pages/[[...route]].tsx']['react']);
   assert(issues.unlisted['pages/[[...route]].tsx']['react-helmet']);
   assert(issues.unlisted['pages/home.tsx']['react']);
@@ -26,7 +31,7 @@ test('Find dependencies with the Next.js plugin', async () => {
     ...baseCounters,
     files: 2,
     devDependencies: 0,
-    unlisted: 6,
+    unlisted: 11,
     processed: 13,
     total: 13,
   });