`@import` with media query produces incorrect output when the imported file is a entry point

[silverwind]

Feature Proposal

Support @import list-of-media-queries syntax. Currently the plugin ignores and strips the media query from the output, making runtime-conditional import impossible without additional plugins.

Feature Use Case

@import "./dark.css" (prefers-color-scheme: dark);

Currently the plugin outputs the content of dark.css file without any media query condition, so the CSS is applied unconditionally at runtime:

/* content of dark.css */

A better output would be:

@media (prefers-color-scheme: dark) {
  /* content of dark.css */
}

[silverwind]

Seems I found a solution by adding postcss-loader with thepostcss-import plugin. I still wonder if this feature would be considered for inclusion in css-loader as I feel like this should be possible without postcss baggage.

[alexander-akait]

Are you sure you are using the latest version? It was implement a long time ago, we supports @layer too

#1504

exports[`"import" option should work and output media: result 1`] = `
"@media (prefers-color-scheme: dark) {a {
  color: white;
}
}a {
  color: black;
}
"
`;

[alexander-akait]

Anyway feel free to feedback, and check style-loader and mini-css-extract-plugin version too

[silverwind]

This was the setup where I observed it:

https://github.com/go-gitea/gitea/blob/202803fc69d21763a06d8d0f5a4c46509c18f6f1/webpack.config.js#L138-L153

No style-loader, mini-css-extract-plugin very slightly out of date by one patch release. The import was not filtered. I guess I have to retry with a clean setup, after seeing your tests.

[alexander-akait]

As you can see we have another result... I can provie history when it was implemented and can provide usage in other repos

[silverwind]

Sure thanks, that's more than I expected from this issue. Now it's on me to debug further :)

[alexander-akait]

Hm, you have vue-loader, and they are registering own style-loader (which I think doesn't support it), where do you use this styles?

[alexander-akait]

Can you try to create simple CSS file and do it, like I done in tests

[alexander-akait]

I really want to help, but as you can see we don't have problem inside css-loader

[silverwind]

Just this plain CSS file, so .vue loader is not involved:

https://github.com/go-gitea/gitea/blob/main/web_src/css/themes/theme-auto.css