Styles not getting applied in storybook v6 - using postcss/css modules

[tommaton]

Describe the bug Every time I run storybook none of the styles/classes are not getting applied to the components. The component stories are generated ok just with no styles.

But when I add the components into an app it all works fine.

To Reproduce Running the command start-storybook -c .storybook -p 6006 from the root

Expected behavior Styles to be applied to the components in storybook

Code snippets Button.component.tsx

import React from 'react';
import cx from 'classnames';

import * as styles from './button.module.css';

export interface IButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  /**
   * Sets chosen styling of the button
   */
  buttonStyle: 'primary' | 'secondary' | 'tertiary';
  /**
   * Checks if the button should be full width
   */
  isFullWidth?: boolean;
  /**
   * Sets the type of button to render
   */
  type: 'button' | 'submit' | 'reset';
}

/**
 * Primary UI component for user interaction
 */
export const Button: React.FC<IButtonProps> = ({
  children,
  buttonStyle,
  isFullWidth,
  type,
  ...props
}) => (
  <button
    className={cx(styles.button, {
      [styles[buttonStyle]]: buttonStyle,
      [styles.fullWidth]: isFullWidth,
    })}
    data-testid={buttonStyle}
    {...props}
  >
    {children}
  </button>
);

Button.defaultProps = {
  buttonStyle: 'primary',
  isFullWidth: false,
  type: 'button',
};

Button.module.css

.button {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  font-family: Barlow, sans-serif;
  font-kerning: none;
  font-size: 16px;
  font-weight: 700;
  justify-content: center;
  line-height: 1.5;
  outline: none;
  padding: 12px 16px;
  position: relative;
  transition: all 200ms ease-in-out;
  white-space: nowrap;
  width: auto;

  &[disabled] {
    cursor: not-allowed;
  }
}

.primary {
  background-color: #e10a0a;
  border: 1px solid transparent;
  color: #fff;

  &:hover {
    background-color: #fff;
    border: 1px solid #e10a0a;
    color: #e10a0a;
  }
}

.secondary {
  background-color: #fff;
  border: 1px solid #e3e3e3;
  color: #e10a0a;

  &:hover {
    border: 1px solid #e10a0a;
  }
}

.fullWidth {
  width: 100%;
}

.storybook/main.js

module.exports = {
  stories: ['../packages/components/**/**/*.stories.@(tsx|ts)'],
  addons: ['@storybook/addon-essentials', '@storybook/addon-a11y'],
  webpackFinal: async (config, { configType }) => {
    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
    // You can change the configuration based on that.
    // 'PRODUCTION' is used when building the static version of storybook.

    // Make whatever fine-grained changes you need
    config.module.rules.push({
      test: /\.css$/,
      use: [{
        loader: 'css-loader',
        options: {
          modules: true
        }
      }, 'postcss-loader'],
      include: path.resolve(__dirname, '../'),
    });

    // Return the altered config
    return config;
  },
};

System Environment Info:

System: OS: macOS 10.15.7 CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz Binaries: Node: 12.18.3 - ~/.nvm/versions/node/v12.18.3/bin/node Yarn: 1.22.5 - ~/.yvm/shim/yarn npm: 6.14.6 - ~/.nvm/versions/node/v12.18.3/bin/npm Browsers: Chrome: 87.0.4280.67 Edge: 87.0.664.52 Firefox: 81.0 Safari: 14.0.1 npmPackages: @storybook/addon-a11y: ^6.1.9 => 6.1.9 @storybook/addon-essentials: ^6.1.9 => 6.1.9 @storybook/addon-info: ^5.3.21 => 5.3.21 @storybook/addon-viewport: ^6.1.9 => 6.1.9 @storybook/addons: ^6.1.9 => 6.1.9 @storybook/preset-typescript: ^3.0.0 => 3.0.0 @storybook/react: ^6.1.9 => 6.1.9 @storybook/theming: ^6.1.9 => 6.1.9

