Custom vite middleware is not executed for CSS files

[kamilchlebek]

Command

serve

Description

We are in the process of migrating from using webpack to esbuild/vite.

For development purposes, we need a way to dynamically switch from one theme to another. At this point, we have achieved it by proxying CSS or image files depending on the host name.

After switching to Vite, it turned out that it could work the same, apart from the fact that for CSS resources, our middleware is never executed.

I found a piece of code that seems to be the root cause. The AngularMemoryPlugin handles CSS files in a specific way and never executes next(), which terminates the middleware chain.

angular-cli/packages/angular_devkit/build_angular/src/tools/vite/angular-memory-plugin.ts

Lines 163 to 178 in 3d7b5f7

	if (extension !== '.js' && extension !== '.html') {
	const outputFile = outputFiles.get(pathname);
	if (outputFile?.servable) {
	const mimeType = lookupMimeType(extension);
	if (mimeType) {
	res.setHeader('Content-Type', mimeType);
	}
	res.setHeader('Cache-Control', 'no-cache');
	if (extraHeaders) {
	Object.entries(extraHeaders).forEach(([name, value]) => res.setHeader(name, value));
	}
	res.end(outputFile.contents);
	return;
	}
	}

Describe the solution you'd like

Ideally middleware chain should not be terminated in AngularMemoryPlugin for stylesheets (ie. next() should be called)

Describe alternatives you've considered

In the worst case scenario, we will find another solution for our use case. However, since the issue only pertains to CSS files, it would be really helpful if the middleware is executed for these files as well.

[clydin]

Are you using the proxy option to alter the requests or are you using a custom builder via programmatic usage of the development server builder?

Would it be possible to provide an example of what you are attempting?

[kamilchlebek]

We're using custom builder to pass additional middleware.
At this moment excerpt from our middleware config looks like this:

themeAssets.map(
  (asset: string): NextHandleFunction =>
    function (req, res, next) {
      if (req.url?.includes(`/assets/${asset}`)) {
        const theme = parseThemeName(req)
        if (theme) {
          res.writeHead(302, {
            location: `/assets/context/${theme}/${asset}`,
          })
          res.end()
          return
        }
      }
      next()
    },
)

• themeAssets is an array of assets (logo.png, etc.),
• parseThemeName extracts desired theme from the url.

We'd like to use the same approach for css files (for example, we want redirect theme-default.css to theme-XYZ.css when needed. Currently this is not possible, because custom middlewares are not executed for css files at all.

[clydin]

Ideally, this should be possible with a customized proxy configuration file. I'll see if I can put together an example.

Are you using the customized builder for anything beyond the additional middleware?

[kamilchlebek]

Ideally, this should be possible with a customized proxy configuration file.

It seems to work for images or other static assets, but doesn't for CSS files.

I've even tried to "catch-all" requests with:

export default {
  '/': {
    bypass: function (req, res, proxyOptions) {
      console.log(req.url)
    },
  },
}

When you visit localhost:4200/theme-default.css, only url containing favicon.ico is being logged.
When you visit localhost:4200/asset/header-logo.png, request is correctly intercepted and I can redirect it wherever I need.

Are you using the customized builder for anything beyond the additional middleware?

Yes, we also provide some esbuild plugins - mostly to replace some placeholders (using options.define).