github-starred/vikunja
2
0
Fork 0
mirror of https://github.com/go-vikunja/vikunja.git synced 2026-05-08 12:57:52 -05:00
Code Issues 690 Packages Projects Releases 11 Wiki Activity

Improve documentation of frontend styles #398

New Issue
Open
opened 2025-11-01 20:55:44 -05:00 by GiteaMirror · 0 comments
GiteaMirror commented 2025-11-01 20:55:44 -05:00
Owner
Copy Link

Originally created by @vikunja-bot on GitHub (Apr 1, 2025).

Original issue by dpschen on 2021-11-13T19:01:22.000Z

Add the stuff below to the documentation of frontend styles

(1) SASS

When you add lang="scss" in a component style what happens is that the style block runs through SASS. Basically it's this for every component (pseudocode):

$PARAGRAPH_STYLE = "src/components/Paragraph.vue?vue&type=style&scoped&lang=scss"
sass $PARAGRAPH_STYLE

If there is an include inside the files get included like normally in SASS.

Depending on how the components are bundled the styles might be combined again later.
But if you e.g. import styles in router view components and load them dynamically the styles stay separated.

In order to have access to the SCSS variables and mixins we need to import them in every component style. So basically we could write this:

<!-- above the other component stuff -->

<style lang="scss" scoped>
// this is a new import syntax from SASS that provides the math tools
@use "sass:math";

@import "${pathSrc}/styles/variables";`

// [...] rest of styles
</style>

Because that's annoying to repeat all the time we use an option additionalData in the SCSS processor in the vite.config.js to prefix that code in every component.

(2) Vues scoped styles

But prefixing every component implies that there is no longer any global css? That these 'global' css variables are all sent to the browser for every component?

When CSS is loaded it's global in general. As of now there are only limited possibilites to make CSS scoped (e.g. iframes or — i think – shadow DOM). There are currently some discussions to change that but it's still in flux.

To emulate scoped CSS vue has this scoped attribute for component styles. What this does is:

  • You wrote in the template <p> => It adds data attributes to the component elements e.g. <p data-v-03e60f2a>
  • You wrote p { /* [...] */ } in the components scoped styles:
    the elements are references via in CSS by p[data-v-03e60f2a] { /* [...] */ }

So basically it increases to specifity automatically for you so that the change of a selector collision is almost zero. So when you use the same tag selector p in a different component vue will use a different data id.

All of this is independent of custom properties or SCSS.

(3) Global styles

Because we want some styles to be global and not scoped we still have one file global.scss. It is not scoped and is included just once in the App.vue, so it will always get loaded just once.

Our definitions of custom properties in the root styles are included in the global.scss. So they should not be duplicated anymore for every component.

This is what I'm seeing in FF dev tools anyway - which my reflect the dev tools presentation more than what is actually happening :)

In theory my pull request should have solved the duplication.

I also found this explanation in the vue-loader: https://github.com/vuejs/vue-loader#how-it-works

I think vue-loader is not used in Vite but the mechanics are similar.

Originally posted by @dpschen in https://kolaente.dev/adrinux/frontend/issues/3#issuecomment-18962

Original issue on Gitea

Originally created by @vikunja-bot on GitHub (Apr 1, 2025). _Original issue by dpschen on 2021-11-13T19:01:22.000Z_ Add the stuff below to the documentation of frontend styles ## (1) SASS When you add `lang="scss"` in a component style what happens is that the style block runs through SASS. Basically it's this for every component (pseudocode): ```sh $PARAGRAPH_STYLE = "src/components/Paragraph.vue?vue&type=style&scoped&lang=scss" sass $PARAGRAPH_STYLE ``` If there is an include inside the files get included like normally in SASS. Depending on how the components are bundled the styles might be combined again later. But if you e.g. import styles in router view components and load them dynamically the styles stay separated. In order to have access to the SCSS variables and mixins we need to import them in every component style. So basically we could write this: ```vue <!-- above the other component stuff --> <style lang="scss" scoped> // this is a new import syntax from SASS that provides the math tools @use "sass:math"; @import "${pathSrc}/styles/variables";` // [...] rest of styles </style> ``` Because that's annoying to repeat all the time we use an option `additionalData` in the SCSS processor in the `vite.config.js` to prefix that code in every component. ## (2) Vues scoped styles > But prefixing every component implies that there is no longer any global css? That these 'global' css variables are all sent to the browser for every component? When CSS is loaded it's global in general. As of now there are only limited possibilites to make CSS scoped (e.g. iframes or — i think – shadow DOM). There are currently some discussions to change that but it's still in flux. To emulate scoped CSS vue has this `scoped` attribute for component styles. What this does is: - You wrote in the template `<p>` => It adds data attributes to the component elements e.g. `<p data-v-03e60f2a>` - You wrote `p { /* [...] */ }` in the components scoped styles: the elements are references via in CSS by `p[data-v-03e60f2a] { /* [...] */ }` So basically it increases to specifity automatically for you so that the change of a selector collision is almost zero. So when you use the same tag selector `p` in a different component vue will use a different data id. All of this is independent of custom properties or SCSS. ## (3) Global styles Because we want some styles to be global and not scoped we still have one file `global.scss`. It is _not_ scoped and is included just once in the `App.vue`, so it will always get loaded just once. Our definitions of custom properties in the root styles are included in the `global.scss`. So they should not be duplicated anymore for every component. > This is what I'm seeing in FF dev tools anyway - which my reflect the dev tools presentation more than what is actually happening :) In theory my pull request should have solved the duplication. ----- I also found this explanation in the vue-loader: https://github.com/vuejs/vue-loader#how-it-works I think vue-loader is not used in Vite but the mechanics are similar. _Originally posted by @dpschen in https://kolaente.dev/adrinux/frontend/issues/3#issuecomment-18962_ [Original issue on Gitea](https://kolaente.dev/vikunja/vikunja/issues/1862)
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
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#398
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?