Additional context Add any other context about the problem here.

[shilman]

Do you have a repro repo you can share?

[tommaton]

I'll try and get one sorted ASAP

[tommaton]

@shilman this is a reproduction of the repo of which I'm able to replicate https://github.com/tommaton/storybook-postcss-issue

[DylanCulfogienis]

Any workarounds for this?

[jonniebigodes]

@DylanCulfogienis there's been some updates on how Storybook and PostCss work together. And a new addon was recently released. See if it helps in your case, otherwise if you could create a reproduction so that it can be better looked at it would help us immensely.

Sounds good?

Stay safe

[vincro]

To add you still need to use a pre-release version of SB to make it work @jonniebigodes ... Thanks for the tip off on that btw :)

[danspratling]

+1 to this issue. I'm also running into the same problem when trying to use css modules with postcss 8. module files are ignored completely, and if I try to change the @storybook/addon-postcss or webpack final rules (well out of my comfort zone) to get it to work, I get errors which are super unhelpful.

I've created a minimum repro using nextjs boilerplate and postcss

https://github.com/danspratling/postcss-modules-re

Note that I'm using postcss-8 and storybook alpha

Note that the two pages are different on the dev server but appear the same in storybook because the module styling isn't in place

I've tried every solution I can find on the web attempting to force storybook/webpack config to work with modules but none succeed.

[vincro]

To ask the obvious, I assume you are importing the CSS into storybook? Looks like not.

+1 to this issue. I'm also running into the same problem when trying to use css modules with postcss 8. module files are ignored completely, and if I try to change the @storybook/addon-postcss or webpack final rules (well out of my comfort zone) to get it to work, I get errors which are super unhelpful.

I've created a minimum repro using nextjs boilerplate and postcss

https://github.com/danspratling/postcss-modules-re

Note that I'm using postcss-8 and storybook alpha

Note that the two pages are different on the dev server but appear the same in storybook because the module styling isn't in place

I've tried every solution I can find on the web attempting to force storybook/webpack config to work with modules but none succeed.

[danspratling]

I am in my main project - I didn't add it here because a global stylesheet shouldn't be required for modules to work, as modules go directly into the JS component (and therefore should be available to storybook that way too)

Just for argument's sake, I tried adding global.css into preview.js but that didn't change anything

To ask the obvious, I assume you are importing the CSS into storybook? Looks like not.

+1 to this issue. I'm also running into the same problem when trying to use css modules with postcss 8. module files are ignored completely, and if I try to change the @storybook/addon-postcss or webpack final rules (well out of my comfort zone) to get it to work, I get errors which are super unhelpful. I've created a minimum repro using nextjs boilerplate and postcss https://github.com/danspratling/postcss-modules-re Note that I'm using postcss-8 and storybook alpha Note that the two pages are different on the dev server but appear the same in storybook because the module styling isn't in place I've tried every solution I can find on the web attempting to force storybook/webpack config to work with modules but none succeed.

[vincro]

I am in my main project - I didn't add it here because a global stylesheet shouldn't be required for modules to work, as modules go directly into the JS component (and therefore should be available to storybook that way too)

Just for argument's sake, I tried adding global.css into preview.js but that didn't change anything

To ask the obvious, I assume you are importing the CSS into storybook? Looks like not.

+1 to this issue. I'm also running into the same problem when trying to use css modules with postcss 8. module files are ignored completely, and if I try to change the @storybook/addon-postcss or webpack final rules (well out of my comfort zone) to get it to work, I get errors which are super unhelpful. I've created a minimum repro using nextjs boilerplate and postcss https://github.com/danspratling/postcss-modules-re Note that I'm using postcss-8 and storybook alpha Note that the two pages are different on the dev server but appear the same in storybook because the module styling isn't in place I've tried every solution I can find on the web attempting to force storybook/webpack config to work with modules but none succeed.

of course =)

[johanleroch]

I have the same issue.. It works when I'm in dev mode, but it doesn't in production build...