Vue Support

[JeromeDeLeon]

I am trying to use this lib to create a vue-styled-component and looking at it, I started with copy-pasting the @emotion/styled to a stackblitz.

Although, I'm stuck with understanding why the "WORLD" text has a duplicate color style but not in @emotion/styled.

.css-j1wu5y {
  color: blue;
  color: red;
  text-align: center;
}

I even tried to use macros hoping it would solve the issue but it didn't.

For some reason, the website doesn't have that problem.

Any idea?

I managed to get the Vue working with no v-model and stuff and just plain elements with style but they have the same problem with duplicate style. Codesandbox

[Andarist]

For some reason, the website doesn't have that problem.

It's built in the production mode and with that we are using the insertRule API (which is faster) to do the CSSOM injections. The browser itself removes/hides duplicates in this scenario. They are still part of what is injected - you just can't observe it.

[JeromeDeLeon]

Is there any reason why it wasn't integrated? Is there any workaround for this?

[JeromeDeLeon]

I was able to remove the redundant style using createCache({ speedy: true }). Not sure if this is recommended though.

[Andarist]

The only downside i can think off is that u might not be able to change styles in dev tools during development and stuff like that. However, browsers got better with it over the years and currently that’s not longer a case in Chrome.

[Andarist]

Those duplicates are harmless though so I also dont think that it matters and you probably shouldnt “fight” against them