[css-minifier] Support layer and supports in @import

[yisibl]

Input

@import 'theme.css'   layer();
@import 'style.css'   layer;
@import url("tabs.css")   layer(framework.component);

@import url('./test.css')   supports(display: grid);
@import url("./test.css")   supports(display:    flex)   screen   and (min-width:   400px);

Output

@import"theme.css"layer();@import"style.css"layer;@import"tabs.css"layer(framework.component);@import"./test.css"supports(display: grid);@import"./test.css"supports(display: flex) screen and (min-width: 400px);

Expected

@import "theme.css" layer();@import "style.css" layer;@import "tabs.css" layer(framework.component);@import "./test.css" supports(display: grid);@import "./test.css" supports(display: flex) screen and (min-width: 400px);

More test case: https://github.com/swc-project/swc/blob/331f91a37f3a0f59d9b66cc87bd20da360ff0749/crates/swc_css_parser/tests/fixture/at-rule/import/input.css#L1-L163

[evanw]

Your issue description doesn't have any words, so I'm not sure why you posted this. It seems like you're implying that whitespace is required before and after the import path. However, I just tested this and all browsers treat these two as exactly the same thing, so what esbuild is doing appears to be correct:

@import 'foo.css' layer(default);
@import'foo.css'layer(default);

Please write a description for your issue. Describe what about esbuild's output is unexpected, and what is expected instead. In this case a link to a relevant specification and/or a real test case that demonstrates a browser rendering difference before/after running esbuild would be helpful.

[evanw]

Marking as unactionable until more information is provided. If more information is not provided, this issue will be closed.

[yisibl]

Sorry, I meant that I need to keep the spaces, but I need to test further which browsers don't support removing spaces.

I'll close this issue first.

[50kudos]

Not sure if it's a good idea to reuse this issue:

I got Bundling with conditional "@import" rules is not currently supported' from line:

@import "./base.css" layer(base);

is there a workaround to make esbuild builds css files? I have this base imported in multiple files that use @layer.

According to the OP's output makes me think esbuild supports (bundling) this, does it?

[firien]

you can't use the bundle option with this import syntax