Add ability to target a specific viewport in CSS

[jasonsperske]

Is your feature request related to a problem? Please describe.

I am using storybook to developer a library of components that appear in 3 different web clients (native Mac, Windows, extension and a sidebar). Each of these views have different dimensions which I have mapped with this code:

viewport: {
  viewports: {
    mac: { name: 'mac', styles: { width: '400px', height: '286px' } },
    win: { name: 'win', styles: { width: '424px', height: '286px' } },
    extension: { name: 'extension', styles: { width: '414px', height: '286px' } },
    sidebar: { name: 'sidebar', styles: { width: '300px', height: '100%' } },
  },
  defaultViewport: 'mac'
}

However I do not have a way to define other properties besides height or width.

Describe the solution you'd like

I would like to be able to target different viewports in my preview.css (imported into .storybook/preview.tsx) with code like this:

#storybook-root {
  padding: 12px;
}
body[data-storybook-viewport-id="win"] #storybook-root {
  padding: 16px;
}

Describe alternatives you've considered

Currently I am just applying 12px padding in preview.css to all viewpoerts and manually accounting for the viewport width on the win viewport by subtracting 8px from its width. It might also be possible to add padding to the ViewportStyles (src)[https://github.com/storybookjs/storybook/blob/next/code/addons/viewport/src/models/Viewport.ts] though a CSS approach feels cleaner.

Are you able to assist to bring the feature to reality?

yes, I can

Additional context

I created a pull request that implements this fix at #25897