diff --git a/packages/babel-plugin/src/__snapshots__/index.test.js.snap b/packages/babel-plugin/src/__snapshots__/index.test.js.snap index 41a1b43b..0d2d08eb 100644 --- a/packages/babel-plugin/src/__snapshots__/index.test.js.snap +++ b/packages/babel-plugin/src/__snapshots__/index.test.js.snap @@ -5,7 +5,7 @@ exports[`plugin aggressive import should work with destructuration 1`] = ` chunkName({ foo }) { - return \`\${foo}\`; + return \`\${foo}\`.replace(/[^a-zA-Z0-9_!§$()=\\\\-^°]+/g, \\"-\\"); }, isReady(props) { @@ -48,7 +48,7 @@ exports[`plugin aggressive import should work with destructuration 1`] = ` exports[`plugin aggressive import with "webpackChunkName" should replace it 1`] = ` "loadable({ chunkName(props) { - return \`\${props.foo}\`; + return \`\${props.foo}\`.replace(/[^a-zA-Z0-9_!§$()=\\\\-^°]+/g, \\"-\\"); }, isReady(props) { @@ -87,7 +87,7 @@ exports[`plugin aggressive import with "webpackChunkName" should replace it 1`] exports[`plugin aggressive import without "webpackChunkName" should support complex request 1`] = ` "loadable({ chunkName(props) { - return \`dir-\${props.foo}-test\`; + return \`dir-\${props.foo}-test\`.replace(/[^a-zA-Z0-9_!§$()=\\\\-^°]+/g, \\"-\\"); }, isReady(props) { @@ -128,7 +128,7 @@ exports[`plugin aggressive import without "webpackChunkName" should support dest chunkName({ foo }) { - return \`dir-\${foo}-test\`; + return \`dir-\${foo}-test\`.replace(/[^a-zA-Z0-9_!§$()=\\\\-^°]+/g, \\"-\\"); }, isReady(props) { @@ -171,7 +171,7 @@ exports[`plugin aggressive import without "webpackChunkName" should support dest exports[`plugin aggressive import without "webpackChunkName" should support simple request 1`] = ` "loadable({ chunkName(props) { - return \`\${props.foo}\`; + return \`\${props.foo}\`.replace(/[^a-zA-Z0-9_!§$()=\\\\-^°]+/g, \\"-\\"); }, isReady(props) { @@ -327,7 +327,7 @@ exports[`plugin simple import should transform path into "chunk-friendly" name 1 exports[`plugin simple import should work with template literal 1`] = ` "loadable({ chunkName() { - return \`ModA\`; + return \`ModA\`.replace(/[^a-zA-Z0-9_!§$()=\\\\-^°]+/g, \\"-\\"); }, isReady(props) { diff --git a/packages/babel-plugin/src/properties/chunkName.js b/packages/babel-plugin/src/properties/chunkName.js index 5989e9fd..2439132e 100644 --- a/packages/babel-plugin/src/properties/chunkName.js +++ b/packages/babel-plugin/src/properties/chunkName.js @@ -2,6 +2,8 @@ import vm from 'vm' import { getImportArg } from '../util' const WEBPACK_CHUNK_NAME_REGEXP = /webpackChunkName/ +// https://github.com/webpack/webpack/blob/master/lib/Template.js +const WEBPACK_PATH_NAME_NORMALIZE_REPLACE_REGEX = /[^a-zA-Z0-9_!§$()=\-^°]+/g function readWebpackCommentValues(str) { try { @@ -39,11 +41,11 @@ function getRawChunkNameFromCommments(importArg) { } function moduleToChunk(str) { - return str ? str.replace(/^[./]+|(\.js$)/g, '').replace(/\//, '-') : '' + return str ? str.replace(/^[./]+|(\.js$)/g, '').replace(WEBPACK_PATH_NAME_NORMALIZE_REPLACE_REGEX, '-') : '' } function replaceQuasiValue(str) { - return str ? str.replace(/\//g, '-') : str + return str ? str.replace(WEBPACK_PATH_NAME_NORMALIZE_REPLACE_REGEX, '-') : str } export default function chunkNameProperty({ types: t }) { @@ -109,6 +111,19 @@ export default function chunkNameProperty({ types: t }) { return `${v1}[request]${v2}` } + function sanitizeChunkNameTemplateLiteral(node) { + return t.callExpression( + t.memberExpression( + node, + t.identifier('replace') + ), + [ + t.regExpLiteral(WEBPACK_PATH_NAME_NORMALIZE_REPLACE_REGEX.source, 'g'), + t.stringLiteral('-') + ] + ) + } + function replaceChunkName(callPath) { const agressiveImport = isAgressiveImport(callPath) const values = getExistingChunkNameComment(callPath) @@ -118,14 +133,22 @@ export default function chunkNameProperty({ types: t }) { return t.stringLiteral(values.webpackChunkName) } - const chunkNameNode = generateChunkNameNode(callPath) - const webpackChunkName = t.isTemplateLiteral(chunkNameNode) - ? chunkNameFromTemplateLiteral(chunkNameNode) - : chunkNameNode.value + let chunkNameNode = generateChunkNameNode(callPath) + let webpackChunkName + + if (t.isTemplateLiteral(chunkNameNode)) { + webpackChunkName = chunkNameFromTemplateLiteral(chunkNameNode) + chunkNameNode = sanitizeChunkNameTemplateLiteral(chunkNameNode) + } else { + webpackChunkName = chunkNameNode.value + } + addOrReplaceChunkNameComment(callPath, { webpackChunkName }) return chunkNameNode } + + return ({ callPath, funcPath }) => { const chunkName = replaceChunkName(callPath)