fix(dev): fix JSX in JS files with CSS imports (#6309)

remix-run · May 5, 2023 · 6e23fcf · 6e23fcf
1 parent e54cba3
commit 6e23fcf
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 2 deletions.
diff --git a/.changeset/calm-falcons-boil.md b/.changeset/calm-falcons-boil.md
@@ -0,0 +1,5 @@
+---
+"@remix-run/dev": patch
+---
+
+Fix CSS imports in JS files that use JSX
diff --git a/integration/css-side-effect-imports-test.ts b/integration/css-side-effect-imports-test.ts
@@ -51,6 +51,7 @@ test.describe("CSS side-effect imports", () => {
         ...imageUrlsFixture(),
         ...rootRelativeImageUrlsFixture(),
         ...absoluteImageUrlsFixture(),
+        ...jsxInJsFileFixture(),
         ...commonJsPackageFixture(),
         ...esmPackageFixture(),
       },
@@ -240,6 +241,35 @@ test.describe("CSS side-effect imports", () => {
     expect(imgStatus).toBe(200);
   });
 
+  let jsxInJsFileFixture = () => ({
+    "app/jsxInJsFile/styles.css": css`
+      .jsxInJsFile {
+        background: peachpuff;
+        padding: ${TEST_PADDING_VALUE};
+      }
+    `,
+    "app/routes/jsx-in-js-file-test.js": js`
+      import "../jsxInJsFile/styles.css";
+
+      export default function() {
+        return (
+          <div data-testid="jsx-in-js-file" className="jsxInJsFile">
+            JSX in JS file test
+          </div>
+        )
+      }
+    `,
+  });
+  test("JSX in JS file", async ({ page }) => {
+    let app = new PlaywrightFixture(appFixture, page);
+    await app.goto("/jsx-in-js-file-test");
+    let locator = await page.locator("[data-testid='jsx-in-js-file']");
+    let padding = await locator.evaluate(
+      (element) => window.getComputedStyle(element).padding
+    );
+    expect(padding).toBe(TEST_PADDING_VALUE);
+  });
+
   let commonJsPackageFixture = () => ({
     "node_modules/@test-package/commonjs/styles.css": css`
       .commonJsPackage {

diff --git a/packages/remix-dev/compiler/plugins/cssSideEffectImports.ts b/packages/remix-dev/compiler/plugins/cssSideEffectImports.ts
@@ -28,7 +28,7 @@ type Loader = "js" | "jsx" | "ts" | "tsx";
 type Extension = `.${typeof extensions[number]}`;
 
 const loaderForExtension: Record<Extension, Loader> = {
-  ".js": "js",
+  ".js": "jsx", // Remix supports JSX in JS files
   ".jsx": "jsx",
   ".ts": "ts",
   ".tsx": "tsx",
@@ -126,7 +126,7 @@ export const cssSideEffectImportsPlugin = ({
 const additionalLanguageFeatures: ParserOptions["plugins"] = ["decorators"];
 
 const babelPluginsForLoader: Record<Loader, ParserOptions["plugins"]> = {
-  js: [...additionalLanguageFeatures],
+  js: ["jsx", ...additionalLanguageFeatures], // Remix supports JSX in JS files
   jsx: ["jsx", ...additionalLanguageFeatures],
   ts: ["typescript", ...additionalLanguageFeatures],
   tsx: ["typescript", "jsx", ...additionalLanguageFeatures],