fix(storybook): Allow stylePreprocessorOptions for React storybooks

[fantoine]

Current Behavior

Currently styles & stylePreprocessorOptions storybook options are automatically removed for non-Angular storybooks.

Expected Behavior

These options used to work correctly with React storybooks.
We should be able to use these options with React projects.

Related Issue(s)

Fixes #

Allow Angular AND React project to use these options in storybooks.

[nx-cloud]

☁️ Nx Cloud Report

CI ran the following commands for commit f88b6ed. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

---

✅ Successfully ran 7 targets

• nx affected --target=build --base=2f85238f8659adbfee57b6c4bf69c0ec22e0b819 --head=f88b6ed346e99da6f6bc07d08c92f1a92141efa4 --parallel=3
• nx affected --target=e2e --base=2f85238f8659adbfee57b6c4bf69c0ec22e0b819 --head=f88b6ed346e99da6f6bc07d08c92f1a92141efa4 --exclude=e2e-detox,e2e-js,e2e-next,e2e-workspace-create,e2e-workspace-integrations,e2e-workspace-core,e2e-react,e2e-web,e2e-angular-extensions,e2e-angular-core,e2e-cli,e2e-nx-plugin,e2e-cypress,e2e-node,e2e-linter,e2e-jest,e2e-a...
• nx affected --target=e2e --base=2f85238f8659adbfee57b6c4bf69c0ec22e0b819 --head=f88b6ed346e99da6f6bc07d08c92f1a92141efa4 --exclude=e2e-storybook,e2e-react-native,e2e-detox --parallel=1
• nx affected --target=lint --base=2f85238f8659adbfee57b6c4bf69c0ec22e0b819 --head=f88b6ed346e99da6f6bc07d08c92f1a92141efa4 --parallel=3
• nx affected --target=test --base=2f85238f8659adbfee57b6c4bf69c0ec22e0b819 --head=f88b6ed346e99da6f6bc07d08c92f1a92141efa4 --parallel=1
• nx build typedoc-theme
• nx run-many --target=build --all --parallel=8 --exclude=docs,nx-dev-data-access-documents,nx-dev-e2e,nx-dev,nx-dev-feature-analytics,nx-dev-feature-conf,nx-dev-feature-doc-viewer,nx-dev-feature-search,nx-dev-feature-storage,nx-dev-feature-versions-and-flavors,nx-dev-ui-commands,nx-dev-ui-common,nx-dev-ui-home,nx-dev-ui-member-card,nx-dev-ui-sponsor...

---

Sent with 💌 from NxCloud.

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/nrwl/nx-dev/AL37JxVS8JiZuYd3RVBcpySBH8K3
✅ Preview: Canceled

[Deployment for f88b6ed canceled]

[FrozenPandaz]

Thank you for your contribution! LGTM 🎉

[mandarini]

Hi there @sidmonta ! Thanks for your contribution! I don't see how you could have used stylePreprocessorOptions in non-Angular projects, since stylePreprocessorOptions is an Angular-builder-only option. Can you please give me an example?

If you look into the Storybook codebase, you can see that stylePreprocessorOptions appears only in the Storybook Angular builder options, and this makes sense, since it's just passing down this option to the actual Angular builder.

I may be wrong, however, and maybe somehow Storybook parses that and includes it in the React builder as well.

[fantoine]

Hi @mandarini.

I can't tell you how it works under the hood, but we use it in our React storybooks (with NX 13.8.3).

We specified these options the same way you could do for Angular projects:

    "storybook": {
      "executor": "@nrwl/storybook:storybook",
      "options": {
        "uiFramework": "@storybook/react",
        "port": 4400,
        "config": {
          "configFolder": "libs/web/ui-thread/.storybook"
        },
        "stylePreprocessorOptions": {
          "includePaths": ["libs/web/ui-theme/src/lib/styles"]
        }
      },
      "configurations": {
        "ci": {
          "quiet": true
        }
      }
    },

Specifying it like this allowed us to share SASS mixins and functions.
It may be a bug in storybook lib or NX module but it's really useful. :)

Do you know an other way to realize this for React projects ?

[mandarini]

Hi @fantoine ! I see, I will look into it. So, you're using this in Nx 13.8.3 and it works, but it stopped working in the latest version? Can you share a sample repository?

[mandarini]

HI @fantoine , any updates on this? I really think that it's strange for stylePreprocessorOptions to have an effect on the React builder..

[fantoine]

Hi @mandarini.

I reproduced our react/storybook configuration here.

In this repository you'll find:

• Shared stylesheets in https://github.com/fantoine/nx-storybook-react/blob/master/libs/web/ui-theme/src/lib/styles
• A component importing mixins in https://github.com/fantoine/nx-storybook-react/blob/master/libs/web/ui-theme/src/lib/component/component.module.scss
• The project configuration using stylePreprocessorOptions in https://github.com/fantoine/nx-storybook-react/blob/master/libs/web/ui-theme/project.json

Feel free to clone this repository and try to run storybook with nx run web-ui-theme:storybook.

It will work correctly until you remove the stylePreprocessorOptions option in project configuration.

[fantoine]

Hi @mandarini. Did you check the sample repository ?

[mandarini]

Hey, @fantoine , not yet, sorry. Lots of things came up :( :( I will as soon as I can

[github-actions]

This pull request has already been merged/closed. If you experience issues related to these changes, please open a new issue referencing this pull request.