storybook: :host styles in Angular are completely ignored

Describe the bug

If you happen to have styles defined using the :host selector in angular, they won’t be applied if you’re inside storybook despite looking fine everywhere else.

To Reproduce

Define :host { background: red } styling in an angular component
Go to Storybook
Component does not have a red background as host styling is not applied.

Expected behavior

Host styling is properly applied and the background is red.

Screenshots

None

Code snippets

@Component({
  template: `I'm some text`,
  styles: [
    ':host { background: red; }'
  ],
  selector: 'an-angular-component'
})
class AnAngularComponent {}

const stories = storiesOf('An angular component', module);

stories.addDecorator(
  moduleMetadata({
    declarations: [
      AnAngularComponent
    ]
  }));

stories
  .add('Example', () => ({
    template: `<an-angular-component></an-angular-component>`
  }))

System:

Environment Info:

  System:
    OS: macOS 10.15
    CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
  Binaries:
    Node: 12.6.0 - ~/.nvm/versions/node/v12.6.0/bin/node
    Yarn: 1.19.1 - ~/.nvm/versions/node/v12.6.0/bin/yarn
    npm: 6.9.0 - ~/.nvm/versions/node/v12.6.0/bin/npm
  Browsers:
    Chrome: 78.0.3904.70
    Firefox: 70.0
    Safari: 13.0.2
  npmPackages:
    @storybook/addon-actions: ^5.2.5 => 5.2.5
    @storybook/addon-backgrounds: ^5.2.5 => 5.2.5
    @storybook/addon-centered: ^5.2.5 => 5.2.5
    @storybook/addon-info: ^5.2.5 => 5.2.5
    @storybook/addon-knobs: ^5.2.5 => 5.2.5
    @storybook/addon-notes: ^5.2.5 => 5.2.5
    @storybook/addon-options: ^5.2.5 => 5.2.5
    @storybook/addon-storysource: ^5.2.5 => 5.2.5
    @storybook/addon-viewport: ^5.2.5 => 5.2.5
    @storybook/addons: ^5.2.5 => 5.2.5
    @storybook/angular: ^5.2.5 => 5.2.5

Additional context

Nothing to add.

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 5
Comments: 21 (6 by maintainers)

Most upvoted comments

It’s a bit disheartening to see that this hasn’t been addressed. From what I’ve been able to figure, component styles should be handled by the angular builder. If you completely remove the style processing that’s recommended by Storybook, then global styles, node_module styles, and styles that aren’t imported into components won’t work.

This does the job but if I can get some feedback that would be great. Also if it looks to be an accepted solution, can someone within storybook please update the docs.

  config.plugins.push(new MiniCssExtractPlugin({ filename: '[name].css' }));

  config.module.rules.push({
    test: /^(?=.*\.s[ac]ss)(?!.*\.component\.).*$/i,
    use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
    include: 'your_relative_path_to_project_root',
  });

the0rem on Nov 10, 2020

cc @kroeder @gaetanmaisse we should make sure we play nice with Nx, whether it’s a fix on our side or theirs. I’ve created an nx label to help prioritize these issues.

shilman on Feb 14, 2020