Add support for mjs and cjs extensions with CSS side-effect imports (#…

…5564)

Co-authored-by: Logan McAnsh <logan@mcan.sh>
Co-authored-by: Mark Dalgleish <mark.john.dalgleish@gmail.com>

.changeset/css-side-effect-import-extensions.md

@@ -0,0 +1,5 @@
+---
+"@remix-run/dev": patch
+---
+
+Add support for `.mjs` and `.cjs` extensions when detecting CSS side-effect imports

contributors.yml

@@ -107,6 +107,7 @@
 - derekr
 - derenge
 - developit
+- devongovett
 - dgurns
 - dhargitai
 - dhmacs

integration/css-side-effect-imports-test.ts

@@ -7,6 +7,7 @@ import {
   createFixture,
   css,
   js,
+  json,
 } from "./helpers/create-fixture";
 
 const TEST_PADDING_VALUE = "20px";
@@ -251,7 +252,7 @@ test.describe("CSS side-effect imports", () => {
         padding: ${TEST_PADDING_VALUE};
       }
     `,
-    "node_modules/@test-package/esm/index.js": js`
+    "node_modules/@test-package/esm/index.mjs": js`
       import React from 'react';
       import './styles.css';
 
@@ -266,6 +267,9 @@ test.describe("CSS side-effect imports", () => {
         );
       };
     `,
+    "node_modules/@test-package/esm/package.json": json({
+      exports: './index.mjs'
+    }),
     "app/routes/esm-package-test.jsx": js`
       import { Test } from "@test-package/esm";
       export default function() {

packages/remix-dev/compiler/plugins/cssSideEffectImportsPlugin.ts

@@ -21,17 +21,19 @@ export function isCssSideEffectImportPath(path: string): boolean {
   return cssSideEffectFilter.test(path);
 }
 
-const loaders = ["js", "jsx", "ts", "tsx"] as const;
-const allJsFilesFilter = new RegExp(`\\.(${loaders.join("|")})$`);
+const extensions = ["js", "jsx", "ts", "tsx", "mjs", "cjs"] as const;
+const allJsFilesFilter = new RegExp(`\\.(${extensions.join("|")})$`);
 
-type Loader = typeof loaders[number];
-type Extension = `.${Loader}`;
+type Loader = 'js' | 'jsx' | 'ts' | 'tsx';
+type Extension = `.${typeof extensions[number]}`;
 
 const loaderForExtension: Record<Extension, Loader> = {
   ".js": "js",
   ".jsx": "jsx",
   ".ts": "ts",
   ".tsx": "tsx",
+  ".mjs": "js",
+  ".cjs": "js"
 };
 
 /**