@storybook/angular does not autoprefix as angular-cli

Describe the bug @storybook/angular does not respect .browserlist or any other way described in angualr story autoprexier

To Reproduce

1. generate angular projekt: https://storybook.js.org/basics/guide-angular/
2. add .browserslistrc to root (see code snippet for example)
3. create component + story with css property that should be autoprefixed (e.g. apperance: none, display: flex, )
4. start storybook

Expected behavior the generated css with storybook should contain prefixed css properties

Screenshots If applicable, add screenshots to help explain your problem.

with work around:

Code snippets story

import { moduleMetadata, storiesOf } from '@storybook/angular';
import { CheckboxComponent } from './checkbox.component';

const stories = storiesOf('Input/Checkbox', module)
  .addDecorator(
    moduleMetadata({
      entryComponents: [CheckboxComponent],
      declarations: [CheckboxComponent],
    })
  );

stories.add('unchecked', () => ({
  template: `<input prefix-checkbox type="checkbox">`
}));

component:

@Component({
  selector: 'input[prefix-checkbox]',
  templat: '<ng-content></ng-content>,
  styleUrls: ['./checkbox.component.scss']
})
export class CheckboxComponent {
}

style:

:host {
  appearance: none;
}

.browserslistrc

### Supported Browsers
last 2 version
IE >= 10

generated css should be:

-webkit-appearance: none;
-moz-appearance: none;
appearance: none;

System:

• Framework: [e.g. react, vue, angular]
• Addons: [@storybook/angular]
• Version: [4.1.11]

Additional context at the moment I am useing a project webpack config to work around this problem:

module.exports = baseConfig => {
  let cssRule = baseConfig.module.rules.find(
    rule => rule.test.toString() === /\.s(c|a)ss$/.toString()
  );
  if (!cssRule) {
    throw new Error('css rule for modification not found');
  }
  cssRule.use = [
    { loader: require.resolve('raw-loader') },
    { loader: require.resolve('postcss-loader'),
      options: {
        plugins: [
          require('autoprefixer')
        ]
      }
    },
    { loader: require.resolve('sass-loader') },
  ];

  return baseConfig;
};

[alexan]

I will create a merge request modifying https://github.com/storybooks/storybook/blob/4da246bbe9413510b48d1ab8b9faf4fae4656d92/app/angular/src/server/framework-preset-angular.js to add this behavior to @storybook/angular.

I have two questions:

• Is there a way to test this?
• I can’t get my change past your linters

        {
          test: /\.s(c|a)ss$/,
          use: [
            require.resolve('raw-loader'),
            {
              loader: require.resolve('postcss-loader'),
              options: {
                plugins: [require('autoprefixer')],
              },
            },
            require.resolve('sass-loader'),
          ],
        },

will throw

.../storybook/app/angular/src/server/framework-preset-angular.js
40:27  error  Unexpected require()                                                                                  global-require
40:27  error  'autoprefixer' should be listed in the project's dependencies. Run 'npm i -S autoprefixer' to add it  import/no-extraneous-dependencies

but using require.resolve in postcss plugin will not work and throw when used in project

Module build failed (from ./node_modules/postcss-loader/lib/index.js):
Error: .../node_modules/autoprefixer/lib/autoprefixer.js is not a PostCSS plugin

[shilman]

Yowza!! I just released https://github.com/storybooks/storybook/releases/tag/v5.1.0-alpha.6 containing PR #5612 that references this issue. Upgrade today to try it out!

Because it’s a pre-release you can find it on the @next NPM tag.

Closing this issue. Please re-open if you think there’s still more to do.