github-starred/gitea
2
0
Fork 0
mirror of https://github.com/go-gitea/gitea.git synced 2026-03-13 02:57:44 -05:00
Code Issues 2.6k Packages Projects Releases 100 Wiki Activity

Error changing logo to SVG with prefers-color-scheme styling #12515

New Issue
Closed
opened 2025-11-02 10:12:25 -06:00 by GiteaMirror · 8 comments
GiteaMirror commented 2025-11-02 10:12:25 -06:00
Owner
Copy Link

Originally created by @pboguslawski on GitHub (Feb 22, 2024).

Description

When changing logo to SVG file that contains dark mode styling i.e.

<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
  <style>
    path { fill: black }
    @media (prefers-color-scheme: dark) { path { fill: white } }
  </style>
[...]

make generate-images throws error like

$ make generate-images
npm install --no-save --no-package-lock fabric@5 imagemin-zopfli@7

up to date in 44s
node build/generate-images.js 
TypeError: Cannot read properties of undefined (reading 'trim')
    at /mypath/gitea/node_modules/fabric/dist/fabric.js:5434:33
    at Array.forEach (<anonymous>)
    at Object.getCSSRules (/mypath/gitea/node_modules/fabric/dist/fabric.js:5425:15)
    at fabric.parseSVGDocument (/mypath/gitea/node_modules/fabric/dist/fabric.js:5150:38)
    at Object.loadSVGFromString (/mypath/gitea/node_modules/fabric/dist/fabric.js:5499:14)
    at file:///mypath/gitea/build/generate-images.js:14:12
    at new Promise (<anonymous>)
    at loadSvg (file:///mypath/gitea/build/generate-images.js:13:10)
    at generate (file:///mypath/gitea/build/generate-images.js:38:36)
    at main (file:///mypath/gitea/build/generate-images.js:73:5)
make: *** [Makefile:1013: generate-images] Error 1

No such problem when

@media (prefers-color-scheme: dark) { path { fill: white } }

is removed from svg file.

Gitea Version

1.21.3

Can you reproduce the bug on the Gitea demo site?

No

Log Gist

No response

Screenshots

No response

Git Version

No response

Operating System

No response

How are you running Gitea?

Compiled from source.

Database

None

Originally created by @pboguslawski on GitHub (Feb 22, 2024). ### Description When [changing logo](https://docs.gitea.com/administration/customizing-gitea#changing-the-logo) to SVG file that contains [dark mode styling](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) i.e. ``` <?xml version="1.0" standalone="no"?> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"> <style> path { fill: black } @media (prefers-color-scheme: dark) { path { fill: white } } </style> [...] ``` `make generate-images` throws error like ``` $ make generate-images npm install --no-save --no-package-lock fabric@5 imagemin-zopfli@7 up to date in 44s node build/generate-images.js TypeError: Cannot read properties of undefined (reading 'trim') at /mypath/gitea/node_modules/fabric/dist/fabric.js:5434:33 at Array.forEach (<anonymous>) at Object.getCSSRules (/mypath/gitea/node_modules/fabric/dist/fabric.js:5425:15) at fabric.parseSVGDocument (/mypath/gitea/node_modules/fabric/dist/fabric.js:5150:38) at Object.loadSVGFromString (/mypath/gitea/node_modules/fabric/dist/fabric.js:5499:14) at file:///mypath/gitea/build/generate-images.js:14:12 at new Promise (<anonymous>) at loadSvg (file:///mypath/gitea/build/generate-images.js:13:10) at generate (file:///mypath/gitea/build/generate-images.js:38:36) at main (file:///mypath/gitea/build/generate-images.js:73:5) make: *** [Makefile:1013: generate-images] Error 1 ``` No such problem when ``` @media (prefers-color-scheme: dark) { path { fill: white } } ``` is removed from svg file. ### Gitea Version 1.21.3 ### Can you reproduce the bug on the Gitea demo site? No ### Log Gist _No response_ ### Screenshots _No response_ ### Git Version _No response_ ### Operating System _No response_ ### How are you running Gitea? Compiled from source. ### Database None
GiteaMirror added the type/bugtype/upstream labels 2025-11-02 10:12:25 -06:00
GiteaMirror commented 2025-11-02 10:12:26 -06:00
Author
Owner
Copy Link

@pboguslawski commented on GitHub (Feb 22, 2024):

Dirty workaround that works for us: use svg file version with @media... line removed for generate-images and than override public/assets/img/logo.svg and public/assets/img/favicon.svg with unmodified svg version (with @media... line) before building gitea.

@pboguslawski commented on GitHub (Feb 22, 2024): Dirty workaround that works for us: use svg file version with `@media...` line removed for `generate-images` and than override `public/assets/img/logo.svg` and `public/assets/img/favicon.svg` with unmodified svg version (with `@media...` line) before building gitea.
GiteaMirror commented 2025-11-02 10:12:26 -06:00
Author
Owner
Copy Link

@silverwind commented on GitHub (Feb 22, 2024):

Sounds like a bug in fabric, could try v6 beta by changing fabric@5 to fabric@beta in the Makefile.

https://github.com/fabricjs/fabric.js?tab=readme-ov-file#migrating-to-v6

@silverwind commented on GitHub (Feb 22, 2024): Sounds like a bug in fabric, could try v6 beta by changing `fabric@5` to `fabric@beta` in the Makefile. https://github.com/fabricjs/fabric.js?tab=readme-ov-file#migrating-to-v6
GiteaMirror commented 2025-11-02 10:12:27 -06:00
Author
Owner
Copy Link

@pboguslawski commented on GitHub (Feb 22, 2024):

After switching to farbic@beta:

$ make generate-images
npm install --no-save

removed 271 packages, and changed 149 packages in 4s
npm install --no-save --no-package-lock fabric@beta imagemin-zopfli@7
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.

added 263 packages, and changed 149 packages in 3m
node build/generate-images.js 
file://mypath/gitea/build/generate-images.js:4
import {fabric} from 'fabric';
        ^^^^^^
SyntaxError: The requested module 'fabric' does not provide an export named 'fabric'
    at ModuleJob._instantiate (node:internal/modules/esm/module_job:132:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:214:5)
    at async ModuleLoader.import (node:internal/modules/esm/loader:329:24)
    at async loadESM (node:internal/process/esm_loader:28:7)
    at async handleMainPromise (node:internal/modules/run_main:113:12)

Node.js v20.11.1
make: *** [Makefile:1013: generate-images] Error 1

BTW: shouldn't gitea use npm ci when downloading dependencies instead of npm install?

@pboguslawski commented on GitHub (Feb 22, 2024): After switching to `farbic@beta`: ``` $ make generate-images npm install --no-save removed 271 packages, and changed 149 packages in 4s npm install --no-save --no-package-lock fabric@beta imagemin-zopfli@7 npm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details. added 263 packages, and changed 149 packages in 3m node build/generate-images.js file://mypath/gitea/build/generate-images.js:4 import {fabric} from 'fabric'; ^^^^^^ SyntaxError: The requested module 'fabric' does not provide an export named 'fabric' at ModuleJob._instantiate (node:internal/modules/esm/module_job:132:21) at async ModuleJob.run (node:internal/modules/esm/module_job:214:5) at async ModuleLoader.import (node:internal/modules/esm/loader:329:24) at async loadESM (node:internal/process/esm_loader:28:7) at async handleMainPromise (node:internal/modules/run_main:113:12) Node.js v20.11.1 make: *** [Makefile:1013: generate-images] Error 1 ``` BTW: shouldn't gitea use [`npm ci`](https://docs.npmjs.com/cli/v9/commands/npm-ci/) when downloading dependencies instead of `npm install`?
GiteaMirror commented 2025-11-02 10:12:27 -06:00
Author
Owner
Copy Link

@silverwind commented on GitHub (Feb 22, 2024):

Sounds like there are API changes, but we can adapt. Can you share a minimal full SVG that reproduces the error?

BTW: shouldn't gitea use npm ci when downloading dependencies instead of npm install?

npm install --no-save is practically the same. I avoid npm ci because last I tried it failed in strange ways that npm install does not.

npm ci would not work in this case anyways as we don't have these two modules in package.json because of their native dependencies which bring too many issues when they are in package.json.

@silverwind commented on GitHub (Feb 22, 2024): Sounds like there are API changes, but we can adapt. Can you share a minimal full SVG that reproduces the error? > BTW: shouldn't gitea use [npm ci](https://docs.npmjs.com/cli/v9/commands/npm-ci/) when downloading dependencies instead of npm install? `npm install --no-save` is practically the same. I avoid `npm ci` because last I tried it failed in strange ways that `npm install` does not. `npm ci` would not work in this case anyways as we don't have these two modules in package.json because of their native dependencies which bring too many issues when they are in package.json.
GiteaMirror commented 2025-11-02 10:12:27 -06:00
Author
Owner
Copy Link

@pboguslawski commented on GitHub (Feb 22, 2024):

Can you share a minimal full SVG that reproduces the error?

This SVG fails:

<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
  <style>
    circle { fill: black; }
    @media (prefers-color-scheme: dark) { circle { fill: white; } }
  </style>
  <circle r="10" cx="10" cy="10" />
</svg>

Then remove

    @media (prefers-color-scheme: dark) { circle { fill: white; } }

and it works fine.

we don't have these two modules in package.json

For reproducibility & security consider using only dependency versions that are stored in package-lock.json with checksum verification on installation (which npm ci quarantees if I understand correctly and npm install does not).

@pboguslawski commented on GitHub (Feb 22, 2024): > Can you share a minimal full SVG that reproduces the error? This SVG fails: ``` <?xml version="1.0" standalone="no"?> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"> <style> circle { fill: black; } @media (prefers-color-scheme: dark) { circle { fill: white; } } </style> <circle r="10" cx="10" cy="10" /> </svg> ``` Then remove ``` @media (prefers-color-scheme: dark) { circle { fill: white; } } ``` and it works fine. > we don't have these two modules in package.json For reproducibility & security consider using only dependency versions that are stored in `package-lock.json` with checksum verification on installation (which `npm ci` quarantees if I understand correctly and `npm install` does not).
GiteaMirror commented 2025-11-02 10:12:27 -06:00
Author
Owner
Copy Link

@silverwind commented on GitHub (Feb 22, 2024):

It's a bug in fabric: https://github.com/fabricjs/fabric.js/issues/9679

https://github.com/go-gitea/gitea/pull/29334 will upgrade us to fabric v6, which is good to do in any case.

For reproducibility & security consider using only dependency versions that are stored in package-lock.json with checksum verification on installation (which npm ci quarantees if I understand correctly and npm install does not).

Can't have unstable native dependencies like canvas in our main package-lock.json or else we risk breaking the build when those dependencies fail to compile or have no prebuilds available which is very common. The current version lock via command line is a good enough imho.

@silverwind commented on GitHub (Feb 22, 2024): It's a bug in `fabric`: https://github.com/fabricjs/fabric.js/issues/9679 https://github.com/go-gitea/gitea/pull/29334 will upgrade us to fabric v6, which is good to do in any case. > For reproducibility & security consider using only dependency versions that are stored in package-lock.json with checksum verification on installation (which npm ci quarantees if I understand correctly and npm install does not). Can't have unstable native dependencies like `canvas` in our main `package-lock.json` or else we risk breaking the build when those dependencies fail to compile or have no prebuilds available which is very common. The current version lock via command line is a good enough imho.
GiteaMirror commented 2025-11-02 10:12:27 -06:00
Author
Owner
Copy Link

@silverwind commented on GitHub (Feb 25, 2024):

Bug is confirmed and one workaround may be to remove the prefers-color-scheme media query before handing to fabric, but doing that will require a dom/xml parser (likely JSDOM's DOMParser) and a css parsers (postcss). We must of course preserve it for SVG output, but for PNG output, such a media query does not have any effect.

@silverwind commented on GitHub (Feb 25, 2024): Bug is confirmed and one workaround may be to remove the `prefers-color-scheme` media query before handing to fabric, but doing that will require a dom/xml parser (likely JSDOM's `DOMParser`) and a css parsers (`postcss`). We must of course preserve it for SVG output, but for PNG output, such a media query does not have any effect.
GiteaMirror commented 2025-11-02 10:12:28 -06:00
Author
Owner
Copy Link

@silverwind commented on GitHub (Mar 4, 2024):

Upstream merge was fixed, waiting for next (beta) release.

@silverwind commented on GitHub (Mar 4, 2024): Upstream merge was fixed, waiting for next (beta) release.
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
$20
$250
$50
$500
backport/done
💎 Bounty
docs-update-needed
good first issue
hacktoberfest
issue/bounty
issue/confirmed
issue/critical
issue/duplicate
issue/needs-feedback
issue/not-a-bug
issue/regression
issue/stale
issue/workaround
lgtm/need 2
modifies/api
modifies/translation
outdated/backport/v1.18
outdated/theme/markdown
outdated/theme/timetracker
performance/bigrepo
performance/cpu
performance/memory
performance/speed
pr/breaking
proposal/accepted
proposal/rejected
pr/wip
pull-request
Mirrored from GitHub Pull Request
 reviewed/wontfix
💰 Rewarded
skip-changelog
status/blocked
topic/accessibility
topic/api
topic/authentication
topic/build
topic/code-linting
topic/commit-signing
topic/content-rendering
topic/deployment
topic/distribution
topic/federation
topic/gitea-actions
topic/issues
topic/lfs
topic/mobile
topic/moderation
topic/packages
topic/pr
topic/projects
topic/repo
topic/repo-migration
topic/security
topic/theme
topic/ui
topic/ui-interaction
topic/ux
topic/webhooks
topic/wiki
type/bug
type/deprecation
type/docs
type/enhancement
type/feature
type/miscellaneous
type/proposal
type/question
type/refactoring
type/summary
type/testing
type/upstream
No Label type/bug type/upstream
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
GiteaMirror ninjasurge
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/gitea#12515
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?