works in IE dev mode, but not prod mode

[glowychan]

Hello, I'm quite stumped by this and would appreciate your help. I have css-vars-polyfill imported to my create-react-app just so I can manually set the variables --bg-opacity': '1' and --text-opacity: '1' so that it would work with another library (twin.macro). It works in IE when I'm in development mode but when I deployed it the style changes were not applied. I still see the console log for onComplete in production mode, just not the style changes.

  const t0 = performance.now();

  cssVars({
    onlyLegacy    : true,
    preserveStatic: true,
    preserveVars: true,
    silent        : true,
    updateDOM     : true,
    watch         : true,

    rootElement: document,
    variables: {
      '--bg-opacity': '1',
      '--text-opacity': '1',
    },

    onComplete: (cssText, styleNodes, cssVariables, benchmark) => {
      const t1   = performance.now();
      const time = ((t1 - t0) / 1000).toFixed(2);
      console.log(`css-vars-ponyfill completed in ${time} seconds`);
      console.log(cssVariables);
    }
  });
}

export default function PolyFilledApp() {
  React.useEffect(() => {
    cssPolifill();
  }, []);

  return <App />;
}

[jhildenbiddle]

Hi @glowychan.

Are you using a CSS-in-JS library? Some of these libraries (like emotion-css) inject CSS differently depending on whether you're running in development or production. Specifically, they will often inject <style> nodes in development but leverage the CSSOM in production mode because it is typically more performant. This ponyfill requires CSS to be available in <link> and <style> elements as it is the only way to parse CSS custom properties in legacy browsers (see #19 for details). You may be able to force your app or CSS-in-JS library to use standard <link> and <style> elements in production as well, but you'll have to check the docs.

FYI, you don't need to create your own timers to measure ponyfill performance. The benchmark argument of the onComplete() callback will give you the execution time of each ponyfill call in milliseconds:

cssVars({
  /* ... */
  onComplete(cssText, styleNodes, cssVariables, benchmark) {
    console.log(`css-vars-ponyfill completed in ${benchmark} ms`);
    console.log(cssVariables);
  }
});

Hope this helps.

[jhildenbiddle]

@glowychan --

Closing due to inactivity. Happy to reopen if necessary.