custom imports bundling breaks when used in API routes and SSR pages

[thescientist13]

Summary

If trying to do something like this with custom imports

import styles from './component.css';

Rollup throws an error on trying to bundle on the CSS file when used in the aforementioned contexts from the issue title

        SyntaxError: Unexpected token (1:4)
        at pp$4.raise (file:///Users/owenbuckley/Workspace/project-evergreen/greenwood/node_modules/rollup/dist/es/shared/rollup.js:19420:13)
        at pp$9.unexpected (file:///Users/owenbuckley/Workspace/project-evergreen/greenwood/node_modules/rollup/dist/es/shared/rollup.js:16714:8)
        at pp$9.semicolon (file:///Users/owenbuckley/Workspace/project-evergreen/greenwood/node_modules/rollup/dist/es/shared/rollup.js:16691:66)
        at pp$8.parseExpressionStatement (file:///Users/owenbuckley/Workspace/project-evergreen/greenwood/node_modules/rollup/dist/es/shared/rollup.js:17174:8)
        at pp$8.parseStatement (file:///Users/owenbuckley/Workspace/project-evergreen/greenwood/node_modules/rollup/dist/es/shared/rollup.js:16907:24)
        at pp$8.parseTopLevel (file:///Users/owenbuckley/Workspace/project-evergreen/greenwood/node_modules/rollup/dist/es/shared/rollup.js:16771:21)
        at Parser.parse (file:///Users/owenbuckley/Workspace/project-evergreen/greenwood/node_modules/rollup/dist/es/shared/rollup.js:16543:15)
        at Function.parse (file:///Users/owenbuckley/Workspace/project-evergreen/greenwood/node_modules/rollup/dist/es/shared/rollup.js:16593:35)
        at Graph.contextParse (file:///Users/owenbuckley/Workspace/project-evergreen/greenwood/node_modules/rollup/dist/es/shared/rollup.js:22959:38)
        at Object.transform (/Users/owenbuckley/Workspace/project-evergreen/greenwood/node_modules/@web/rollup-plugin-import-meta-assets/src/rollup-plugin-import-meta-assets.js:65:24) {
      pos: 4,
      loc: Position { line: 1, column: 4 },
      raisedAt: 5,
      code: 'PLUGIN_ERROR',
      plugin: 'rollup-plugin-import-meta-assets',
      hook: 'transform',
      id: '/Users/owenbuckley/Workspace/project-evergreen/greenwood/packages/plugin-import-css/test/cases/exp-serve.ssr/src/components/card.css',
      watchFiles: [
        '/Users/owenbuckley/Workspace/project-evergreen/greenwood/packages/plugin-import-css/test/cases/exp-serve.ssr/.greenwood/_products.js',
        '/Users/owenbuckley/Workspace/project-evergreen/greenwood/packages/plugin-import-css/test/cases/exp-serve.ssr/src/pages/products.js',
        '/Users/owenbuckley/Workspace/project-evergreen/greenwood/packages/plugin-import-css/test/cases/exp-serve.ssr/src/components/card.js',
        '/Users/owenbuckley/Workspace/project-evergreen/greenwood/packages/plugin-import-css/test/cases/exp-serve.ssr/src/services/products.js',
        '/Users/owenbuckley/Workspace/project-evergreen/greenwood/packages/cli/src/lib/execute-route-module.js',
        '/Users/owenbuckley/Workspace/project-evergreen/greenwood/packages/plugin-import-css/test/cases/exp-serve.ssr/src/components/card.css'
      ]
    }
  

You can see a full reproduction here

Details

It looks like there is also a "bug" on @web/rollup-plugin-import-meta-assets in which it will only emit references found in new URL as an asset, instead of chunk (at least for .js files). This leads to 404s when resolving these assets

          Serve command with API specific behaviors for an HTML ("fragment") API
    Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/owenbuckley/Workspace/project-evergreen/greenwood/packages/plugin-import-css/test/cases/exp-serve.ssr/public/api/assets/card.css' imported from /Users/owenbuckley/Workspace/project-evergreen/greenwood/packages/plugin-import-css/test/cases/exp-serve.ssr/public/api/assets/card-78d7632f.js
        at new NodeError (node:internal/errors:393:5)
        at finalizeResolution (node:internal/modules/esm/resolve:323:11)
        at moduleResolve (node:internal/modules/esm/resolve:916:10)
        at defaultResolve (node:internal/modules/esm/resolve:1124:11)
        at nextResolve (node:internal/modules/esm/loader:163:28)
        at resolve (file:///Users/owenbuckley/Workspace/project-evergreen/greenwood/test/test-loader.js:21:12)
        at nextResolve (node:internal/modules/esm/loader:163:28)
        at ESMLoader.resolve (node:internal/modules/esm/loader:841:30)
        at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
        at ModuleWrap. (node:internal/modules/esm/module_job:76:40) {
      code: 'ERR_MODULE_NOT_FOUND'
    }
  

As seen in the linked reproduction above, we should make now make sure that .js files get emitted as a chunk.

---

As this is an experimental feature and will require a decent change to fix / support, will target this fix against the v0.29.0 alpha release line.