search

jhildenbiddle / css-vars-ponyfill

Client-side support for CSS custom properties (aka "CSS variables") in legacy and modern browsers
https://jhildenbiddle.github.io/css-vars-ponyfill
MIT License
1.46k stars 64 forks source link

Version 2.3.0 broke dynamic CSS transformation #135

Closed fastfedora closed 3 years ago

fastfedora commented 3 years ago

I just inherited a project that is using css-vars-ponyfill with styled-components. Upgrading to the latest version of css-vars-ponyfill broke some of the CSS that is being generated dynamically.

Here's a simplified version of a component I was able to track the issue down to:

const Dropdown = styled.div`
    background: ${props => props.value ? 'var(--peach)' : (props.disabled? 'var(--greyfg)' : 'white')};
`

As you can see, the style for this component can change whenever the value or disabled props change.

Before version 2.3.0, the style would be retransformed each time it changed. Starting with version 2.3.0, this does not happen.

I suspect the issue is this line which disables the sheet if preserveStatic is set to true. Indeed, setting preserveStatic to false appears to fix the issue. However, it seems like setting this to false has several other side effects.

As I'm just getting started on this project, I can't yet tell if there are other unintended consequences from setting this to false. Should there be an additional flag to maintain the preserve static behavior, but allow dynamic CSS?

My guess is that part of the issue is that styled-components is replacing the CSS in the original sheet, and not appending a new one. So once the sheet has been disabled, and then styled-components re-renders that CSS with the --var statements, the new code is never transformed.

jhildenbiddle commented 3 years ago

Hi @fastfedora,

Apologies for the slow response.

There were two issues that needed to be resolved:

  1. The mutation observer was not configured to detect changes to <style> content
  2. The ponyfill marks and intelligently skips stylesheets it has already processed on subsequent calls. This behavior caused the ponyfill to ignore the <style> content changes made by styled-components.

Both of these issues have been addressed in #140. A new version will be released shortly.

jhildenbiddle commented 3 years ago

All fixed in 2.4.0, @fastfedora.