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 the dark theme always loading. The old syntax
with `@import` nested inside `@media` also did not work as `css-loader`
(rightfully) ignores such non-standard `@import` syntax that was
previously supported by Less.

Unfortunately, we have to re-introduce postcss to the CSS pipeline to
fix this and I loaded only the minimal plugins to make it work.

There is one variant of the fix that does work without postcss, which is
to exclude the file from transpilation but I did not consider it as it
would have meant the `@import` was being done without a version suffix
in the URL, which would have caused cache issue.

Related: https://github.com/webpack-contrib/css-loader/issues/1503

---------

Co-authored-by: John Olheiser <john.olheiser@gmail.com>

package.json

@@ -33,6 +33,9 @@
     "mini-css-extract-plugin": "2.7.2",
     "monaco-editor": "0.34.1",
     "monaco-editor-webpack-plugin": "7.0.1",
+    "postcss-import": "15.1.0",
+    "postcss-loader": "7.0.2",
+    "postcss-url": "10.1.3",
     "pretty-ms": "8.0.0",
     "sortablejs": "1.15.0",
     "swagger-ui-dist": "4.15.5",

web_src/css/themes/theme-auto.css

@@ -1 +1,2 @@
+/* This import requires postcss-import so the media query is preserved in the output */
 @import "./theme-arc-green.css" (prefers-color-scheme: dark);

webpack.config.js

@@ -145,10 +145,23 @@ export default {
             loader: 'css-loader',
             options: {
               sourceMap: true,
+              importLoaders: 1,
               url: {filter: filterCssImport},
               import: {filter: filterCssImport},
             },
           },
+          {
+            loader: 'postcss-loader', /* for conditional import in theme-auto.css */
+            options: {
+              sourceMap: true,
+              postcssOptions: {
+                plugins: [
+                  'postcss-import',
+                  'postcss-url',
+                ],
+              },
+            },
+          },
         ],
       },
       {