go-vikunja
Move bulma-css-variables to @bulvar/bulma
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.
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:
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.
I think I got confused by this:
-
