github-starred/vikunja
2
0
Fork 0
mirror of https://github.com/go-vikunja/vikunja.git synced 2026-05-06 03:27:53 -05:00
Code Issues 690 Packages Projects Releases 11 Wiki Activity

[GH-ISSUE #502] Move bulma-css-variables to @bulvar/bulma #6195

New Issue
Open
opened 2026-04-20 16:47:50 -05:00 by GiteaMirror · 0 comments
GiteaMirror commented 2026-04-20 16:47:50 -05:00
Owner
Copy Link

Originally created by @vikunja-bot on GitHub (Apr 1, 2025).
Original GitHub issue: https://github.com/go-vikunja/vikunja/issues/502

Original issue by @kolaente on 2021-11-22T21:50:25.000Z

From the matrix chat:

adrinux: Seen the merge! Unfortunately any joy is tempered by the fact I also had an email from Daniil Chudo who maintains bulma-css-variables saying it was deprecated! Bah!

And to 'Please check out @bulvar' https://github.com/daniil4udo/bulvar/tree/v0.9.3
A repo that is 4 days old and had it's first release today. I guess my first email to him about the missing comma's prompted a public release of something he'd been working on for a while.

kolaente: hahaha well

adrinux: I don't know that it changes much - I presume the variable names will be identical and we can swap bulma-css-variables for bulvar without breaking anything, but it's obviously less confidence inspiring.

Original issue on Gitea

dpschen commented on 2021-11-23T10:40:13.000Z:

@bulvar/bulma looks really nice!

Not sure if it makes sense to priorize this though.

Since our target with moving to bulma-css-variables was mostly to support dark mode and this works now I think we should focus on stuff like finishing the move to vue 3, scoping the styles etc.

Thinking here in the same way as you comment from here:

I agree the current frontend could use improvement. In the long-term I'd like to refactor that, maybe even moving away from bulma entierly. Having everything scoped in components would probably help with that. That would be a whole heap of work with little short term benefit - It would make it more maintainable in the long-term though. I don't see it happening anytime soon so I think we should focus on improving what we currently have. That includes moving more styles to components and using bulm-css-variables. Thoughts?

Also it might make scoping more difficult for now since @bulvar/bulma seems not to support SCSS or at least partly imports. I did not get from the repo why that is the case, seems like they simply bundle the SCSS.

EDIT: Maybe I misunderstood this:

CSS ONLY
IMPORTANT: This packages is CSS ONLY!

@kolaente commented on 2021-11-23T13:13:47.000Z:

Yup, agreed that this doesn't have a very high priority right now. We should do it in the too far away future if they plan on deprecating bulma-css-variables further.

adrinux commented on 2021-11-24T10:21:45.000Z:

CSS ONLY
IMPORTANT: This packages is CSS ONLY!

From digging about in the repo it looks like @bulvar/buefy is very much CSS only. All of Bulma's Sass files still seem to be present in @bulvar/bulma. So I tried swapping.

I can't figure out how to get sass imports to work with monorepo modules. This doesn't work:

@import "@bulvar/bulma/sass/utilities/_all";

From reading around it might need yet another npm module.
So I'll leave this branch https://kolaente.dev/adrinux/frontend/src/branch/bulvar-test but am not putting in any more effort to this.

dpschen commented on 2021-11-24T11:18:59.000Z:

I think I found the issue: https://github.com/daniil4udo/bulvar/pull/33

dpschen commented on 2021-11-26T11:31:42.000Z:

@adrinux The pull request got merged. Maybe you can try again if it works now.

If I saw it correctly you also need to add imports to the stuff in that shared folder.

@kolaente commented on 2021-11-26T12:57:20.000Z:

Is there a release with the fix yet?

dpschen commented on 2021-11-26T13:07:53.000Z:

I asked for it

dpschen commented on 2021-11-26T21:55:57.000Z:

Is released: https://github.com/daniil4udo/bulvar/releases/tag/v0.9.4

dpschen commented on 2021-11-28T14:23:57.000Z:

Possible solution for this issue: https://kolaente.dev/vikunja/frontend/issues/1074#issuecomment-20490

dpschen commented on 2021-11-30T20:33:55.000Z:

@adrinux: do you want to update your bulvar branch to try this pull request: https://github.com/daniil4udo/bulvar/pull/42

adrinux commented on 2021-12-01T10:49:18.000Z:

@adrinux: do you want to update your bulvar branch to try this pull request: https://github.com/daniil4udo/bulvar/pull/42

I've no idea how to properly test a pull request on a released npm module...but I did a crude test - checked out that pull request and replaced @bulva/bulma with it in my node_modules folder.

The errors remain the same as from my previous comment a week ago, and for current bulvar release, example:

[vite-plugin-pwa] Can't find stylesheet to import.
   ╷
14 │ @use "@bulvar/bulma/sass/utilities/_all";
   │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  src/styles/common-imports.scss 14:1  @import
  src/App.vue 2:9                      root stylesheet

As I understand it the (sass?) path parser can't handle the @ used in monorepo modules. What's needed is another js module to handle those...but there seemed to be several options and no clear obvious winner.

But this is straying out of my expertise - I'm not even sure if I've diagnosed the problem correctly never mind the solution :)

