Styled components losing styling

[brandondv]

Description
When an attribute changes on the web-component externally, the styled component will render without the proper styling. When inspecting the element, it has gotten the right property in React, and it got a new styled-component class. However that new class has no css rules in the shadowDOM. So it seems that those styling rules aren't updated accordingly.

When the React component changes internally, it will have the right styling and new classname.

To reproduce
I made a repo where the bug is present. https://github.com/brandondv/direflow-styled-component-bug-reproduction

Steps to reproduce the behaviour:

1. Clone repo
2. Install packages (e.g. yarn install)
3. yarn start
4. Use the example in the html file to see the error, when filling in a color (e.g. green)
5. See error

Expected behaviour
That external changes on the web-component attributes / properties, renders the styled component right.

Package Manager:
To install Direflow, I used yarn.

Screenshots

[SimonHoiberg]

Hi @brandondv Thank you for creating this bug report, and thanks a lot for creating a reproducible example! It makes it way easier for us to investigate :blush:

We'll take a look at this, as soon as possible.

[dlwsacrez]

@SimonHoiberg any updates, still got the issue?