fix: case for images (#4744)

QwikDev · Jul 6, 2023 · b3f014c · b3f014c
1 parent 95832c9
commit b3f014c
Show file tree

Hide file tree

Showing 9 changed files with 27 additions and 20 deletions.
diff --git a/packages/qwik-city/buildtime/runtime-generation/utils.ts b/packages/qwik-city/buildtime/runtime-generation/utils.ts
@@ -1,8 +1,9 @@
 export function getImportPath(importPath: string) {
-  if (importPath.endsWith('.tsx') || importPath.endsWith('.jsx')) {
+  const lowerCasePath = importPath.toLowerCase();
+  if (lowerCasePath.endsWith('.tsx') || lowerCasePath.endsWith('.jsx')) {
     return importPath.slice(0, importPath.length - 4);
   }
-  if (importPath.endsWith('.ts')) {
+  if (lowerCasePath.endsWith('.ts')) {
     return importPath.slice(0, importPath.length - 3);
   }
   return importPath;

diff --git a/packages/qwik-city/buildtime/vite/image-jsx.ts b/packages/qwik-city/buildtime/vite/image-jsx.ts
@@ -2,6 +2,7 @@ import type { OutputFormat } from 'vite-imagetools';
 import type { PluginOption } from 'vite';
 import { optimize } from 'svgo';
 import fs from 'node:fs';
+import path from 'node:path';
 import { parseId } from 'packages/qwik/src/optimizer/src/plugins/plugin';
 import type { QwikCityVitePluginOptions } from './types';
 
@@ -60,9 +61,9 @@ export function imagePlugin(userOpts?: QwikCityVitePluginOptions): PluginOption[
       load: {
         order: 'pre',
         handler: async (id) => {
-          id = id.toLowerCase();
           const { params, pathId } = parseId(id);
-          if (pathId.endsWith('.svg') && params.has('jsx')) {
+          const extension = path.extname(pathId).toLowerCase();
+          if (extension === '.svg' && params.has('jsx')) {
             const code = await fs.promises.readFile(pathId, 'utf-8');
             return {
               code,
@@ -75,7 +76,9 @@ export function imagePlugin(userOpts?: QwikCityVitePluginOptions): PluginOption[
         id = id.toLowerCase();
         const { params, pathId } = parseId(id);
         if (params.has('jsx')) {
-          if (supportedExtensions.some((ext) => pathId.endsWith(ext))) {
+          const extension = path.extname(pathId).toLowerCase();
+
+          if (supportedExtensions.includes(extension)) {
             if (!code.includes('srcSet')) {
               this.error(`Image '${id}' could not be optimized to JSX`);
             }
@@ -89,7 +92,7 @@ export function imagePlugin(userOpts?: QwikCityVitePluginOptions): PluginOption[
     return _jsxQ('img', props, PROPS, undefined, 3, key, dev);
   }`
             );
-          } else if (pathId.endsWith('.svg')) {
+          } else if (extension === '.svg') {
             const svgAttributes: Record<string, string> = {};
             const data = optimize(code, {
               plugins: [

diff --git a/packages/qwik-city/buildtime/vite/plugin.ts b/packages/qwik-city/buildtime/vite/plugin.ts
@@ -1,5 +1,5 @@
 import { createMdxTransformer, type MdxTransform } from '../markdown/mdx';
-import { basename, join, resolve } from 'node:path';
+import { basename, join, resolve, extname } from 'node:path';
 import type { Plugin, PluginOption, UserConfig, Rollup } from 'vite';
 import { loadEnv } from 'vite';
 import { generateQwikCityPlan } from '../runtime-generation/generate-qwik-city-plan';
@@ -190,7 +190,8 @@ function qwikCityPlugin(userOpts?: QwikCityVitePluginOptions): any {
       if (id.startsWith('\0')) {
         return;
       }
-      const isMD = id.endsWith('.md') || id.endsWith('.mdx');
+      const ext = extname(id).toLowerCase();
+      const isMD = ext === '.md' || ext === '.mdx';
       if (ctx && isMD) {
         const fileName = basename(id);
         if (isMenuFileName(fileName)) {

diff --git a/packages/qwik/src/optimizer/src/platform.ts b/packages/qwik/src/optimizer/src/platform.ts
@@ -99,7 +99,7 @@ export const getPlatformInputFiles = async (sys: OptimizerSystem) => {
         } else {
           flatted.push(dir);
         }
-        return flatted.filter((a) => extensions[sys.path.extname(a)]);
+        return flatted.filter((a) => sys.path.extname(a).toLowerCase() in extensions);
       };
 
       const filePaths = await getChildFilePaths(rootDir);

diff --git a/packages/qwik/src/optimizer/src/plugins/image-size-server.ts b/packages/qwik/src/optimizer/src/plugins/image-size-server.ts
@@ -144,7 +144,7 @@ export const getImageSizeServer = (
         const column = parseInt(locParts[locParts.length - 1], 10) - 1;
         let line = parseInt(locParts[locParts.length - 2], 10) - 1;
         const filePath = path.resolve(srcDir, locParts.slice(0, locParts.length - 2).join(':'));
-        const extension = path.extname(filePath);
+        const extension = path.extname(filePath).toLowerCase();
         const buffer = fs.readFileSync(filePath);
         let text = buffer.toString('utf-8');
 

diff --git a/packages/qwik/src/optimizer/src/plugins/plugin.ts b/packages/qwik/src/optimizer/src/plugins/plugin.ts
@@ -434,8 +434,8 @@ export function createPlugin(optimizerOptions: OptimizerOptions = {}) {
       }
       const parsedId = parseId(id);
       let importeePathId = normalizePath(parsedId.pathId);
-      const ext = path.extname(importeePathId);
-      if (RESOLVE_EXTS[ext]) {
+      const ext = path.extname(importeePathId).toLowerCase();
+      if (ext in RESOLVE_EXTS) {
         importer = normalizePath(importer);
         log(`resolveId("${importeePathId}", "${importer}")`);
         const parsedImporterId = parseId(importer);
@@ -459,8 +459,8 @@ export function createPlugin(optimizerOptions: OptimizerOptions = {}) {
     } else if (path.isAbsolute(id)) {
       const parsedId = parseId(id);
       const importeePathId = normalizePath(parsedId.pathId);
-      const ext = path.extname(importeePathId);
-      if (RESOLVE_EXTS[ext]) {
+      const ext = path.extname(importeePathId).toLowerCase();
+      if (ext in RESOLVE_EXTS) {
         log(`resolveId("${importeePathId}", "${importer}")`);
         const transformedOutput = isSSR
           ? ssrTransformedOutputs.get(importeePathId)
@@ -545,10 +545,12 @@ export function createPlugin(optimizerOptions: OptimizerOptions = {}) {
     const path = getPath();
 
     const { pathId } = parseId(id);
-    const { ext, dir, base } = path.parse(pathId);
-
+    const parsedPathId = path.parse(pathId);
+    const dir = parsedPathId.dir;
+    const base = parsedPathId.base;
+    const ext = parsedPathId.ext.toLowerCase();
     if (
-      TRANSFORM_EXTS[ext] ||
+      ext in TRANSFORM_EXTS ||
       TRANSFORM_REGEX.test(pathId) ||
       insideRoots(ext, dir, opts.srcDir, opts.vendorRoots)
     ) {

diff --git a/...rs/apps/qwikcity-test/src/media/test.jpeg → .../apps/qwikcity-test/src/media/MyTest.jpeg b/...rs/apps/qwikcity-test/src/media/test.jpeg → .../apps/qwikcity-test/src/media/MyTest.jpeg
diff --git a/...pps/qwikcity-test/src/media/qwik-logo.svg → ...apps/qwikcity-test/src/media/qwikLogo.svg b/...pps/qwikcity-test/src/media/qwik-logo.svg → ...apps/qwikcity-test/src/media/qwikLogo.svg
diff --git a/starters/apps/qwikcity-test/src/routes/(common)/index.tsx b/starters/apps/qwikcity-test/src/routes/(common)/index.tsx
@@ -1,11 +1,11 @@
 import { component$ } from "@builder.io/qwik";
 import type { DocumentHead } from "@builder.io/qwik-city";
 // @ts-ignore
-import ImageJpeg from "../../media/test.jpeg?jsx";
+import ImageJpeg from "../../media/MyTest.jpeg?jsx";
 // @ts-ignore
-import ImageSvg from "../../media/qwik-logo.svg?jsx";
+import ImageSvg from "../../media/qwikLogo.svg?jsx";
 // @ts-ignore
-import ImageJpegResized from "../../media/test.jpeg?jsx&w=100&h=100&format=avif";
+import ImageJpegResized from "../../media/MyTest.jpeg?jsx&w=100&h=100&format=avif";
 
 export default component$(() => {
   return (