styled-components not working in viewports

[Em-Ant]

Describe the bug

If using styled-components, the styles are correctly applied when the story width is unset, but not when you are in viewport mode.

width: unset

width: small

Reproduction

https://stackblitz.com/edit/ladle-3czkbf?file=src/basic.stories.tsx

Environment

• OS: MacOS Ventura 13.2.1
• Browser: Chrome 111.0.5563.64 (Official Build) (x86_64)
  (but I don't think this problem is platform dependent)

[Em-Ant]

I think it's related #207, right ?

fixed adding global provider in .ladle/components.tsx with the following code:

import React, { type FC, type ReactNode, useState, useEffect } from 'react';
import { StyleSheetManager } from 'styled-components';

const getDocument = (story: string) => {
  const iframe = document.querySelector(
    `[title='Story ${story}']`
  ) as HTMLIFrameElement;
  return iframe && iframe.contentDocument ? iframe.contentDocument : document;
};

export const Provider: FC<{
  globalState: {
    theme: string;
    rtl: string;
    story: string;
    width: number;
  };
  children: ReactNode;
}> = ({ children, globalState }) => {
  const [target, setTarget] = useState(getDocument(globalState.story).head);
  useEffect(() => {
    setTarget(getDocument(globalState.story).head);
  }, [globalState.width]);

  return <StyleSheetManager target={target}>{children}</StyleSheetManager>;
};

[tajo]

Will be completely fixed with v3 to make it working out of the box. There is also an SWC styled-components plugin that can be optionally added to make the debugging easier. This will be covered in new docs.