question-mark

Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Duplicated CSS rules in production

See original GitHub issue

Issue Description

When using this CLI plugin, there are duplicated CSS rules when using CSS modules and the “composes” feature. This seems to be caused by the critical CSS that’s inlined into the <head> and is both happening in development and production (main issue).

I’ve created the following test repo (https://github.com/mrksbnch/vue-ssr-css-issue) that I created using vue create (Vue router as the only feature) and vue add @akryum/vue-cli-plugin-ssr. Afterwards, I added a test.css file in the folder assets and composed (<style module>) two style declarations from that file in Home.vue and HelloWorld.vue.

You can see the duplicated rules after running npm run ssr:serve or npm run ssr:build and npm run ssr:start in the dev tools:

screen shot 2019-01-06 at 18 32 42

Both CSS rules are inlined on the server side (<style data-vue-ssr-id>):

screen shot 2019-01-06 at 18 33 20

This is just a simple test repo with only one CSS rule. In a proper app this will cause a lot (!) of duplicated CSS rules and increase the file size by quite a bit. I’ve tested it with a simple app and I noticed some rules being duplicated 5 or 6 times.

Issue Analytics

  • State:open
  • Created 4 years ago
  • Comments:15 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
p1n5ucommented, Feb 8, 2019

Actually, the styles don’t get added twice by the SSR plugin, but you get the styles delivered with the server side-rendered page and as soon as you mount the app on the client side on top of the pre-rendered dom, Vue adds the styles of the components again. So it is not really a Bug or an Issue, but it is simply a reality of prerendering. Right now I am working on a solution to this (for example extract the CSS from the JS bundle and inject them into the HTML). I keep you updated and tell you as soon as I’ve managed to solve this problem

0reactions
Sporradikcommented, Jul 9, 2020

@enriqg9 We don’t use SCSS, so I’m not sure if I can be of much support, but I have some ideas of what you could try:

I would recommend taking a look at your built webpack config using vue inspect > output.js and then taking a look a the generated output.js file. It might give you some insight into the structure of your loaders and why it can’t seem to find options for vue-style-loader under the scss rule.

Is it just throwing that error for scss or for css as well?

Is it possible that one of the “types” is not relevant in your case, so that is causing an error? If so, you could try removing it.

You could try only modifying options if they exist. If you can just prevent the error with an undefined check, then maybe it could work.

You can put console.logs in your chainWebpack function and they will log in the terminal where you run vue-cli-service start. It’s a bit hard to read, but you could use this to figure out which type or rule is causing the error.

Webpack is very confusing to me, especially with vue-cli so I am sorry that I can’t be of more help.

Read more comments on GitHub >

github_iconTop Results From Across the Web

DRY CSS: How to Use Declarations Just Once, Effectively
Keep the discovered duplicate in the first rule and remove the other declarations, and vice-versa in the second rule, so that that rule...
Read more >
duplicate css - npm search
postcss -merge-selectors. PostCSS plugin to combine selectors that have duplicate rules. Can be configured to skip or only apply to specific rules.
Read more >
MiniCssExtractPlugin - webpack
For production builds it's recommended to extract the CSS from your bundle being able to use parallel loading of CSS/JS resources later on....
Read more >
Including partials in components results in duplicate css
If you are @import ing the same CSS rules into different components, then you will get the same rules duplicated across all modules....
Read more >
Is there any tools to check for duplicated CSS classes? - Quora
Running your CSS though a linter like CSS Lint and checking for errors is one way. Your code editor can be help with...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found