remix: Side effect CSS import causes an error in .js extension

What version of Remix are you using?

1.12.1

Are all your remix dependencies & dev-dependencies using the same version?

• Yes

Steps to Reproduce

• Create an app
• Install remix’s css-bundle package and add the links remix method as per the docs
• Enable side-effect CSS loading in remix’s config:

/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
  future: {
    unstable_cssSideEffectImports: true,
  },
};

• Create a new route
• Create a component with a .js extension using a CSS import :

import "style.css";

Expected Behavior

The app compiles and runs without any issues and contains the CSS bundle.

Actual Behavior

An error triggers at build time :

✘ [ERROR] [plugin css-side-effects-plugin] This experimental syntax requires enabling one of the following parser plugin(s): "jsx", "flow", "typescript". (22:4)

    node_modules/@babel/parser/lib/index.js:67:31:
      67 │ }, descriptor)), Object.assign(new constructor(), properties));
         ╵                                ^

    at instantiate (/my-remix-project/node_modules/@babel/parser/lib/index.js:67:32)
    at constructor (/my-remix-project/node_modules/@babel/parser/lib/index.js:364:12)
    at Parser.raise (/my-remix-project/node_modules/@babel/parser/lib/index.js:3363:19)
    at Parser.expectOnePlugin (/my-remix-project/node_modules/@babel/parser/lib/index.js:3412:18)
    at Parser.parseExprAtom (/my-remix-project/node_modules/@babel/parser/lib/index.js:11540:18)
    at Parser.parseExprSubscripts (/my-remix-project/node_modules/@babel/parser/lib/index.js:11182:23)
    at Parser.parseUpdate (/my-remix-project/node_modules/@babel/parser/lib/index.js:11164:21)
    at Parser.parseMaybeUnary (/my-remix-project/node_modules/@babel/parser/lib/index.js:11138:23)
    at Parser.parseMaybeUnaryOrPrivate (/my-remix-project/node_modules/@babel/parser/lib/index.js:10967:61)
    at Parser.parseExprOps (/my-remix-project/node_modules/@babel/parser/lib/index.js:10973:23)

  This error came from the "onLoad" callback registered here:

    node_modules/@remix-run/dev/dist/compiler/plugins/cssSideEffectImportsPlugin.js:58:12:
      58 │       build.onLoad({
         ╵             ~~~~~~

    at setup (/my-remix-project/node_modules/@remix-run/dev/dist/compiler/plugins/cssSideEffectImportsPlugin.js:58:13)
    at handlePlugins (/my-remix-project/node_modules/esbuild/lib/main.js:1276:21)
    at buildOrServeImpl (/my-remix-project/node_modules/esbuild/lib/main.js:965:5)
    at Object.buildOrServe (/my-remix-project/node_modules/esbuild/lib/main.js:773:5)
    at /my-remix-project/node_modules/esbuild/lib/main.js:2112:17
    at new Promise (<anonymous>)
    at Object.build (/my-remix-project/node_modules/esbuild/lib/main.js:2111:14)
    at Object.build (/my-remix-project/node_modules/esbuild/lib/main.js:1958:51)
    at appBuildTask (/my-remix-project/node_modules/@remix-run/dev/dist/compiler/compileBrowser.js:164:62)

  The plugin "css-side-effects-plugin" was triggered by this import

    app/pages/Home/index.js:1:17:
      1 │ import Home from "./Home";
        ╵                  ~~~~~~~~


Build failed with 1 error:
node_modules/@babel/parser/lib/index.js:67:31: ERROR: [plugin: css-side-effects-plugin] This experimental syntax requires enabling one of the following parser plugin(s): "jsx", "flow", "typescript". (22:4)
Error
    at Object.onCompileFailure (/my-remix-project/node_modules/@remix-run/dev/dist/cli/commands.js:179:13)
    at Object.compile (/my-remix-project/node_modules/@remix-run/dev/dist/compiler/remixCompiler.js:33:134)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Object.build (/my-remix-project/node_modules/@remix-run/dev/dist/compiler/build.js:33:3)
    at async Object.build (/my-remix-project/node_modules/@remix-run/dev/dist/cli/commands.js:174:3)
    at async Object.run (/my-remix-project/node_modules/@remix-run/dev/dist/cli/run.js:448:7)