Why the css will repeat ? #1003

xjArea · 2023-07-06T00:09:02Z

xjArea
Jul 6, 2023

😰 During the development stage, I found that the CSS was repeated, once from the <link> tag, and once from the inner <style> tag, and they all took effect, which caused us to see repeated styles in the devTool panel, This is definitely not a good thing, because the repeated css code will cause me a lot of trouble when debugging.

Although this problem does not exist after build, I can't understand why this happens here. Generally speaking, since the code has been introduced with <link>, there is no need to add it as an internal <style>, what is wrong here, is there a way we can avoid it?

Here is a screenshot of the css repetition:

Answered by brillout

Jul 4, 2024

Fix pre-released as 0.4.178-commit-fae90a1.

Btw. would your company be up for sponsoring? It makes a massive difference to us 💚

View full answer

brillout · 2023-07-06T07:17:28Z

brillout
Jul 6, 2023
Maintainer

The CSS <link> tag is injected by Vike to avoid FOUC, while the <style> tags are automatically injected by Vite (and Vike doesn't have control over these ones).

~~I think we can remove <link> once the page has loaded.~~ I'm actually realizing that, because of Vite's on-demand transpiling (and therefore on-demand style injecting), there isn't an easy way to tell when Vite is done injecting <style> tags.

0 replies

xjArea · 2023-07-06T08:11:45Z

xjArea
Jul 6, 2023
Author

Theoretically speaking, between the two, I prefer to delete the <style> tag, because it will make the page more concise, and it is easier to know which file it comes from when looking for selector, but If this is difficult to achieve at the code level, delete the <link> is OK. 😊

4 replies

brillout Jul 6, 2023
Maintainer

I'd rather not interfere with Vite's style handling.

xjArea Jul 6, 2023
Author

If <link> is located in <head>, then there should be no FOUC, because <body> will not be rendered until <link> is loaded and executed, and the .css file There is also a blocking effect at the rendering level. emmm, it should be like this. 😅

xjArea Jul 6, 2023
Author

Alternatively, provide a parameter that allows the user to choose…

brillout Jul 6, 2023
Maintainer

That's why precisely why VPS injects the <link> one.

snake-py · 2023-09-07T16:52:46Z

snake-py
Sep 7, 2023

So is there away to avoid this? We have quite a lot of styles which already are quite demanding in dev.

10 replies

brillout Sep 11, 2023
Maintainer

Vike only injects <link> tags, so it's either a SCSS or Vite thing and I'm not sure there is much Vike can do about.

Would migrating away from SCSS be an option for you? For example to PostCSS, which Vite has built-in support for. And Vite's support for Lightning CSS is also very promising.

brillout Sep 11, 2023
Maintainer

That said, there could be a Vike setting to omit injecting <link> tags, but seems like what you want is getting rid of the <style> tags.

snake-py Sep 12, 2023

That said, there could be a Vike setting to omit injecting tags, but seems like what you want is getting rid of the <style> tags.

Exactly, I need to get rid of the style tags.

Would migrating away from SCSS be an option for you?

I would actually love to migrate away from scss, however our internal library relies heavily on prime react, and they work with scss. They seem to be in the process of migrating to common css. Once their migration is finish we want to migrate towards css modules or css-in-js.

support for Lightning CSS

First time seeing this will look into that.

snake-py Sep 12, 2023

I think for now I will just leave my wacky work around and need to wait that prime will update their lib, so we can start to migrate away from scss.

brillout Sep 13, 2023
Maintainer

👍

7iomka · 2024-07-03T22:30:59Z

7iomka
Jul 3, 2024

@brillout
Hasn't anyone solved this problem yet?
I hate to work with css with dublicates, when I need to disable some styles immediatelly, I need to disable twice is dev tools...

with

css: {
    devSourcemap: true,
  },

I have the same filename, but the wrong path to it, and because of this I this I still have dublicate

Any suggesion for a hack to somehow disable dublicates in dev?

2 replies

brillout Jul 4, 2024
Maintainer

@7iomka The root issue is explained here. I'd love to remove the <link> tag injected by Vike, but how can we tell that Vite has finished loading the assets of the initial page?

brillout Jul 4, 2024
Maintainer

Fix pre-released as 0.4.178-commit-fae90a1.

Btw. would your company be up for sponsoring? It makes a massive difference to us 💚

Answer selected by brillout

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Why the css will repeat ? #1003

{{title}}

Replies: 4 comments 16 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

Select a reply

Why the css will repeat ? #1003

xjArea Jul 6, 2023

Replies: 4 comments · 16 replies

brillout Jul 6, 2023 Maintainer

xjArea Jul 6, 2023 Author

brillout Jul 6, 2023 Maintainer

xjArea Jul 6, 2023 Author

xjArea Jul 6, 2023 Author

brillout Jul 6, 2023 Maintainer

snake-py Sep 7, 2023

brillout Sep 11, 2023 Maintainer

brillout Sep 11, 2023 Maintainer

snake-py Sep 12, 2023

snake-py Sep 12, 2023

brillout Sep 13, 2023 Maintainer

7iomka Jul 3, 2024

brillout Jul 4, 2024 Maintainer

brillout Jul 4, 2024 Maintainer

xjArea
Jul 6, 2023

Replies: 4 comments 16 replies

brillout
Jul 6, 2023
Maintainer

xjArea
Jul 6, 2023
Author

brillout Jul 6, 2023
Maintainer

xjArea Jul 6, 2023
Author

xjArea Jul 6, 2023
Author

brillout Jul 6, 2023
Maintainer

snake-py
Sep 7, 2023

brillout Sep 11, 2023
Maintainer

brillout Sep 11, 2023
Maintainer

brillout Sep 13, 2023
Maintainer

7iomka
Jul 3, 2024

brillout Jul 4, 2024
Maintainer

brillout Jul 4, 2024
Maintainer