Angular story styles doesn't seem to support inline scss

[dereklin]

This is for Angular 5 story.

In my story, I have something like:

    styles: [
      `
      .context {
        ...
      }

      my-angular-component {
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: auto 0;
        grid-template-areas:
          'order order order order order order'
          'size size size size tip tip';

        ::ng-deep {
          .size,
          .ship,
          .tip {
            display: none;
          }
          .order {
            justify-content: center;
          }
        }
      }
        `
    ],
    template: `
    <div class="context">
              <my-angular-component [config]="config">
              </my-angular-component>
    </div>

While this style works fine in my my-angular-component.scss, it doesn't work in storybook. Does storybook support inline scss?

[dereklin]

When I extract out the nested css into:

      my-angular-component::ng-deep .size,
      my-angular-component::ng-deep .ship,
      my-angular-component::ng-deep .tip {
        display: none;
      }

It behaves better but the display property is overridden by the existing value. So I had add !important to the style, like:

      my-angular-component::ng-deep .size,
      my-angular-component::ng-deep .ship,
      my-angular-component::ng-deep .tip {
        display: none !important;
      }

and then

my-angular-component::ng-deep .order {
        justify-content: center !important;
}

to make my story work.

It would be nice if I could just use the same style code from my component.scss file for storybook

[igor-dv]

What version of the @storybook/angular do you use? Also, do you have a repo with the reproduction/screenshots/anything helpful?

[dereklin]

Hi @igor-dv,

I am using storybook 3.4.0.

I can't share the code at this point. I was just wondering if inline scss is supported. Do you know if it's supported?

Maybe there is something tricky with ::ng-deep?

Anyway, I'll report back once I have a public repo set up regarding this.

[igor-dv]

It should work because we didn't do anything to make it to not work =)

[dereklin]

@igor-dv
Here is my repo: https://github.com/dereklin/nrwl-nx-workspace-demo/tree/step-012-setup-storybook

step-012-setup-storybook is the branch

When you set up everything and run storybook, you will see two stories: one works and one doesn't work.

Here is the complete stories.ts:

import { NO_ERRORS_SCHEMA } from '@angular/core';
import { storiesOf } from '@storybook/angular';
import { FancyBoxComponent } from './fancy-box.component';

storiesOf('LIBS|FancyBox/FancyBoxComponent', module)
  .add('This one works', () => ({
    moduleMetadata: {
      imports: [],
      schemas: [NO_ERRORS_SCHEMA],
      declarations: [FancyBoxComponent],
      providers: []
    },
    props: {
      config: {
        selectable: true,
        order: 'ABCD',
        selected: false,
        showRemoveMark: false,
        useSemantic: true
      }
    },
    styles: [
      `
      .context {
        height: 100%;
        background-color: black;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      fancy-box {
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: auto 0;
        grid-template-areas:
          'order order order order order order'
          'size size size size tip tip';

        ::ng-deep {
          .size,
          .ship,
          .tip {
            display: none;
          }
          .order {
            justify-content: center;
          }
        }
      }

      fancy-box::ng-deep .size,
      fancy-box::ng-deep .ship,
      fancy-box::ng-deep .tip {
        display: none !important;
      }

      fancy-box::ng-deep .order {
        justify-content: center !important;
      }

      fancy-box::ng-deep .ui.mini.buttons .button,
      fancy-box::ng-deep .ui.mini.buttons .or,
      fancy-box::ng-deep .ui.mini.button {
        font-size: 0.5rem;
      }

    `
    ],
    template: `
    <div class="context">
    <fancy-box [config]="config">
              </fancy-box>
    </div>
              `
  })).add('This one doesn\'t work', () => ({
    moduleMetadata: {
      imports: [],
      schemas: [NO_ERRORS_SCHEMA],
      declarations: [FancyBoxComponent],
      providers: []
    },
    props: {
      config: {
        selectable: true,
        order: 'ABCD',
        selected: false,
        showRemoveMark: false,
        useSemantic: true
      }
    },
    styles: [
      `
      .context {
        height: 100%;
        background-color: black;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      fancy-box {
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: auto 0;
        grid-template-areas:
          'order order order order order order'
          'size size size size tip tip';

        ::ng-deep {
          .size,
          .ship,
          .tip {
            display: none;
          }
          .order {
            justify-content: center;
          }
        }
      }

      fancy-box::ng-deep .ui.mini.buttons .button,
      fancy-box::ng-deep .ui.mini.buttons .or,
      fancy-box::ng-deep .ui.mini.button {
        font-size: 0.5rem;
      }

    `
    ],
    template: `
    <div class="context">
    <fancy-box [config]="config">
              </fancy-box>
    </div>
              `
  }));

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

[igor-dv]

Wasn't able to check it out yet. Does it still happen?

[dereklin]

@igor-dv I haven't tried the newest version of storybook yet. I have been just using the work-around.

[bsara]

@igor-dv this still seems to occur as of today. I'm running Angular ^12.2.6 and storybook 6.3.7

[SunilManthenaG01]

@igor-dv i have a similar issue where in my angular component we are using inline scss like below. But when story book load the component it does not recognize the scss map functions.
I am using story book "@storybook/angular": "^6.4.14",