Unstyled Screenshots

[brentrobbins]

I was able to successfully install this storybook addon, however when I click the Feedback or Report Issue buttons the Marker screenshot of Storybook does not include the component's styles. Here's an example.

Here's a screenshot of the component in storybook:

And here's the same component in a Marker screenshot (I highlighted the component):

To help here's my .storybook/main.js file:

/** @type { import('@storybook/svelte-vite').StorybookConfig } */
const config = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|ts|svelte)"],
  addons: [
    "@storybook/addon-svelte-csf",
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@chromatic-com/storybook",
    "@storybook/addon-interactions",
    "@storybook/addon-a11y",
    "@etchteam/storybook-addon-marker"
  ],
  framework: {
    name: "@storybook/svelte-vite",
    options: {},
  },
};
export default config;

and here's my .storybook/preview.js file:

// Docs: https://storybook.js.org/docs/react/essentials/viewport
const customViewports = {
  mobile: {
    name: 'mobile',
    styles: {
      width: '376px',
      height: '100%',
    },
  },
  tablet: {
    name: 'tablet',
    styles: {
      width: '768px',
      height: '100%',
    },
  },
  'sm-desktop': {
    name: 'sm-desktop',
    styles: {
      width: '1024px',
      height: '100%',
    },
  },
  desktop: {
    name: 'desktop',
    styles: {
      width: '1440px',
      height: '100%',
    },
  },
};

/** @type { import('@storybook/svelte').Preview } */
const preview = {
  parameters: {
    layout: 'fullscreen',
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
        },
        viewport: {
      viewports: customViewports,
    },
    marker: {
      destination: 'XXXXXXXXXXXXX',
    }
    }
};

export default preview;

[DanWebb]

Hey @brentrobbins a fix has been released in 4.0.1.