Add support for mjs and cjs extensions with CSS imports

.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

@@ -105,6 +105,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";
@@ -75,7 +76,7 @@ test.describe("CSS side-effect imports", () => {
     `,
     "app/routes/basic-side-effect-test.jsx": js`
       import "../basicSideEffect/styles.css";
-      
+
       export default function() {
         return (
           <div data-testid="basic-side-effect" className="basicSideEffect">
@@ -104,7 +105,7 @@ test.describe("CSS side-effect imports", () => {
     `,
     "app/routes/root-relative-test.jsx": js`
       import "~/rootRelative/styles.css";
-      
+
       export default function() {
         return (
           <div data-testid="root-relative" className="rootRelative">
@@ -139,7 +140,7 @@ test.describe("CSS side-effect imports", () => {
     `,
     "app/routes/image-urls-test.jsx": js`
       import "../imageUrls/styles.css";
-      
+
       export default function() {
         return (
           <div data-testid="image-urls" className="imageUrls">
@@ -179,7 +180,7 @@ test.describe("CSS side-effect imports", () => {
     `,
     "app/routes/root-relative-image-urls-test.jsx": js`
       import "../rootRelativeImageUrls/styles.css";
-      
+
       export default function() {
         return (
           <div data-testid="root-relative-image-urls" className="rootRelativeImageUrls">
@@ -252,7 +253,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';
 
@@ -267,6 +268,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"
 };
 
 /**