CSS conditional imports

[martinring]

The current implementation does not support conditional imports at all and complains about invalid syntax if media or supports queries come after an import. It would be great if that was handled. I see two options:

1. give out a warning, that conditional imports are not supported

2. wrap the imported css into a query block such that b.css in the following example

   /* file a.css */
   * { color: fuchsia }   

   and

   /* file b.css */
   * { font-weight: bold }
   @import ('./a.css') print;

   would become

   * { font-weight: bold }
   @media print {
      * { color: fuchsia }
   }

[evanw]

Thanks for adding this. I am currently overhauling the linking phase of the bundler and will keep this in mind when working on the CSS part. Doing this isn't quite this straightforward because the conditionally imported file may itself contain an @import rule and @import rules are ignored inside @media rules.

I think it makes sense to add support for parsing and printing this syntax, but to turn this into an error instead of a warning if you try to bundle it and ./a.css is not an external import, since the bundler won't handle it correctly before the linker overhaul lands.

[martinring]

Doing this isn't quite this straightforward because the conditionally imported file may itself contain an @import rule and @import rules are ignored inside @media rules.

Ah yeah, didn't think about that. Seems like a rabbit hole... So it makes sense to raise an error when bundling! Also the intention behind using conditional imports might be reducing the amount of data loaded, which would be nullified by bundling after all.

One more thought though: Since this is different from dynamic imports in js, in the way that we know all potential paths statically here, it might make sense to do some kind of recursive bundling or at least allow plugins to do it. On first thought it seems completely doable: Bundle the conditionally imported css and then handle it like the file loader does and place it in the public path.

This is just an idea.

Thank you for your quick reply and your great work on esbuild, love it!

[evanw]

I think it's totally possible. It dovetails somewhat nicely with some other work I'm doing around CSS code splitting and enforcing external import order. I will keep this issue open to track the eventual implementation of bundling for conditional CSS imports, but push out parsing and printing of them in the next release.

[stevensonmt]

any movement on this feature?

[evanw]

Nope.