CSS @import statement causes build failure

[opal geyser]

Has anyone seen this error before?

I am attempting to use an internal library that is using css @import statements. However our application will not compile when attempting to use the the component.

Based on the docs, this may be related to either Css Side-Effect Imports (https://remix.run/docs/en/1.16.1/guides/styling#css-side-effect-imports) , or CSS Bundling: (https://remix.run/docs/en/1.16.1/guides/styling#css-bundling) but neither or those seems to have had any effect. I think this may be becasue the @import is in the css file, not importing it into a component.

Is anyone able to offer any guidance on how to get this to compile?

/* Autocomplete.css */
@import '~@namespace/ifl-tokens/build/aurora/css/all.css';

✘ [ERROR] [plugin css-file] Build failed with 1 error:
node_modules/@namespace/autocomplete-ui/dist/Autocomplete.css:1:8: ERROR: Could not resolve "~@namespace/ifl-tokens/build/aurora/css/all.css"

    node_modules/@namespace/autocomplete-ui/dist/Autocomplete.js:83:8:
      83 │ require("./Autocomplete.css");
         ╵         ~~~~~~~~~~~~~~~~~~~~

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

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

    at setup (/Users/username/folder/exp-webapp/node_modules/@remix-run/dev/dist/compiler/plugins/cssFilePlugin.js:61:13)
    at handlePlugins (/Users/username/folder/exp-webapp/node_modules/esbuild/lib/main.js:852:23)
    at Object.buildOrServe (/Users/username/folder/exp-webapp/node_modules/esbuild/lib/main.js:1146:7)
    at /Users/username/folder/exp-webapp/node_modules/esbuild/lib/main.js:2103:17
    at new Promise (<anonymous>)
    at Object.build (/Users/username/folder/exp-webapp/node_modules/esbuild/lib/main.js:2102:14)
    at Object.build (/Users/username/folder/exp-webapp/node_modules/esbuild/lib/main.js:1949:51)
    at Object.compile (/Users/username/folder/exp-webapp/node_modules/@remix-run/dev/dist/compiler/compileBrowser.js:126:43)
    at Object.compile (/Users/username/folder/exp-webapp/node_modules/@remix-run/dev/dist/compiler/remixCompiler.js:28:43)
    at Object.build (/Users/username/folder/exp-webapp/node_modules/@remix-run/dev/dist/compiler/build.js:33:23)
    at Object.build (/Users/username/folder/exp-webapp/node_modules/@remix-run/dev/dist/cli/commands.js:180:17)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Object.run (/Users/username/folder/exp-webapp/node_modules/@remix-run/dev/dist/cli/run.js:496:7)

Build failed with 1 error:
node_modules/@namespace/autocomplete-ui/dist/Autocomplete.js:83:8: ERROR: [plugin: css-file] Build failed with 1 error:
node_modules/@namespace/autocomplete-ui/dist/Autocomplete.css:1:8: ERROR: Could not resolve "~@namespace/ifl-tokens/build/aurora/css/all.css"
Error
    at Object.onCompileFailure (/Users/username/folder/exp-webapp/node_modules/@remix-run/dev/dist/cli/commands.js:185:13)
    at Object.compile (/Users/username/folder/exp-webapp/node_modules/@remix-run/dev/dist/compiler/remixCompiler.js:34:134)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Object.build (/Users/username/folder/exp-webapp/node_modules/@remix-run/dev/dist/compiler/build.js:33:3)
    at async Object.build (/Users/username/folder/exp-webapp/node_modules/@remix-run/dev/dist/cli/commands.js:180:3)
    at async Object.run (/Users/username/folder/exp-webapp/node_modules/@remix-run/dev/dist/cli/run.js:496:7)

[deep bridge]

Does it work if you edit out the leading ~ character on the import specifier?

Are you able to share a minimal repro?

[opal geyser]

@deep bridge thank you checking. I don' think I can share a repro, the issue occurring several dependencies deep in private packages and i'm not honestly sure how I would create something close.

Removing the ~ is causing a separate error. Even if it had cleared it though I don't think I would be able to make the change in the library causing the issue. Is it possible to force the compiler to resolve a specific file, I've had to do that in thte past when using rollup.

/Users/user/folder/exp-webapp/node_modules/@namespace/autocomplete-ui/dist/Autocomplete.css:1
@import '@namespace/ifl-tokens/build/aurora/css/all.css';
^

SyntaxError: Invalid or unexpected token
    at compileFunction (<anonymous>)
    at Object.compileFunction (node:vm:360:18)
    at wrapSafe (node:internal/modules/cjs/loader:1124:15)
    at Module._compile (node:internal/modules/cjs/loader:1160:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1250:10)
    at Module.load (node:internal/modules/cjs/loader:1074:32)
    at Function.Module._load (node:internal/modules/cjs/loader:909:12)
    at Module.require (node:internal/modules/cjs/loader:1098:19)
    at Module.hook.require (/Users/user/folder/exp-webapp/node_modules/dd-trace/packages/dd-trace/src/ritm.js:42:31)
    at Module.require (/Users/user/folder/exp-webapp/node_modules/dd-trace/packages/dd-trace/src/ritm.js:12:27)

[deep bridge]

Hey, just coming back to this. If you can't share a repro, could you maybe try creating a minimal repro with manually-created nested node_modules directories and minimal CSS? This way we don't need your app code or your specific dependencies

[elfin phoenix]

@opal geyser you ever find a way to fix this?

[deep bridge]

@elfin phoenix Are you experiencing this issue too?

[elfin phoenix]

not the same but similar

[deep bridge]

Are you able to share a repro?