Add support for mjs and cjs extensions with CSS imports

contributors.yml

@@ -105,6 +105,7 @@
 - derekr
 - derenge
 - developit
+- devongovett
 - dgurns
 - dhargitai
 - dhmacs
@@ -166,6 +167,7 @@
 - gyx1000
 - hadizz
 - hardingmatt
+- harmony7
 - helderburato
 - HenryVogt
 - hicksy

docs/other-api/adapter.md

@@ -7,7 +7,7 @@ order: 2
 
 ## Official Adapters
 
-Idiomatic Remix apps can generally be deployed anywhere because Remix adapt's the server's request/response to the [Web Fetch API][web-fetch-api]. It does this through adapters. We maintain a few adapters:
+Idiomatic Remix apps can generally be deployed anywhere because Remix adapts the server's request/response to the [Web Fetch API][web-fetch-api]. It does this through adapters. We maintain a few adapters:
 
 - `@remix-run/architect`
 - `@remix-run/cloudflare-pages`
@@ -26,6 +26,7 @@ Each adapter has the same API. In the future we may have helpers specific to the
 
 ## Community Adapters
 
+- [`@fastly/remix-server-adapter`][fastly-remix-server-adapter] - For [Fastly Compute@Edge][fastly-compute-at-edge].
 - [`@mcansh/remix-fastify`][remix-fastify] - For [Fastify][fastify].
 - [`@mcansh/remix-raw-http`][remix-raw-http] - For a good ol barebones Node server.
 - [`remix-google-cloud-functions`][remix-google-cloud-functions] - For [Google Cloud][google-cloud-functions] and [Firebase][firebase-functions] functions.
@@ -179,6 +180,8 @@ addEventListener("fetch", (event) => {
 ```
 
 [web-fetch-api]: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
+[fastly-remix-server-adapter]: https://github.com/fastly/remix-compute-js/tree/main/packages/remix-server-adapter
+[fastly-compute-at-edge]: https://developer.fastly.com/learning/compute/
 [remix-google-cloud-functions]: https://github.com/penx/remix-google-cloud-functions
 [google-cloud-functions]: https://cloud.google.com/functions
 [firebase-functions]: https://firebase.google.com/docs/functions

docs/pages/stacks.md

@@ -63,7 +63,7 @@ The [token just needs `repo` access][repo access token].
 
 #### Dependency versions
 
-If you set the any dependencies in package.json to `*`, the Remix CLI will change it to a semver caret of the latest released version:
+If you set any dependencies in package.json to `*`, the Remix CLI will change it to a semver caret of the latest released version:
 
 ```diff
 -   "remix": "*",

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"
 };
 
 /**