Storybook: [addon-cssresources] CSS Resources are not consistently available in the addon tab

[adamjcook]

Describe the bug
The CSS Resources tab does not consistently display the CSS resource selections specified in the global .storybook/config.js file.

On initial launch, the CSS Resources tab is entirely empty. Subsequent refreshes have no effect.

The only way (in my experience so far) to force the CSS Resources tab to display anything is to purposefully create an error in one of the story files and then fix the error. The browser will refresh with the CSS Resources available. A subsequent browser refresh, however, will cause them to disappear yet again.

To Reproduce
Steps to reproduce the behavior:

1. Create a new @storyboard/html project via npx -p @storybook/cli sb init -h html
2. Add latest @storybook/addon-cssresources as a dev dependency
3. Add trivial CSS resources similarly as described here: https://github.com/storybookjs/storybook/tree/next/addons/cssresources
4. Run npm run storybook and observe that the CSS Resources tab is empty.
5. Intentionally create a webpack build error by modifying stories/index.stories.js incorrectly.
6. Fix the webpack build error.
7. Browser will automatically refresh with the CSS Resources tab displaying the proper CSS resources which can be activated and deactivated successfully.
8. Refresh the browser manually and observe that the CSS Resources tab is empty once again.

If you wish, you may clone the project that I re-created the issue above in here: https://github.com/adamjcook/my-app

Expected behavior
The CSS Resources tab should be continuously populated by the specified CSS resources at initial Storybook load and all subsequent refreshes.

Screenshots
None. But can provide on request.

Code snippets
See reproduction repository here: https://github.com/adamjcook/my-app

System:
System:
OS: Windows 10 10.0.18362
CPU: (12) x64 Intel(R) Xeon(R) E-2186M CPU @ 2.90GHz
Binaries:
Node: 12.9.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.19.1 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.10.2 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: 44.18362.449.0

"devDependencies": {
    "@babel/core": "^7.7.4",
    "@storybook/html": "^5.2.6",
    "@storybook/addon-cssresources": "^5.2.6",
    "babel-loader": "^8.0.6"
  }

Additional context
I have also tested the above scenario in the following browsers to which the issue is also present as described above:

• Firefox version 70.0.1
• Google Chrome version 78.0.3904.108

This issue seems similar to https://github.com/storybookjs/storybook/issues/5418#issuecomment-459974406 with this PR intended to resolve it, I think.

This could also be related to this issue: https://github.com/storybookjs/storybook/issues/7983

The only message in the Browser DevTools Console is:

DevTools failed to parse SourceMap: http://localhost:6006/unfetch.mjs.map

I am not sure if that is relevant.

[atanasster]

@adamjcook - you have an issue in loading the stories before adding the parameters (and thus the css parameters are not available to the stories, except on rebuilding when the parameters are already loaded and just the stories are recompiled).

I hope the above makes sense and here is a fixed config.js:

import { addDecorator, addParameters, configure } from '@storybook/html';
import { withCssResources } from '@storybook/addon-cssresources';


addParameters({
  cssresources: [
    {
        id: `red`,
        code: `<style>body { background-color: red; }</style>`,
        picked: true,
    },
    {
        id: `yellow`,
        code: `<style>body { background-color: yellow; }</style>`,
        picked: false,
    },
  ],
});

addDecorator(withCssResources);


// automatically import all files ending in *.stories.js
configure(require.context('../stories', true, /\.stories\.js$/), module);

[adamjcook]

@atanasster Ah! Thank you for taking the time to respond and set me on the right path! That works.

I am super new to Storybook so I really have not had the time to get used to the fine points here. Is the something that you feel should be documented in the cssresources README.md or perhaps in the Addon documentation somewhere? I did not see anything mentioned here, for example, alhtough the importance of ordering in registering addons is obviously covered.

Your helpful note above is definitely clear to me now, but I am unsure if you see an opportunity to other newcomers to run into this same issue in the future.

I noticed that the cssresources README.md for cssresources has been updated recently to remove examples of specifying CSS Resources globally so I am not sure if that is something that is recommended anymore and/or will be supported in the future.

Let me know and I can do a PR for it.

[atanasster]

@adamjcook - glad to hear you are on your way, feel free to ask questions here or on discord, we have been beginner storybook user and still are :)

If all is ok, please close this issue.

For the docs, I will leave to @shilman to decide what's best - maybe there is already some documentation about this gotcha.

[shilman]

@atanasster @adamjcook Triconfig (coming soon in 5.3) will get rid of this gotcha. Feel free to add docs if you can find a good place to put them!

[adamjcook]

@shilman Thanks for your guidance. If a new configuration scheme is imminent, I think that documenting this issue might be of little value at this point. This "bug" report should hopefully point users having a similar issue to the correct path before Triconfig is available.

That is my thinking anyways. :D

[shilman]

Heartily agree! 👍