Skip to content

v0.18.20

Compare
Choose a tag to compare
@github-actions github-actions released this 08 Aug 04:16
  • Support advanced CSS @import rules (#953, #3137)

    CSS @import statements have been extended to allow additional trailing tokens after the import path. These tokens sort of make the imported file behave as if it were wrapped in a @layer, @supports, and/or @media rule. Here are some examples:

    @import url(foo.css);
    @import url(foo.css) layer;
    @import url(foo.css) layer(bar);
    @import url(foo.css) layer(bar) supports(display: flex);
    @import url(foo.css) layer(bar) supports(display: flex) print;
    @import url(foo.css) layer(bar) print;
    @import url(foo.css) supports(display: flex);
    @import url(foo.css) supports(display: flex) print;
    @import url(foo.css) print;

    You can read more about this advanced syntax here. With this release, esbuild will now bundle @import rules with these trailing tokens and will wrap the imported files in the corresponding rules. Note that this now means a given imported file can potentially appear in multiple places in the bundle. However, esbuild will still only load it once (e.g. on-load plugins will only run once per file, not once per import).