Repository: storybook
Issue: [Bug]: Storybook angular scss inline styles interpolated with js variable not working
Labels: bug,help wanted,angular,sev:S3

### Describe the bug

I'm having the following angular component styles which work in the normal project but don't work in storybook angular

```
styles: [
        `
            @use '@houzy-components/scss' as dsm;

            hzy-overview-page {
                margin-top: 0;

                @include dsm.breakpoints-large-up {
                    margin-top: dsm.$spacing-lg;
                }
            }

            .hzy-dashboard-banner-container {
                margin-top: dsm.$spacing-lg;
            }
        `,
        `
            @use '@houzy-components/scss' as dsm;

            .hzy-teaser-template-image {
                width: 100%;
                height: 100vh;
                opacity: 0.2;
                background-size: contain;
                background-position: top center;
                background-repeat: no-repeat;

                &.${PlatformSection.Buy} {
                    background-image: url('/assets/images/dashboard/buying-dashboard.png');
                }

                &.${PlatformSection.Sell} {
                    background-image: url('/assets/images/dashboard/selling-dashboard.png');
                }

                &.${PlatformSection.Own} {
                    background-image: url('/assets/images/dashboard/living-dashboard.png');
                }

                &.${PlatformSection.Buy}, &.${PlatformSection.Sell}, &.${PlatformSection.Own} {
                    @include dsm.breakpoints-small {
                        background-image: url('/assets/images/dashboard/dashboard-mobile.png');
                        background-size: cover;
                    }
                }
            }
        `,
    ],
```
If I understand correctly when we interpolate js variables with scss it's not compiled correctly in storybook. The resulted styles in storybook are.
![Screenshot 2023-05-03 at 11 28 18](https://user-images.githubusercontent.com/9453094/235866821-1807d231-311b-4ff0-9870-9f62c7d1a9b9.png)
![Screenshot 2023-05-03 at 11 27 46](https://user-images.githubusercontent.com/9453094/235866824-c9e93058-c0e6-44a1-a60d-03b264c854e4.png)

You can see that the resulted style in storybook when interpolating js is not correct. But the first compiled style is fine which uses just scss.


### To Reproduce

Here is see the button story:

https://stackblitz.com/edit/github-xxncqv?file=src/stories/button.component.ts

It's very simple you just need a mixin and a component with styles interpolating js with css. Then if you look for the generated styles you see that the scss compilation didn't took place

### System

```shell
System:
    OS: macOS 13.3.1
    CPU: (10) arm64 Apple M1 Max
  Binaries:
    Node: 16.18.1 - ~/.nvm/versions/node/v16.18.1/bin/node
    npm: 8.19.2 - ~/.nvm/versions/node/v16.18.1/bin/npm
  Browsers:
    Chrome: 112.0.5615.137
    Firefox: 109.0.1
    Safari: 16.4
  npmPackages:
    @storybook/addon-actions: ~7.0.7 => 7.0.7
    @storybook/addon-essentials: ~7.0.7 => 7.0.7
    @storybook/addon-interactions: ~7.0.7 => 7.0.7
    @storybook/addon-links: ~7.0.7 => 7.0.7
    @storybook/addon-mdx-gfm: ~7.0.7 => 7.0.7
    @storybook/angular: ~7.0.7 => 7.0.7
    @storybook/testing-library: ~0.1.0 => 0.1.0
```


### Additional context

_No response_