goetzrobin / spartan

Cutting-edge tools powering Angular full-stack development.
https://spartan.ng
MIT License
1.22k stars 134 forks source link

fix: storybook error when adding decorator styles #136

Closed thatsamsonkid closed 7 months ago

thatsamsonkid commented 7 months ago

PR Checklist

Please check if your PR fulfills the following requirements:

PR Type

What kind of change does this PR introduce?

Storybook configuration

Which package are you modifying?

What is the current behavior?

Currently within storybook not able to add styles in component decorator without receiving an error similar to the below image when trying to add something like the following in a component:

@Component({
        ...
    styles: [
        `
            :host {
                display: flex;
                box-sizing: border-box;
                flex-direction: column;
                outline: none;
                pointer-events: auto;
            }
        `,
    ],
...
})
Screenshot 2024-01-21 at 4 54 20 PM

Discovered it is a config issue related @storybook/addon-styling which does not allow us to use any of the addon options when using angular. They mention this issue here https://github.com/storybookjs/addon-styling/blob/main/docs/api.md

So solution was to remove current options in addon and then resolved the inclusion of "tailwind.css" from preview.js of storybook and instead include it as part of the angular build in project.json.

What is the new behavior?

We should now be able to include some inline stying in the component decorators in order to be able to attach styles to the host.

Does this PR introduce a breaking change?

Other information