fix(utils): properly escape Windows paths (#6190)

* fix(utils): properly escape Windows paths

* Use in more places

* Escape path in test

* Fix snapshot

* Better comment

* Fix tests
This commit is contained in:
Joshua Chen 2021-12-25 15:24:21 +08:00 committed by GitHub
parent 6716548b87
commit f02fefb5b7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 38 additions and 37 deletions

View file

@ -11,9 +11,9 @@
* For example, this would fail due to unescaped \: `<img src={require('${filePath}')} />`
* But this would work: `<img src={require('${escapePath(filePath)}')} />`
*
* Workaround for issue in posixPath, maybe we won't need it anymore soon?
* https://github.com/facebook/docusaurus/issues/4730#issuecomment-833530370
* https://github.com/sindresorhus/slash/pull/16#issuecomment-833528479
* posixPath can't be used in all cases, because forward slashes are only valid
* Windows paths when they don't contain non-ascii characters, and posixPath
* doesn't escape those that fail to be converted.
*/
export function escapePath(str: string): string {
const escaped = JSON.stringify(str);

View file

@ -7,18 +7,20 @@
/**
* Convert Windows backslash paths to posix style paths.
* E.g: endi\\lie -> endi/lie
* E.g: endi\lie -> endi/lie
*
* Looks like this code was originally copied from https://github.com/sindresorhus/slash/blob/main/index.js
* Returns original path if the posix counterpart is not valid Windows path.
* This makes the legacy code that uses posixPath safe; but also makes it less
* useful when you actually want a path with forward slashes (e.g. for URL)
*
* Adopted from https://github.com/sindresorhus/slash/blob/main/index.js
*/
export function posixPath(str: string): string {
const isExtendedLengthPath = /^\\\\\?\\/.test(str);
// TODO not sure why we need this
// See https://github.com/sindresorhus/slash/pull/16#issuecomment-833528479
// See https://github.com/facebook/docusaurus/issues/4730#issuecomment-833530370
const hasNonAscii = /[^\u0000-\u0080]+/.test(str); // eslint-disable-line
// Forward slashes are only valid Windows paths when they don't contain non-ascii characters.
// eslint-disable-next-line no-control-regex
const hasNonAscii = /[^\u0000-\u0080]+/.test(str);
if (isExtendedLengthPath || hasNonAscii) {
return str;

View file

@ -7,7 +7,7 @@
import type {RuleSetRule} from 'webpack';
import path from 'path';
import {posixPath} from './posixPath';
import {escapePath} from './escapePath';
import {
WEBPACK_URL_LOADER_LIMIT,
OUTPUT_STATIC_ASSETS_DIR_NAME,
@ -61,12 +61,12 @@ export function getFileLoaderUtils(): FileLoaderUtils {
// Maybe with the ideal image plugin, all md images should be "ideal"?
// This is used to force url-loader+file-loader on markdown images
// https://webpack.js.org/concepts/loaders/#inline
inlineMarkdownImageFileLoader: `!${posixPath(
inlineMarkdownImageFileLoader: `!${escapePath(
require.resolve('url-loader'),
)}?limit=${urlLoaderLimit}&name=${fileLoaderFileName(
'images',
)}&fallback=${posixPath(require.resolve('file-loader'))}!`,
inlineMarkdownLinkFileLoader: `!${posixPath(
)}&fallback=${escapePath(require.resolve('file-loader'))}!`,
inlineMarkdownLinkFileLoader: `!${escapePath(
require.resolve('file-loader'),
)}?name=${fileLoaderFileName('files')}!`,
};