This inability to actually read the sass files in @bulvar/bulma needs resolved before we can test with switching to @use helps with othe issues.

(On a tangent - does this mean all the sass @import in vikunja's styles need switched to @use too?).

dpschen commented on 2021-12-01T11:15:14.000Z:

You can reference git / github urls.

@use "@bulvar/bulma/sass/utilities/_all";

The _all files were replaced with index files so you can reference the folder.

As I understand it the (sass?) path parser can't handle the @ used in monorepo modules.

You can simply reference relative to the node_modules folder. In combination with the index.sass files that should result in something like:

@use "../../node_modules/@bulvar/bulma/sass/utilities";

(On a tangent - does this mean all the sass @import in vikunja's styles need switched to @use too?).

No, but would be nice =)

dpschen commented on 2021-12-01T11:16:06.000Z:

But this is straying out of my expertise - I'm not even sure if I've diagnosed the problem correctly never mind the solution :)

I'm also not sure. But it solves some of our problems. Might help to isolate the rest of the issues =)

adrinux commented on 2021-12-02T13:01:05.000Z:

You can reference git / github urls.

In theory yes. Also with yarn add, in theory. I've read docs, I've read blogs, I've read issues. Can't get it to work. Almost...but just no.

@adrinux: do you want to update your bulvar branch to try this pull request: https://github.com/daniil4udo/bulvar/pull/42

In retrospect, 'no'. Too much of a time sync already to no productive use.

dpschen commented on 2021-12-03T13:43:49.000Z:

You can reference git / github urls.

In theory yes. Also with yarn add, in theory. I've read docs, I've read blogs, I've read issues. Can't get it to work. Almost...but just no.

@adrinux: do you want to update your bulvar branch to try this pull request: https://github.com/daniil4udo/bulvar/pull/42

In retrospect, 'no'. Too much of a time sync already to no productive use.

Tried it myself, but also ran into issues. So I asked the author again: https://github.com/daniil4udo/bulvar/issues/38#issuecomment-985515227

adrinux commented on 2021-12-03T14:11:31.000Z:

Tried it myself, but also ran into issues.

Thanks for giving it a shot - your failure makes me feel better about my failure :)
Shame though.

I'd have another go at just cloning it elsewhere and copying into node_modules to test it but I've been too busy this week.

dpschen commented on 2021-12-03T14:41:55.000Z:

Yeah I did something similar but had problems even then, because the author of bulvar uses Sass load path and I couldn't figure out how to adjust this in vite.

