Storybook 7 - global style leak fix

user-script.js

// ==UserScript==
// @name        Storybook global style fix
// @namespace   Violentmonkey Scripts
// @match       http://localhost:6006/
// @grant       none
// @version     1.0
// @author      Michael Gale <https://www.michaelgale.dev>
// @description Fixes global style leaking into your components in Storybook 7 by harshly removing the offending style tag from the iframe.
// ==/UserScript==

window.onload = function () {
  const findAndRemove = () => {
    const iframe = document?.querySelector('#storybook-preview-iframe')
    const innerDoc = iframe?.contentDocument || iframe?.contentWindow?.document;
    const innerStyles = [...innerDoc?.querySelectorAll('style')]

    const badStyles = innerStyles?.find(style => {
      return style?.innerHTML?.includes('@property')
    })

    badStyles?.remove()
  }
 
  findAndRemove()
  setInterval(findAndRemove, 1000)
  window.addEventListener('resize', findAndRemove)
}

An overly hectic way of fixing this: storybookjs/storybook#17533

(Requires Violent Monkey )