fix: unescaped quote marks in style strings. Also add option to remove starting slash from path

Author: huangchenbj

src/core/transform.ts

@@ -4,7 +4,7 @@ import {replace, replaceImport, replaceInStringLiteral, replaceInTemplateElement
 import {StringAsBytes, collectMatchingStrings, parseCode} from "./ast";
 
 export async function transformChunk(codeStr: string, options: TransformOptions): Promise<string> {
-  const { base, publicPath } = options
+  const { base, publicPath, removeStartingSlash } = options
   const [spanOffset, ast] = await parseCode(codeStr);
 
   const strings = collectMatchingStrings(base, ast);
@@ -23,9 +23,9 @@ export async function transformChunk(codeStr: string, options: TransformOptions)
 
     let transformed: string;
     if (str.type === 'TemplateElement') {
-      transformed = replaceInTemplateElement(str, base, publicPath);
+      transformed = replaceInTemplateElement(str, base, publicPath, removeStartingSlash);
     } else if (str.type === 'StringLiteral') {
-      transformed = replaceInStringLiteral(str, base, publicPath);
+      transformed = replaceInStringLiteral(str, base, publicPath, removeStartingSlash);
     }
 
     lastIdx = str.span.end - spanOffset;
@@ -44,16 +44,20 @@ export function transformAsset(code: string, options: TransformOptions) {
 }
 
 export function transformLegacyHtml(code: string, options: TransformOptions) {
-  const { base, publicPath } = options
+  const { base, publicPath, removeStartingSlash } = options
   let content = replaceSrc(publicPath, code)
   content = replace(base, '/', content)
   content = replaceImport(publicPath, content)
   const document = parse(content, { comment: true })
   const legacyPolyfill = document.getElementById('vite-legacy-polyfill')
-  const legacyPolyfillSrc = legacyPolyfill?.getAttribute('src')
+  let legacyPolyfillSrc = legacyPolyfill?.getAttribute('src')
 
   const legacyEntry = document.getElementById('vite-legacy-entry')
-  const legacyEntrySrc = legacyEntry?.getAttribute('data-src')
+  let legacyEntrySrc = legacyEntry?.getAttribute('data-src')
+  if (removeStartingSlash) {
+    legacyPolyfillSrc = legacyPolyfillSrc?.replace(/^\//, '')
+    legacyEntrySrc = legacyEntrySrc?.replace(/^\//, '')
+  }
 
   if (legacyPolyfill) {
     legacyPolyfill.setAttribute('data-src', legacyPolyfillSrc)

src/core/utils.ts

@@ -15,30 +15,39 @@ export function replaceImport(placeholder: string, code: string) {
   return code.replace(/(System.import\()/g, `$1${placeholder}+`)
 }
 
-export function replaceInStringLiteral(literal: StringLiteral, base: string, placeholder: string): string {
+export function replaceInStringLiteral(literal: StringLiteral, base: string, placeholder: string, removeStartingSlash: boolean): string {
   const quoteMark = literal.raw.charAt(0);
   const regex = new RegExp(base, 'g');
   // Keep track of whether we need to add quotation marks at the beginning of the
   // final output
-  let withStartQuote = true;
 
-  const transformedStr = literal.value.replace(regex, (match, index) => {
+  const resourceStartingSlash = removeStartingSlash ? '' : '/';
+
+  /**
+   * original StringLiteral may have escaped quote marks, so we need to use raw instead of value
+   * otherwise, will fail on style strings such as 
+   * "@charset \"UTF-8\";cursor: url(/__vite_dynamic_public_path__/assets/cursor.svg);"
+   * 
+   * since the value is 
+   * @charset "UTF-8";cursor: url(/__vite_dynamic_public_path__/assets/cursor.svg);
+   * 
+   * and does not reflect the escaped quote marks
+   */
+  const transformedStr = literal.raw.replace(regex, (match, index) => {
     let prefix = `${quoteMark}+`;
 
     if (index === 0) {
       prefix = '';
-      withStartQuote = false;
     }
 
-    return `${prefix}${placeholder}+${quoteMark}/`;
+    return `${prefix}${placeholder}+${quoteMark}${resourceStartingSlash}`;
   });
 
-  const prefix = withStartQuote ? quoteMark : '';
-
-  return `${prefix}${transformedStr}${quoteMark}`;
+  return `${transformedStr}`;
 }
 
-export function replaceInTemplateElement(element: TemplateElement, base: string, placeholder: string): string {
+export function replaceInTemplateElement(element: TemplateElement, base: string, placeholder: string, removeStartingSlash: boolean): string {
+  const resourceStartingSlash = removeStartingSlash ? '' : '/';
   const regex = new RegExp(base, 'g');
-  return element.raw.replace(regex, () => '/${' + placeholder + '}/');
+  return element.raw.replace(regex, () => '/${' + placeholder + '}' + resourceStartingSlash);
 }

src/index.ts

@@ -6,17 +6,18 @@ export function dynamicBase(options?: Options): Plugin {
   const defaultOptions: Options = {
     publicPath: 'window.__dynamic_base__',
     transformIndexHtml: false, // maybe default true
-    transformIndexHtmlConfig: {}
+    transformIndexHtmlConfig: {},
+    removeStartingSlash: false
   }
 
-  const { publicPath, transformIndexHtml, transformIndexHtmlConfig } = { ...defaultOptions, ...(options || {}) }
+  const { publicPath, transformIndexHtml, transformIndexHtmlConfig, removeStartingSlash } = { ...defaultOptions, ...(options || {}) }
 
   // const preloadHelperId = 'vite/preload-helper'
   let assetsDir = 'assets'
   let base = '/'
   let legacy = false
-  let baseOptions: TransformOptions = { assetsDir, base, legacy, publicPath: ` ${publicPath}`, transformIndexHtml }
-
+  let baseOptions: TransformOptions = { assetsDir, base, legacy, publicPath: ` ${publicPath}`, transformIndexHtml, removeStartingSlash }
+  
   return {
     name: 'vite-plugin-dynamic-base',
     enforce: 'post',

src/types.ts

@@ -1,5 +1,6 @@
 export interface Options {
   publicPath?: string,
+  removeStartingSlash?: boolean,
   transformIndexHtml?: boolean
   transformIndexHtmlConfig?: TransformIndexHtmlConfig
 }