Then I changed the imports from @use "utilities[...] to @use "../utilites[...]`.

That makes it build but I have still probs with the result..

dpschen commented on 2024-11-02T18:46:51.000Z:

Now that Bulma itself finally supports css variables I eventually found the issue:

We never imported the light.sass or light.sass theme (screenshot from readme.

Screenshot 2024-11-02 at 19.43.07.png

I think I got confused by this:

Screenshot 2024-11-02 at 19.46.01.png-

Originally created by @vikunja-bot on GitHub (Apr 1, 2025). Original GitHub issue: https://github.com/go-vikunja/vikunja/issues/502 _Original issue by @kolaente on 2021-11-22T21:50:25.000Z_ From the matrix chat: > adrinux: Seen the merge! Unfortunately any joy is tempered by the fact I also had an email from Daniil Chudo who maintains bulma-css-variables saying it was deprecated! Bah! > > And to 'Please check out @bulvar' https://github.com/daniil4udo/bulvar/tree/v0.9.3 > A repo that is 4 days old and had it's first release today. I guess my first email to him about the missing comma's prompted a public release of something he'd been working on for a while. > kolaente: hahaha well > adrinux: I don't know that it changes much - I presume the variable names will be identical and we can swap bulma-css-variables for bulvar without breaking anything, but it's obviously less confidence inspiring. [Original issue on Gitea](https://kolaente.dev/vikunja/vikunja/issues/1876) --- _**dpschen** commented on 2021-11-23T10:40:13.000Z_: @bulvar/bulma looks really nice! Not sure if it makes sense to priorize this though. Since our target with moving to bulma-css-variables was mostly to support dark mode and this works now I think we should focus on stuff like finishing the move to vue 3, scoping the styles etc. Thinking here in the same way as you comment [from here](https://kolaente.dev/vikunja/frontend/issues/756#issuecomment-16104): > I agree the current frontend could use improvement. In the long-term I'd like to refactor that, maybe even moving away from bulma entierly. Having everything scoped in components would probably help with that. That would be a whole heap of work with little short term benefit - It would make it more maintainable in the long-term though. I don't see it happening anytime soon so I think we should focus on improving what we currently have. That includes moving more styles to components and using bulm-css-variables. Thoughts? Also it might make scoping more difficult for now since @bulvar/bulma seems not to support SCSS or at least partly imports. I did not get from the repo why that is the case, seems like they simply bundle the SCSS. **EDIT:** Maybe I misunderstood [this](https://github.com/daniil4udo/bulvar/tree/v0.9.3/packages/bulma#%EF%B8%8F-css-only): > CSS ONLY IMPORTANT: This packages is CSS ONLY! --- _**@kolaente** commented on 2021-11-23T13:13:47.000Z_: Yup, agreed that this doesn't have a very high priority right now. We should do it in the too far away future if they plan on deprecating bulma-css-variables further. --- _**adrinux** commented on 2021-11-24T10:21:45.000Z_: > > CSS ONLY > IMPORTANT: This packages is CSS ONLY! From digging about in the repo it looks like @bulvar/buefy is very much CSS only. All of Bulma's Sass files still seem to be present in @bulvar/bulma. So I tried swapping. I can't figure out how to get sass imports to work with monorepo modules. This doesn't work: ``` @import "@bulvar/bulma/sass/utilities/_all"; ``` From reading around it might need yet another npm module. So I'll leave this branch https://kolaente.dev/adrinux/frontend/src/branch/bulvar-test but am not putting in any more effort to this. --- _**dpschen** commented on 2021-11-24T11:18:59.000Z_: I think I found the issue: https://github.com/daniil4udo/bulvar/pull/33 --- _**dpschen** commented on 2021-11-26T11:31:42.000Z_: @adrinux The pull request got merged. Maybe you can try again if it works now. If I saw it correctly you also need to add imports to the stuff in that shared folder. --- _**@kolaente** commented on 2021-11-26T12:57:20.000Z_: Is there a release with the fix yet? --- _**dpschen** commented on 2021-11-26T13:07:53.000Z_: I [asked for it](https://github.com/daniil4udo/bulvar/pull/33#issuecomment-979965917) --- _**dpschen** commented on 2021-11-26T21:55:57.000Z_: Is released: https://github.com/daniil4udo/bulvar/releases/tag/v0.9.4 --- _**dpschen** commented on 2021-11-28T14:23:57.000Z_: Possible solution for this issue: https://kolaente.dev/vikunja/frontend/issues/1074#issuecomment-20490 --- _**dpschen** commented on 2021-11-30T20:33:55.000Z_: @adrinux: do you want to update your bulvar branch to try this pull request: https://github.com/daniil4udo/bulvar/pull/42 --- _**adrinux** commented on 2021-12-01T10:49:18.000Z_: > @adrinux: do you want to update your bulvar branch to try this pull request: https://github.com/daniil4udo/bulvar/pull/42 I've no idea how to properly test a pull request on a released npm module...but I did a crude test - checked out that pull request and replaced @bulva/bulma with it in my node_modules folder. The errors remain the same as from my previous comment a week ago, and for current bulvar release, example: ``` [vite-plugin-pwa] Can't find stylesheet to import. ╷ 14 │ @use "@bulvar/bulma/sass/utilities/_all"; │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ╵ src/styles/common-imports.scss 14:1 @import src/App.vue 2:9 root stylesheet ``` As I understand it the (sass?) path parser can't handle the @ used in monorepo modules. What's needed is another js module to handle those...but there seemed to be several options and no clear obvious winner. But this is straying out of my expertise - I'm not even sure if I've diagnosed the problem correctly never mind the solution :) This inability to actually read the sass files in @bulvar/bulma needs resolved before we can test with switching to @use helps with othe issues. (On a tangent - does this mean all the sass @import in vikunja's styles need switched to @use too?). --- _**dpschen** commented on 2021-12-01T11:15:14.000Z_: You can [reference git / github urls](https://docs.npmjs.com/cli/v8/configuring-npm/package-json#git-urls-as-dependencies). > @use "@bulvar/bulma/sass/utilities/_all"; The `_all` files were replaced with `index` files so you can reference the folder. > As I understand it the (sass?) path parser can't handle the @ used in monorepo modules. You can simply reference relative to the node_modules folder. In combination with the `index.sass` files that should result in something like: `@use "../../node_modules/@bulvar/bulma/sass/utilities";` > (On a tangent - does this mean all the sass @import in vikunja's styles need switched to @use too?). No, but would be nice =) --- _**dpschen** commented on 2021-12-01T11:16:06.000Z_: > But this is straying out of my expertise - I'm not even sure if I've diagnosed the problem correctly never mind the solution :) I'm also not sure. But it solves *some* of our problems. Might help to isolate the rest of the issues =) --- _**adrinux** commented on 2021-12-02T13:01:05.000Z_: > You can [reference git / github urls](https://docs.npmjs.com/cli/v8/configuring-npm/package-json#git-urls-as-dependencies). In theory yes. Also with yarn add, in theory. I've read docs, I've read blogs, I've read issues. Can't get it to work. Almost...but just no. > @adrinux: do you want to update your bulvar branch to try this pull request: https://github.com/daniil4udo/bulvar/pull/42 In retrospect, 'no'. Too much of a time sync already to no productive use. --- _**dpschen** commented on 2021-12-03T13:43:49.000Z_: > > You can [reference git / github urls](https://docs.npmjs.com/cli/v8/configuring-npm/package-json#git-urls-as-dependencies). > > In theory yes. Also with yarn add, in theory. I've read docs, I've read blogs, I've read issues. Can't get it to work. Almost...but just no. > > > > @adrinux: do you want to update your bulvar branch to try this pull request: https://github.com/daniil4udo/bulvar/pull/42 > > In retrospect, 'no'. Too much of a time sync already to no productive use. Tried it myself, but also ran into issues. So I asked the author again: https://github.com/daniil4udo/bulvar/issues/38#issuecomment-985515227 --- _**adrinux** commented on 2021-12-03T14:11:31.000Z_: > Tried it myself, but also ran into issues. Thanks for giving it a shot - your failure makes me feel better about my failure :) Shame though. I'd have another go at just cloning it elsewhere and copying into node_modules to test it but I've been too busy this week. --- _**dpschen** commented on 2021-12-03T14:41:55.000Z_: Yeah I did something similar but had problems even then, because the author of bulvar uses [Sass load path](https://sass-lang.com/documentation/cli/dart-sass#load-path) and I couldn't figure out how to adjust this in vite. Then I changed the imports from `@use "utilities[...]` to @use "../utilites[...]`. That makes it build but I have still probs with the result.. --- _**dpschen** commented on 2024-11-02T18:46:51.000Z_: Now that Bulma itself finally supports css variables I eventually found the issue: We never imported the `light.sass` or `light.sass` theme (screenshot from [readme](https://github.com/daniil4udo/bulvar). <img width="1002" alt="Screenshot 2024-11-02 at 19.43.07.png" src="attachments/49ca20ef-6243-4441-810f-d9385de60823"> ----- I think I got confused by this: <img width="956" alt="Screenshot 2024-11-02 at 19.46.01.png" src="attachments/21864541-bf15-4a5a-99e5-49d3b991c4da">-
GiteaMirror added the area/frontendarea/themingarea/internal-code labels 2026-04-20 16:47:50 -05:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
area/api
area/attachments
area/auth
area/avatars
area/backup-restore
area/caldav
area/calendar-view
area/comments
area/config
area/database
area/desktop
area/docker
area/email
area/favorites
area/filters
area/frontend
area/gantt
area/i18n
area/import-export
area/internal-code
area/kanban
area/labels
area/list-view
area/mobile
area/notifications
area/permissions
area/projects
area/pwa
area/recurring-tasks
area/reminders
area/search
area/shortcuts
area/subtasks
area/sync
area/table-view
area/task-editor
area/task-metadata
area/task-relations
area/teams
area/theming
area/time-tracking
area/typesense
area/views
area/webhooks
bug
changes requested
concern/accessibility
concern/performance
concern/regression
concern/ux
confirmed
db/mysql
dependencies
enhancement
good first issue
help wanted
integration/inbound
integration/outbound
kind/bug
kind/feature
needs reproduction
pull-request
Mirrored from GitHub Pull Request
 question
security
support
upstream issue
waiting for reply
wontfix
No Label area/frontend area/internal-code area/theming
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/vikunja#6195
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?