Merge pull request #4569 from Shopify/fd-fix-cdn-css-liquid

Inject CDN in Liquid assets
Shopify · Oct 3, 2024 · 327e554 · 327e554
2 parents f807ec2 + 883b15a
commit 327e554
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 1 deletion.
diff --git a/.changeset/silent-parents-destroy.md b/.changeset/silent-parents-destroy.md
@@ -0,0 +1,5 @@
+---
+'@shopify/theme': patch
+---
+
+Fix CDN URls in .css.liquid files
diff --git a/packages/theme/src/cli/utilities/theme-environment/proxy.ts b/packages/theme/src/cli/utilities/theme-environment/proxy.ts
@@ -14,6 +14,7 @@ import {
   setResponseHeader,
   removeResponseHeader,
   setResponseStatus,
+  send,
 } from 'h3'
 import {extname} from '@shopify/cli-kit/node/path'
 import {lookupMimeType} from '@shopify/cli-kit/node/mimes'
@@ -252,7 +253,16 @@ function proxyStorefrontRequest(event: H3Event, ctx: DevServerContext) {
       // Important to return 3xx responses to the client
       redirect: 'manual',
     },
-    onResponse: patchProxiedResponseHeaders.bind(null, ctx),
+    async onResponse(event, response) {
+      patchProxiedResponseHeaders(ctx, event, response)
+
+      const fileName = url.pathname.split('/').at(-1)
+      if (ctx.localThemeFileSystem.files.has(`assets/${fileName}.liquid`)) {
+        // Patch Liquid assets like .css.liquid
+        const body = await response.text()
+        await send(event, injectCdnProxy(body, ctx))
+      }
+    },
   }).catch(async (error: H3Error) => {
     const pathname = event.path.split('?')[0]!
     if (error.statusCode >= 500 && !pathname.endsWith('.js.map')) {

diff --git a/packages/theme/src/cli/utilities/theme-environment/theme-environment.test.ts b/packages/theme/src/cli/utilities/theme-environment/theme-environment.test.ts
@@ -56,6 +56,14 @@ describe('setupDevServer', () => {
         value: '.another-class {}',
       },
     ],
+    [
+      'assets/file3.css.liquid',
+      {
+        checksum: '3',
+        key: 'assets/file3.css.liquid',
+        value: '.some-class {}',
+      },
+    ],
     [
       'assets/file-with-nbsp.js',
       {
@@ -303,5 +311,27 @@ describe('setupDevServer', () => {
         }),
       )
     })
+
+    test('proxies .css.liquid assets with injected CDN', async () => {
+      const fetchStub = vi.fn(
+        () =>
+          new Response(
+            `.some-class {
+              font-family: "My Font";
+              src: url(//${defaultServerContext.session.storeFqdn}/cdn/shop/t/img/assets/font.woff2);
+            }`,
+            {headers: {'content-type': 'text/css'}},
+          ),
+      )
+
+      vi.stubGlobal('fetch', fetchStub)
+
+      const eventPromise = dispatchEvent('/cdn/shop/t/img/assets/file3.css')
+      await expect(eventPromise).resolves.not.toThrow()
+      expect(vi.mocked(render)).not.toHaveBeenCalled()
+
+      const {body} = await eventPromise
+      expect(body).toMatch(`src: url(/cdn/shop/t/img/assets/font.woff2)`)
+    })
   })
 })