css-loader: `@import` with media query produces incorrect output when the imported file is a entry point
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 */
}
About this issue
- Original URL
- State: closed
- Created a year ago
- Comments: 27 (14 by maintainers)
Commits related to this issue
- Fix theme-auto loading Fix regression from https://github.com/go-gitea/gitea/pull/23481. The conditional CSS import was being stripped away by webpack's `css-loader`, resulting in the dark theme alw... — committed to silverwind/gitea by silverwind a year ago
- Fix theme-auto loading (#23504) Fix regression from https://github.com/go-gitea/gitea/pull/23481. The conditional on the CSS import was being stripped away by webpack's `css-loader`, resulting in... — committed to go-gitea/gitea by silverwind a year ago
- Fix theme-auto loading (#23504) Fix regression from https://github.com/go-gitea/gitea/pull/23481. The conditional on the CSS import was being stripped away by webpack's `css-loader`, resulting in... — committed to silverwind/gitea by silverwind a year ago
- Update mini-css-extract-plugin, remove postcss (#23520) Follow-up and proper fix for https://github.com/go-gitea/gitea/pull/23504 Update to [mini-css-extract-plugin@2.7.4](https://github.com/web... — committed to go-gitea/gitea by silverwind a year ago
Confirmed, thanks for the quick fix! 🎉
No hurry, we have a workaround via postcss until then. But I’ll be very happy to rip it out again after this fix is in 😄.
Yes, I was right, the problem is in the mini-css-extract-plugin, a fix is simple:
https://github.com/webpack-contrib/mini-css-extract-plugin/blob/master/src/index.js#L168
I am very tired today because I moved to a new country and will send a PR and will do release tomorrow, but if you want to send a PR yourself, feel free you have the fix and the test case, in this case I will do just release 😄
I see…give me time to think how I can fix it and there is a problem (I think in MiniCssExtractPlugin.loader, but need check)
Just fyi, the minimal repro so far does not reproduce it, so it’s definitely something else in that config interfering.
https://github.com/silverwind/media-url
It correctly outputs
Will check further what else in the full config could be a cause.