Improve documentation of frontend styles #1862

New Issue

dpschen · 2021-11-13T19:01:22Z

dpschen commented

2021-11-13 19:01:22 +00:00

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 adrinux/frontend#3 (comment)

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  <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_

dpschen self-assigned this 2021-11-13 19:01:22 +00:00

konrad referenced this issue from a commit

2024-02-07 14:00:33 +00:00

chore(deps): update dependency netlify-cli to v10 (#1862)

Sign in to join this conversation.