CSS side effect imports

[markdalgleish]

The primary goal would be to support third-party component libraries that include CSS imports like this:

import "./styles.css";

This pattern is widely supported in other tools which means that Remix consumers and library authors are often surprised when a library is not supported in Remix.

For consistency we might also want to support this in app code too, not just in node_modules.

One challenge with supporting this pattern is that we'd need to figure out a way to handle CSS files differently based on the JS code that imports it. For example, it's possible to have two different types of imports pointing at the same file:

import "./styles.css"; // Added to the CSS bundle provided by `@remix-run/css-bundle` that contains other CSS side effects, CSS Modules, etc.
import stylesHref from "./styles.css"; // Kept as a separate file in the generated assets folder

From an implementation standpoint, this would probably require processing the JavaScript and rewriting the imports so that an esbuild plugin is able to tell them apart, e.g. by adding a query string parameter like import "./styles.css?_bundle", prefixed with an underscore here since it's not considered public API even though consumers could technically write it by hand.

Note that this proposal builds on top of the @remix-run/css-bundle integration that's being introduced with CSS Modules support, meaning that the bundled CSS would be included in your app like this:

import cssBundleHref from '@remix-run/css-bundle';

export const links = () => {
  return [
    ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
  ];
};