forked from vikunja/frontend
Experiment with re-ordering / moving scss import statements #3
Labels
No Label
bug
duplicate
enhancement
help wanted
invalid
question
wontfix
No Milestone
No project
No Assignees
3 Participants
Notifications
Due Date
No due date set.
Dependencies
No dependencies set.
Reference: adrinux/frontend#3
Loading…
Reference in New Issue
No description provided.
Delete Branch "%!s(<nil>)"
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?
Per @dpschen comment on #954
May allow removal of a lot of !important in the colors.scss.
@dpschen Moved colors import in
0e93ddf4b5
No apparent visual difference.
Should shadows.scss and variables.scss also be moved?
And why does devtools show so many css variables appended to each inline stylesheet? I have no clue how this works...
I created a branch based on the
bulma-css-variables
branch and changed the stuff.Not sure how to createa pull request here though. Here you can see the diff:
https://kolaente.dev/adrinux/frontend/compare/bulma-css-variables...dpschen/frontend:feature/reorder-scss-imports
I was able to create a pull request and merge. Closing.
Nice 👍
Did you see the comments where I explain how the prefixed scss gets loaded?
Are those understandable and did you understand now generally how that system works?
I know it's a bit unintuitive that every component basically has its own "scope" but that's just how scss in vue works (I'm not talking about the
scoped
attribute here but about the fact that the SCSS of every component gets compiled like its a new file)Saw and read those comments. What I don't get is the 'why?', other than that scss needs to be compiled.
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?
This is what I'm seeing in FF dev tools anyway - which my reflect the dev tools presentation more than what is actually happening :)
I'll try to explain. Maybe also interesting for you @konrad.
(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):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:
Because that's annoying to repeat all the time we use an option
additionalData
in the SCSS processor in thevite.config.js
to prefix that code in every component.(2) Vues scoped styles
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:<p>
=> It adds data attributes to the component elements e.g.<p data-v-03e60f2a>
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 theApp.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.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.
@konrad:
Maybe this is something that should go in the documentation?
Thanks for the explanation, things are a bit clearer now.
I think it has, with the exception of bulma utilities
Which explains why I had to resort to using !important when overriding --input-placeholder-color today.
That looks indeed wrong.
Tricky situation because variables that are defined there are mixed with SCSS that will produce a rendered output.
Probably a good idea yes. There's not really anything about the frontend there yet. Do you want to send a PR?
@adrinux:
I uploaded a fix for this:
https://kolaente.dev/dpschen/frontend/src/branch/feature/fix-duplicate-root-styles
8aba56a37b