feat: Allow # symbols in src urls

Replace # symbols with the escaped version before parsing. This allows directives to use the full hex color string
JonasKruckenberg · May 7, 2021 · b5beedd · b5beedd
1 parent fcb47d8
commit b5beedd
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 16 deletions.
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
@@ -22,7 +22,7 @@ export * from './types'
 export * from './builtins'
 export * from './output-formats'
 export * from './util'
-export { parseURL } from './lib/parse-url'
+export { parseURL, extractEntries } from './lib/parse-url'
 export { resolveConfigs } from './lib/resolve-configs' 
 export { generateTransforms } from './lib/generate-transforms'
 export { applyTransforms } from './lib/apply-transforms'

diff --git a/packages/core/src/lib/parse-url.ts b/packages/core/src/lib/parse-url.ts
@@ -1,4 +1,9 @@
-export function parseURL(url: URL) {
+export function parseURL(rawURL: string) {
+    return new URL(rawURL.replaceAll('#', '%23'), 'file://')
+}
+
+export function extractEntries(url: URL) {
+
     const entries: Array<[string, string[]]> = []
 
     for (const [key, value] of url.searchParams) {

diff --git a/packages/rollup/src/index.ts b/packages/rollup/src/index.ts
@@ -1,5 +1,5 @@
 import { Plugin } from 'rollup'
-import { applyTransforms, builtins, generateTransforms, loadImage, parseURL, resolveConfigs, builtinOutputFormats, urlFormat, OutputFormat } from 'imagetools-core'
+import { applyTransforms, builtins, generateTransforms, loadImage, parseURL, resolveConfigs, builtinOutputFormats, urlFormat, OutputFormat, extractEntries } from 'imagetools-core'
 import { createFilter, dataToEsm } from '@rollup/pluginutils'
 import { PluginOptions } from './types'
 import MagicString from 'magic-string'
@@ -36,11 +36,11 @@ export function imagetools(userOptions: Partial<PluginOptions> = {}): Plugin {
         async load(id) {
             if (!filter(id)) return null
 
-            const src = new URL(id, 'file://')
-            const parameters = parseURL(src)
+            const srcURL = parseURL(id)
+            const parameters = extractEntries(srcURL)
             const imageConfigs = resolveConfigs(parameters)
 
-            const img = loadImage(decodeURIComponent(src.pathname))
+            const img = loadImage(decodeURIComponent(srcURL.pathname))
 
             const outputMetadatas = []
 
@@ -54,7 +54,7 @@ export function imagetools(userOptions: Partial<PluginOptions> = {}): Plugin {
 
                 const { image, metadata } = await applyTransforms(transforms, img, pluginOptions.removeMetadata)
 
-                const fileName = basename(src.pathname, extname(src.pathname)) + `.${metadata.format}`
+                const fileName = basename(srcURL.pathname, extname(srcURL.pathname)) + `.${metadata.format}`
 
                 const fileHandle = this.emitFile({
                     name: fileName,
@@ -70,7 +70,7 @@ export function imagetools(userOptions: Partial<PluginOptions> = {}): Plugin {
             let outputFormat: OutputFormat = urlFormat
 
             for (const [key, format] of Object.entries(outputFormats)) {
-                if (src.searchParams.has(key)) {
+                if (srcURL.searchParams.has(key)) {
                     outputFormat = format
                     break
                 }

diff --git a/packages/vite/src/index.ts b/packages/vite/src/index.ts
@@ -1,5 +1,5 @@
 import { Plugin, ResolvedConfig } from "vite";
-import { parseURL, loadImage, builtins, resolveConfigs, applyTransforms, generateTransforms, getMetadata, generateImageID, builtinOutputFormats, urlFormat } from 'imagetools-core'
+import { parseURL, loadImage, builtins, resolveConfigs, applyTransforms, generateTransforms, getMetadata, generateImageID, builtinOutputFormats, urlFormat, extractEntries } from 'imagetools-core'
 import { basename, extname, join } from 'path'
 import { createFilter, dataToEsm } from '@rollup/pluginutils';
 import MagicString from 'magic-string'
@@ -38,16 +38,16 @@ export function imagetools(userOptions: Partial<PluginOptions> = {}): Plugin {
         async load(id) {
             if (!filter(id)) return null
 
-            const src = new URL(id, 'file://')
-            const parameters = parseURL(src)
+            const srcURL = parseURL(id)
+            const parameters = extractEntries(srcURL)
             const imageConfigs = resolveConfigs(parameters)
 
-            const img = loadImage(decodeURIComponent(src.pathname))
+            const img = loadImage(decodeURIComponent(srcURL.pathname))
 
             const outputMetadatas = []
 
             for (let config of imageConfigs) {
-                const id = generateImageID(src, config)
+                const id = generateImageID(srcURL, config)
 
                 const defaultConfig = typeof pluginOptions.defaultDirectives === 'function'
                     ? pluginOptions.defaultDirectives(id)
@@ -59,7 +59,7 @@ export function imagetools(userOptions: Partial<PluginOptions> = {}): Plugin {
                 generatedImages.set(id, image)
 
                 if (!this.meta.watchMode) {
-                    const fileName = basename(src.pathname, extname(src.pathname)) + `.${metadata.format}`
+                    const fileName = basename(srcURL.pathname, extname(srcURL.pathname)) + `.${metadata.format}`
 
                     const fileHandle = this.emitFile({
                         name: fileName,
@@ -78,7 +78,7 @@ export function imagetools(userOptions: Partial<PluginOptions> = {}): Plugin {
             let outputFormat: OutputFormat = urlFormat
 
             for (const [key, format] of Object.entries(outputFormats)) {
-                if (src.searchParams.has(key)) {
+                if (srcURL.searchParams.has(key)) {
                     outputFormat = format
                     break
                 }
@@ -98,7 +98,7 @@ export function imagetools(userOptions: Partial<PluginOptions> = {}): Plugin {
 
                     const image = generatedImages.get(id)
 
-                    if(!image) throw new Error(`vite-imagetools cannot find image with id "${id}" this is likely an internal error`)
+                    if (!image) throw new Error(`vite-imagetools cannot find image with id "${id}" this is likely an internal error`)
 
                     if (pluginOptions.removeMetadata === false) {
                         image.withMetadata()