[Fix] dynamic-import-chunkname: allow single quotes to match Webpac…

…k support Fixes #1130.
import-js · Jul 7, 2020 · 227d9a2 · 227d9a2
1 parent 569d726
commit 227d9a2
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 31 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,7 @@ This change log adheres to standards from [Keep a CHANGELOG](http://keepachangel
 - [`default`]/TypeScript: avoid crash on `export =` with a MemberExpression ([#1841], thanks [@ljharb])
 - [`extensions`]/importType: Fix @/abc being treated as scoped module ([#1854], thanks [@3nuc])
 - allow using rest operator in named export ([#1878], thanks [@foray1010])
+- [`dynamic-import-chunkname`]: allow single quotes to match Webpack support ([#1848], thanks [@straub])
 
 ### Changed
 - [`export`]: add tests for a name collision with `export * from` ([#1704], thanks @tomprats)
@@ -732,6 +733,7 @@ for info on changes for earlier releases.
 
 [#1878]: https://github.com/benmosher/eslint-plugin-import/pull/1878
 [#1854]: https://github.com/benmosher/eslint-plugin-import/issues/1854
+[#1848]: https://github.com/benmosher/eslint-plugin-import/pull/1848
 [#1841]: https://github.com/benmosher/eslint-plugin-import/issues/1841
 [#1836]: https://github.com/benmosher/eslint-plugin-import/pull/1836
 [#1835]: https://github.com/benmosher/eslint-plugin-import/pull/1835
@@ -1271,3 +1273,4 @@ for info on changes for earlier releases.
 [@3nuc]: https://github.com/3nuc
 [@foray1010]: https://github.com/foray1010
 [@tomprats]: https://github.com/tomprats
+[@straub]: https://github.com/straub
diff --git a/docs/rules/dynamic-import-chunkname.md b/docs/rules/dynamic-import-chunkname.md
@@ -39,12 +39,6 @@ import(
   'someModule',
 );
 
-// using single quotes instead of double quotes
-import(
-  /* webpackChunkName: 'someModule' */
-  'someModule',
-);
-
 // invalid syntax for webpack comment
 import(
   /* totally not webpackChunkName: "someModule" */
@@ -78,6 +72,12 @@ The following patterns are valid:
     /* webpackChunkName: "someModule", webpackPrefetch: true */
     'someModule',
   );
+
+  // using single quotes instead of double quotes
+  import(
+    /* webpackChunkName: 'someModule' */
+    'someModule',
+  );
 ```
 
 ## When Not To Use It

diff --git a/src/rules/dynamic-import-chunkname.js b/src/rules/dynamic-import-chunkname.js
@@ -30,8 +30,8 @@ module.exports = {
     const { webpackChunknameFormat = '[0-9a-zA-Z-_/.]+' } = config || {}
 
     const paddedCommentRegex = /^ (\S[\s\S]+\S) $/
-    const commentStyleRegex = /^( \w+: ("[^"]*"|\d+|false|true),?)+ $/
-    const chunkSubstrFormat = ` webpackChunkName: "${webpackChunknameFormat}",? `
+    const commentStyleRegex = /^( \w+: (["'][^"']*["']|\d+|false|true),?)+ $/
+    const chunkSubstrFormat = ` webpackChunkName: ["']${webpackChunknameFormat}["'],? `
     const chunkSubstrRegex = new RegExp(chunkSubstrFormat)
 
     function run(node, arg) {

diff --git a/tests/src/rules/dynamic-import-chunkname.js b/tests/src/rules/dynamic-import-chunkname.js
@@ -21,8 +21,8 @@ const noLeadingCommentError = 'dynamic imports require a leading comment with th
 const nonBlockCommentError = 'dynamic imports require a /* foo */ style comment, not a // foo comment'
 const noPaddingCommentError = 'dynamic imports require a block comment padded with spaces - /* foo */'
 const invalidSyntaxCommentError = 'dynamic imports require a "webpack" comment with valid syntax'
-const commentFormatError = `dynamic imports require a leading comment in the form /* webpackChunkName: "${commentFormat}",? */`
-const pickyCommentFormatError = `dynamic imports require a leading comment in the form /* webpackChunkName: "${pickyCommentFormat}",? */`
+const commentFormatError = `dynamic imports require a leading comment in the form /* webpackChunkName: ["']${commentFormat}["'],? */`
+const pickyCommentFormatError = `dynamic imports require a leading comment in the form /* webpackChunkName: ["']${pickyCommentFormat}["'],? */`
 
 ruleTester.run('dynamic-import-chunkname', rule, {
   valid: [
@@ -132,6 +132,14 @@ ruleTester.run('dynamic-import-chunkname', rule, {
       options,
       parser,
     },
+    {
+      code: `import(
+        /* webpackChunkName: 'someModule' */
+        'someModule'
+      )`,
+      options,
+      parser,
+    },
     {
       code: `import(
         /* webpackChunkName: "someModule" */
@@ -192,17 +200,33 @@ ruleTester.run('dynamic-import-chunkname', rule, {
     },
     {
       code: `import(
-        /* webpackChunkName: 'someModule' */
+        /* webpackChunkName: "someModule' */
         'someModule'
       )`,
       options,
       parser,
       output: `import(
-        /* webpackChunkName: 'someModule' */
+        /* webpackChunkName: "someModule' */
         'someModule'
       )`,
       errors: [{
-        message: commentFormatError,
+        message: invalidSyntaxCommentError,
+        type: 'CallExpression',
+      }],
+    },
+    {
+      code: `import(
+        /* webpackChunkName: 'someModule" */
+        'someModule'
+      )`,
+      options,
+      parser,
+      output: `import(
+        /* webpackChunkName: 'someModule" */
+        'someModule'
+      )`,
+      errors: [{
+        message: invalidSyntaxCommentError,
         type: 'CallExpression',
       }],
     },
@@ -421,21 +445,6 @@ ruleTester.run('dynamic-import-chunkname', rule, {
         type: 'CallExpression',
       }],
     },
-    {
-      code: `dynamicImport(
-        /* webpackChunkName: 'someModule' */
-        'someModule'
-      )`,
-      options,
-      output: `dynamicImport(
-        /* webpackChunkName: 'someModule' */
-        'someModule'
-      )`,
-      errors: [{
-        message: commentFormatError,
-        type: 'CallExpression',
-      }],
-    },
     {
       code: `dynamicImport(
         /* webpackChunkName "someModule" */
@@ -578,6 +587,14 @@ context('TypeScript', () => {
             type: nodeType,
           }],
         },
+        {
+          code: `import(
+            /* webpackChunkName: 'someModule' */
+            'test'
+          )`,
+          options,
+          parser: typescriptParser,
+        },
       ],
       invalid: [
         {
@@ -624,17 +641,33 @@ context('TypeScript', () => {
         },
         {
           code: `import(
-            /* webpackChunkName: 'someModule' */
+            /* webpackChunkName "someModule' */
             'someModule'
           )`,
           options,
           parser: typescriptParser,
           output: `import(
-            /* webpackChunkName: 'someModule' */
+            /* webpackChunkName "someModule' */
             'someModule'
           )`,
           errors: [{
-            message: commentFormatError,
+            message: invalidSyntaxCommentError,
+            type: nodeType,
+          }],
+        },
+        {
+          code: `import(
+            /* webpackChunkName 'someModule" */
+            'someModule'
+          )`,
+          options,
+          parser: typescriptParser,
+          output: `import(
+            /* webpackChunkName 'someModule" */
+            'someModule'
+          )`,
+          errors: [{
+            message: invalidSyntaxCommentError,
             type: nodeType,
           }],
         },