Importing with a type attribute of "css" is not supported

[anilkumarum]

Chrome v126 is removed support for assert keyword and replace by with
I import css file and run in Chrome. cssStyleSheet imported and Chrome don't throw any error

import styleCss from "./style.css" with { type: "css" };

When I try to build

esbuild style.js --bundle --minify --target=chrome123 --outfile=build/style.js --format=esm

esbuild throw error

✘ [ERROR] Importing with a type attribute of "css" is not supported

    style.js:1:48:
      1 │ import styleCss from "./style.css" with { type: "css" };

When i use with keyword to import json. esbuild import json file and doesn't throw any error.
Please fix this issue ASAP
Thanks for your efforts

[evanw]

This is happening because esbuild doesn't currently implement bundling CSS imports that use the type: css import attribute (see #3384).

Did you mean to use --external:*.css to tell esbuild to not bundle these files?

[anilkumarum]

when i use assert keyword to import css, --loader:.css=copy work perfectly

esbuild style.js --bundle --minify --target=chrome123 --outfile=build/style.js --format=esm --loader:.css=copy

with is just replacement of assert for iimport css files
I expect --loader:.css=copy should work.

I also use --external:*.css but esbuild throw same error

Importing with a type attribute of "css" is not supported

    style.js:1:48:
       import styleCss from "./style.css" with { type: "css" };

please add support for with keyword same as assert

[evanw]

Ah ok, so this is perhaps a request for with to work with the copy loader. That makes sense.

[mangelozzi]

I have this problem too, I used to use assert { type: "css" } but now the syntax has been deprecated for with { type: "css" }. Maybe in addition to the --supported:import-assertions=true ther should be a --supported:import-with=true flag?

[evanw]

The name is import-attributes not import-with because the syntax is called import attributes. You can find the full list of feature names that can be used with --supported in esbuild's documentation: https://esbuild.github.io/api/#supported

However, enabling support for the with syntax doesn't do anything in this case. The problem is that bundling isn't supported yet, not that the syntax isn't supported.

[mangelozzi]

The name is import-attributes not import-with because the syntax is called import attributes. You can find the full list of feature names that can be used with --supported in esbuild's documentation: https://esbuild.github.io/api/#supported

However, enabling support for the with syntax doesn't do anything in this case. The problem is that bundling isn't supported yet, not that the syntax isn't supported.

Thanks for the clarification. Please would you verify I am understanding you correctly, bundling is currently supported for assert by using --supported:import-assertions=true, and in the future (not ready yet) bundling will be supported for with by using --supported:import-attributes=true ?

I am super excited and waiting for cause this cause I was forced to move to with, but now my build step is no longer working correctly. Cheers!

[evanw]

Thanks for the clarification. Please would you verify I am understanding you correctly, bundling is currently supported for assert by using --supported:import-assertions=true, and in the future (not ready yet) bundling will be supported for with by using --supported:import-attributes=true ?

Yes, that's correct. The reason assert "just works" with esbuild but with doesn't is because with can affect path resolution while assert can't (you can read more about that here). So the bundler basically ignore assert as it is mostly meaningless, but it can't ignore with.