Storybook: dist version addon-info should not require user's webpack css loader

[brennancheung]

Describe the bug
When upgrading to @storybook/addon-info 5.1.9 I receive the following error:

ERROR in ./node_modules/@storybook/addon-info/dist/components/PropTable/style.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> .info-table {
|   width: 100%;
| }
 @ ./node_modules/@storybook/addon-info/dist/components/PropTable/components/Table.js 14:0-23

To Reproduce
This is most likely caused because I have the following rule defined in my webpack.config.js:

      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: ['style-loader', 'css-loader'],
      },

Note that node_modules is excluded. This is a very common config but unfortunately it means webpack won't be processing anything inside of shipped npm modules.

Expected behavior
There is an expectation that anything shipped as dist within an npm module should already be compiled and not rely on the user's version of webpack in order to run. There are serious performance and bundle size issues that require node_modules to be excluded. This is the expected contract that all npm modules normally follow.

[brennancheung]

I worked around the issue by excluding just @storybook/addon-info from the exclude.

      {
        test: /\.css$/,
        exclude: /node_modules(?!\/@storybook\/addon-info)/,
        use: ['style-loader', 'css-loader'],
      }

[seraj]

is there any update here? i have same problem

[joyfulelement]

I worked around the issue by excluding just @storybook/addon-info from the exclude.

      {
        test: /\.css$/,
        exclude: /node_modules(?!\/@storybook\/addon-info)/,
        use: ['style-loader', 'css-loader'],
      }

@brennancheung thanks for the workaround, but I still run into the same issue even _without_ the exclude option for css rules as follow, did you had to change anything else?

{
        test: /\.css$/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
            options: {
              modules: {
                localIdentName: '[name]__[local]--[hash:base64:5]',
              },
              sourceMap: true,
              importLoaders: 1,
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: 'inline',
            },
          },
        ],
        include: path.resolve(__dirname, '../src/')
      },

[joyfulelement]

I tried with a different line up of dependencies and confirms that this issue exist since version 5.1.8 for @storybook/addon-info, and the workaround mentioned above with the exclude option also does not work.

    "@dump247/storybook-state": "1.6.1",
    "@storybook/addon-actions": "5.1.8",
    "@storybook/addon-info": "5.1.8",
    "@storybook/addon-knobs": "5.1.8",
    "@storybook/addon-options": "5.1.8",
    "@storybook/react": "5.1.8",

[stale[bot]]

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!

[joyfulelement]

Hi @shilman could you help remove the has workaround label? Since the issue still exist with or without the suggested workaround, thanks.

[ellisio]

I am experiencing this issue with 5.1.10 using the following webpack.config.js. We are using PostCSS and TailwindCSS.

const path = require('path');

module.exports = async ({ config }) => {
  config.module.rules = config.module.rules.filter(f => f.test.toString() !== '/\\.css$/');

  config.module.rules.push({
    test: /\.css$/,
    exclude: /node_modules/,
    loaders: ['style-loader', 'css-loader', 'postcss-loader'],
    include: path.resolve(__dirname, '../'),
  });

  return config;
};

The above was proposed on this thread: https://github.com/storybookjs/storybook/issues/6319#issuecomment-477852640

[ellisio]

I was able to resolve this by modifying our webpack.config.js to be the following:

```
const path = require('path');
const autoprefixer = require('autoprefixer');

module.exports = async ({ config }) => {
config.module.rules = config.module.rules.map(f => {
// Needed to add this to ignore our ../src/ for the default rule, instead of purging it.
if (f.test.toString() === '/\.css$/') {
f.exclude = path.resolve(__dirname, '../src/');
}

return f;

});

config.module.rules.push({
test: /.css$/,
include: path.resolve(__dirname, '../src/'), // Needed to be changed from ../
loaders: ['style-loader', 'css-loader', 'postcss-loader'],
});

return config;
};
```**

[shilman]

FYI addon-info is being superceded by addon-docs, which fixes a bunch of bugs and is easier to maintain. It’s reached release candidate (RC) status and will be properly released soon. Please give it a try! https://medium.com/storybookjs/storybook-docspage-e185bc3622bf

[jerriclynsjohn]

@ellisio @shilman I'm really stuck in bringing in TailwindCSS for Svelte into Storybook, can you let me know what you did besides the above mentioned webpack.config.js. Is there any way that you could share a Svelte + Tailwind + Storybook implementation.

[jerriclynsjohn]

Figured out how to do it and have made a dedicated repo, if anyone needs help in this integration. https://github.com/jerriclynsjohn/svelte-storybook-tailwind

[shilman]

@jerriclynsjohn Awesome, I think this can help a lot of people. If you tweet about it and mention @storybookjs I'd be happy to retweet!

[jerriclynsjohn]

@shilman I've tweeted about it, do let me know if there needs to be any changes in the repo specific to Storybook

[mledu]

@jerriclynsjohn does it process @apply in Style blocks in a Svelte component?

[jerriclynsjohn]

@mledu I've made changes to the code in story and in main source. Do take a look at it, somehow the @apply remains as it is when compiled for stories. Let me know if you have a workaround and please do send a PR if you find a solution. This is working perfectly fine in the main source build, but breaks in story.

The configs in .storybook looks good enough for me, ideally it shows the postcss config file and storybook folder and postcss config has all the essentials. I'm not sure what I'm missing that's causing this not to work. Utilities work perfectly fine and if abstractions as purely handled in components then we could stay away from using @apply.

That being said we should find a way to fix this.

[lucasjs]

This section helped me a lot:
https://storybook.js.org/docs/configurations/custom-webpack-config/#using-your-existing-config

[stale[bot]]

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!

[j18s]

Hi all, I solved this by reading suggestion from @jerriclynsjohn. thanks @jerriclynsjohn

rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
        include: path.resolve(__dirname, '../'),
      },

[stale[bot]]

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[bot]]

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!