index.css does not match index.css.map #5785

@silverwind commented on GitHub (Jul 25, 2020):

I can only imagine this being a bug in either cssnano-webpack-plugin or cssnano. The former was switched from optimize-css-assets-webpack-plugin specifically because of better source map support.

@silverwind commented on GitHub (Jul 25, 2020): I can only imagine this being a bug in either [cssnano-webpack-plugin](https://github.com/webpack-contrib/cssnano-webpack-plugin) or [cssnano](https://github.com/cssnano/cssnano). The former was switched from [optimize-css-assets-webpack-plugin](https://github.com/NMFR/optimize-css-assets-webpack-plugin) specifically because of better source map support.

GiteaMirror commented

@CL-Jeremy commented on GitHub (Jul 26, 2020):

I’ve just tested and it appeared already in #9983. It’s not the fact that the source map was any wrong, but rather correct whereas the actual CSS is faulty. Can’t imagine how that could happen since the translator is the same, isn’t it? And if cssnano were to blame, how come it didn’t happen earlier (the commit right before that PR was alright FYI)?

@CL-Jeremy commented on GitHub (Jul 26, 2020): I’ve just tested and it appeared already in #9983. It’s not the fact that the source map was any wrong, but rather correct whereas the actual CSS is faulty. Can’t imagine how that could happen since the translator is the same, isn’t it? And if cssnano were to blame, how come it didn’t happen earlier (the commit right before that PR was alright FYI)?

GiteaMirror commented

@silverwind commented on GitHub (Jul 26, 2020):

Can you try with ui.USE_SERVICE_WORKER = false? Thought highly unlikely it has any effect, I just want to ensure this is not a serviceworker cache issue (I think those are not totally resolved yet).

@silverwind commented on GitHub (Jul 26, 2020): Can you try with `ui.USE_SERVICE_WORKER = false`? Thought highly unlikely it has any effect, I just want to ensure this is not a serviceworker cache issue (I think those are not totally resolved yet).

GiteaMirror commented

@CL-Jeremy commented on GitHub (Jul 26, 2020):

I wasn’t actually talking about the result, but the actual files generated in the build directory. The resulting static file was already different after #9983. Now the fact a CSS file mismatches the source map is another weird thing.

But if you mean serviceworker would generate something else that shadows index.css, then it becomes even weirder...

Edit: added the setting. Effective rules do not change (as expected). And double-checked the static files are freshly generated each time.
Just tested again, and it’s indeed a bug somewhere in the translation. Swapping @default-fonts against any other expressions (e.g. Test, @monospaced-fonts, 'A B C') in the :lang blocks would resolve correctly.

Edit 2: something very curious happened when I do make clean-all && make generate: the mixins seem read from some cache and unifies the results, giving (at global scope) something like:

.markdown:not(code),textarea{font-family:BlinkMacSystemFont,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,Helvetica,Arial}h1,h2,h3,h4,h5{font-family:Roboto,BlinkMacSystemFont,system-ui,-apple-system,Segoe UI,Ubuntu,Cantarell,Noto Sans,sans-serif,Helvetica,Arial}.home .hero h1,.home .hero h2{font-family:PT Sans Narrow,Roboto,BlinkMacSystemFont,system-ui,-apple-system,Segoe UI,Ubuntu,Cantarell,Noto Sans,sans-serif,Helvetica,Arial}

with

- @default-fonts: -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, Helvetica, Arial;
+ @default-fonts: BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, Helvetica, Arial;

NB: this is all tested with detached HEAD at 1019913ea.

@CL-Jeremy commented on GitHub (Jul 26, 2020): I wasn’t actually talking about the result, but the actual files generated in the build directory. The resulting static file was already different after #9983. Now the fact a CSS file mismatches the source map is another weird thing. But if you mean serviceworker would generate something else that shadows `index.css`, then it becomes even weirder... Edit: added the setting. Effective rules do not change (as expected). And double-checked the static files are freshly generated each time. Just tested again, and it’s indeed a bug somewhere in the translation. Swapping `@default-fonts` against any other expressions (e.g. `Test, @monospaced-fonts, 'A B C'`) in the `:lang` blocks would resolve correctly. Edit 2: something very curious happened when I do `make clean-all && make generate`: the mixins seem read from some cache and unifies the results, giving (at global scope) something like: ``` .markdown:not(code),textarea{font-family:BlinkMacSystemFont,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,Helvetica,Arial}h1,h2,h3,h4,h5{font-family:Roboto,BlinkMacSystemFont,system-ui,-apple-system,Segoe UI,Ubuntu,Cantarell,Noto Sans,sans-serif,Helvetica,Arial}.home .hero h1,.home .hero h2{font-family:PT Sans Narrow,Roboto,BlinkMacSystemFont,system-ui,-apple-system,Segoe UI,Ubuntu,Cantarell,Noto Sans,sans-serif,Helvetica,Arial} ``` with ```diff - @default-fonts: -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, Helvetica, Arial; + @default-fonts: BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, Helvetica, Arial; ``` NB: this is all tested with detached HEAD at `1019913ea`.

GiteaMirror commented

@CL-Jeremy commented on GitHub (Jul 26, 2020):

I did a quick grep -rl -- '-apple-system' . and the result (after removing it from _base.less) was:

./node_modules/swagger-ui/dist/swagger-ui.css.map
./node_modules/swagger-ui/dist/swagger-ui.css
./node_modules/stylelint/lib/rules/font-family-no-duplicate-names/README.md
./node_modules/stylelint/lib/rules/font-family-name-quotes/README.md
./node_modules/postcss-preset-env/README.md
./node_modules/postcss-preset-env/index.mjs.map
./node_modules/postcss-preset-env/index.mjs
./node_modules/postcss-preset-env/index.js.map
./node_modules/postcss-preset-env/index.js
./node_modules/less/test/css/3rd-party/bootstrap4.css
./node_modules/csso/dist/csso.min.js
./node_modules/csso/dist/csso.js
./node_modules/css-tree/data/patch.json
./node_modules/css-tree/dist/default-syntax.json
./node_modules/css-tree/dist/csstree.min.js
./node_modules/css-tree/dist/csstree.js
./public/vendor/plugins/vue-calendar-heatmap/vue-calendar-heatmap.css

Any chance they could do anything strange here? I believe none of the above actually comes from #9983.

@CL-Jeremy commented on GitHub (Jul 26, 2020): I did a quick `grep -rl -- '-apple-system' .` and the result (after removing it from `_base.less`) was: ``` ./node_modules/swagger-ui/dist/swagger-ui.css.map ./node_modules/swagger-ui/dist/swagger-ui.css ./node_modules/stylelint/lib/rules/font-family-no-duplicate-names/README.md ./node_modules/stylelint/lib/rules/font-family-name-quotes/README.md ./node_modules/postcss-preset-env/README.md ./node_modules/postcss-preset-env/index.mjs.map ./node_modules/postcss-preset-env/index.mjs ./node_modules/postcss-preset-env/index.js.map ./node_modules/postcss-preset-env/index.js ./node_modules/less/test/css/3rd-party/bootstrap4.css ./node_modules/csso/dist/csso.min.js ./node_modules/csso/dist/csso.js ./node_modules/css-tree/data/patch.json ./node_modules/css-tree/dist/default-syntax.json ./node_modules/css-tree/dist/csstree.min.js ./node_modules/css-tree/dist/csstree.js ./public/vendor/plugins/vue-calendar-heatmap/vue-calendar-heatmap.css ``` Any chance they could do anything strange here? I believe none of the above actually comes from #9983.

GiteaMirror commented

@silverwind commented on GitHub (Jul 26, 2020):

But if you mean serviceworker would generate something else that shadows index.css

No, that's not possible. I was just thinking maybe it was serving a cached asset before your change but I'm pretty sure cache invalidation is working correctly for it and .map files are probable not even cached by the worker.

@silverwind commented on GitHub (Jul 26, 2020): > But if you mean serviceworker would generate something else that shadows index.css No, that's not possible. I was just thinking maybe it was serving a cached asset before your change but I'm pretty sure cache invalidation is working correctly for it and `.map` files are probable not even cached by the worker.

GiteaMirror commented

@silverwind commented on GitHub (Jul 26, 2020):

I think it's more likely you've hit some bug in the Less source map generation. I want to move off Less variables to CSS variables for the fonts (https://github.com/go-gitea/gitea/issues/11045) which may fix that situation.

@silverwind commented on GitHub (Jul 26, 2020): I think it's more likely you've hit some bug in the Less source map generation. I want to move off Less variables to CSS variables for the fonts (https://github.com/go-gitea/gitea/issues/11045) which may fix that situation.

GiteaMirror commented

@silverwind commented on GitHub (Aug 17, 2020):

Is this still an issue? We've now switched to the new css-minimizer-webpack-plugin and I personally have not noticed any issue with its sourcemaps.

@silverwind commented on GitHub (Aug 17, 2020): Is this still an issue? We've now switched to the new [css-minimizer-webpack-plugin](https://github.com/webpack-contrib/css-minimizer-webpack-plugin) and I personally have not noticed any issue with its sourcemaps.

GiteaMirror commented

@CL-Jeremy commented on GitHub (Aug 17, 2020):

I'll take a look. Running this on my own web server takes almost forever (screenshot from the version referred to in this issue, just fired up), but I don't want to test it locally...

@CL-Jeremy commented on GitHub (Aug 17, 2020): I'll take a look. Running this on my own web server takes almost forever (screenshot from the version referred to in this issue, just fired up), but I don't want to test it locally... ![Bildschirmfoto 2020-08-17 um 21 10 37](https://user-images.githubusercontent.com/1714243/90434697-26610a00-e0ce-11ea-8fb6-2514bcb4c0be.png)

GiteaMirror commented

@silverwind commented on GitHub (Aug 17, 2020):

200s template emission time? Something is definitely wrong there, nevery seen anything like it.

@silverwind commented on GitHub (Aug 17, 2020): 200s template emission time? Something is definitely wrong there, nevery seen anything like it.

GiteaMirror commented

@CL-Jeremy commented on GitHub (Aug 17, 2020):

200s template emission time? Something is definitely wrong there, nevery seen anything like it.

No, 28.4s (but still remarkable). This is mainly due to some SSD configuration of my VPS I believe. CPU is constantly at 100% upon starting gitea for around 3 minutes...

@CL-Jeremy commented on GitHub (Aug 17, 2020): > 200s template emission time? Something is definitely wrong there, nevery seen anything like it. No, 28.4s (but still remarkable). This is mainly due to some SSD configuration of my VPS I believe. CPU is constantly at 100% upon starting gitea for around 3 minutes...

GiteaMirror commented

2025-11-02 06:35:57 -06:00

@silverwind commented on GitHub (Aug 17, 2020):

Certainly strange. Maybe related to https://github.com/go-gitea/gitea/issues/7910. If the VPS still has enough resources left, maybe some of the golang debugging tools like pprof could help debug these issues.

@silverwind commented on GitHub (Aug 17, 2020): Certainly strange. Maybe related to https://github.com/go-gitea/gitea/issues/7910. If the VPS still has enough resources left, maybe some of the golang debugging tools like [pprof](https://blog.golang.org/pprof) could help debug these issues.

GiteaMirror commented

@CL-Jeremy commented on GitHub (Aug 17, 2020):

Yeah, compared to Gogs on the same server, Gitea is at least 50% slower. I'm limiting the resources using cgroups, though. Have seen too many occasions where things get OOM-killed, and that single-core CPU is very precious for the handful of services I keep there (JVM and Node.js are both famous resource hoggers).

@CL-Jeremy commented on GitHub (Aug 17, 2020): Yeah, compared to Gogs on the same server, Gitea is at least 50% slower. I'm limiting the resources using cgroups, though. Have seen too many occasions where things get OOM-killed, and that single-core CPU is very precious for the handful of services I keep there (JVM and Node.js are both famous resource hoggers).

GiteaMirror commented

2025-11-02 06:35:57 -06:00

@CL-Jeremy commented on GitHub (Aug 17, 2020):

No dice. Still the same thing. As long as this mixin is used as it is right now, it would always go in that way.

I still suspect the problem happens in webpack less compiler itself somehow. I don't know the lifecycle, though.

@CL-Jeremy commented on GitHub (Aug 17, 2020): No dice. Still the same thing. As long as this mixin is used as it is right now, it would always go in that way. I still suspect the problem happens in webpack less compiler itself somehow. I don't know the lifecycle, though.

GiteaMirror commented

@silverwind commented on GitHub (Aug 18, 2020):

Can this be reproduced on https://try.gitea.io? For example if I view the font definitions in Chrome:

Clicking the line number seems to correctly show the Less source:

@silverwind commented on GitHub (Aug 18, 2020): Can this be reproduced on https://try.gitea.io? For example if I view the font definitions in Chrome: <img width="614" alt="image" src="https://user-images.githubusercontent.com/115237/90500437-29e6a680-e14b-11ea-8270-89834065f26a.png"> Clicking the line number seems to correctly show the Less source: <img width="420" alt="image" src="https://user-images.githubusercontent.com/115237/90500505-44b91b00-e14b-11ea-8e8b-67b8ec59aada.png">

GiteaMirror commented

@CL-Jeremy commented on GitHub (Aug 18, 2020):

You have just proven my point. The definition is:

@default-fonts: -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" sans-serif;
[...]
.override-fonts(@default-fonts);

Yet the result is:

-apple-system,BlinkMacSystemFont,system-ui,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,Helvetica,Arial,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji

Apart from the comma before sans-serif, this still doesn't add up. Where do Ubuntu and Cantarell come from? Certainly not from semantic.

@CL-Jeremy commented on GitHub (Aug 18, 2020): You have just proven my point. The definition is: ``` @default-fonts: -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" sans-serif; [...] .override-fonts(@default-fonts); ``` Yet the result is: ``` -apple-system,BlinkMacSystemFont,system-ui,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,Helvetica,Arial,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji ``` Apart from the comma before `sans-serif`, this still doesn't add up. Where do Ubuntu and Cantarell come from? Certainly not from semantic.

GiteaMirror commented

@CL-Jeremy commented on GitHub (Aug 18, 2020):

Damn, I see where it comes from:

@CL-Jeremy commented on GitHub (Aug 18, 2020): Damn, I see where it comes from: ![Bildschirmfoto 2020-08-18 um 12 24 11](https://user-images.githubusercontent.com/1714243/90502227-c742da00-e14d-11ea-9220-a78ed351ed42.png)

GiteaMirror commented

@CL-Jeremy commented on GitHub (Aug 18, 2020):

Not sure if this is idiomatic but it's working now:

diff --git a/webpack.config.js b/webpack.config.js
index d7f0c83d8..8a2f2dbc0 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -4,7 +4,11 @@ const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const FixStyleOnlyEntriesPlugin = require('webpack-fix-style-only-entries');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
-const PostCSSPresetEnv = require('postcss-preset-env');
+const PostCSSPresetEnv = () => require('postcss-preset-env')({
+  features: {
+    'system-ui-font-family': false,
+  }
+});
 const TerserPlugin = require('terser-webpack-plugin');
 const VueLoaderPlugin = require('vue-loader/lib/plugin');
 const {statSync} = require('fs');

@CL-Jeremy commented on GitHub (Aug 18, 2020): Not sure if this is idiomatic but it's working now: ```diff diff --git a/webpack.config.js b/webpack.config.js index d7f0c83d8..8a2f2dbc0 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -4,7 +4,11 @@ const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); const FixStyleOnlyEntriesPlugin = require('webpack-fix-style-only-entries'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin'); -const PostCSSPresetEnv = require('postcss-preset-env'); +const PostCSSPresetEnv = () => require('postcss-preset-env')({ + features: { + 'system-ui-font-family': false, + } +}); const TerserPlugin = require('terser-webpack-plugin'); const VueLoaderPlugin = require('vue-loader/lib/plugin'); const {statSync} = require('fs'); ```

GiteaMirror commented