[Angular] - Storybook fails to compile: styles of component can not be an empty string

Current Behavior

Since the update to Angular > v13 and NX > v13.6 the Storybook compilations were broken.

The cause that I found was: The styles: [] of any component that is compiled (imported/used/…) must be an empty array or filled with valid CSS. styles: [''] (empty string) will break the compilation with:

Error: PostCSS received undefined instead of CSS string

For anyone else comming across this:

remove the empty string in the styles array. styles: [''] should be styles: []

A bit tricky to track down when you import from other libs in your project, since it doesn’t have to be a component that you use. It just has to be exported from there.

Expected Behavior

The stories should compile, show more output to track down the failing component or at least it should be mentioned in the documentation that you can not pass an empty string to the styles array 😃

Steps to Reproduce

I created the simplest case, since it does already fail when it’s the current component that has the empty string in the styles array.

1. clone https://github.com/bboehm86/storybook-error
2. run npx nx storybook failing-lib -> FAILS
3. go to libs/failing-lib/src/lib/some-component.component.ts + uncomment one of the other stylesentries -> WORKS

(I would have used the nx-examples repo but adding storybook to the angular lib didn’t work quite that easy)

Failure Logs

ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
Error: PostCSS received undefined instead of CSS string
    at new Input (.../storybook-error/node_modules/postcss/lib/input.js:24:13)
    at parse (.../storybook-error/node_modules/postcss/lib/parse.js:8:15)
    at new LazyResult (.../storybook-error/node_modules/postcss/lib/lazy-result.js:133:16)
    at Processor.process (.../storybook-error/node_modules/postcss/lib/processor.js:28:14)
    at Object.loader (.../storybook-error/node_modules/postcss-loader/dist/index.js:97:30)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at runNextTicks (node:internal/process/task_queues:65:3)
    at processImmediate (node:internal/timers:437:9)
    at processResult (.../storybook-error/node_modules/webpack/lib/NormalModule.js:753:19)
    at .../storybook-error/node_modules/webpack/lib/NormalModule.js:855:5
    at .../storybook-error/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at .../storybook-error/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (.../storybook-error/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at Object.loader (.../storybook-error/node_modules/postcss-loader/dist/index.js:142:7)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at runNextTicks (node:internal/process/task_queues:65:3)
    at processImmediate (node:internal/timers:437:9)

Environment

   Node : 16.13.1
   OS   : darwin arm64
   yarn : 1.22.17
   
   nx : 13.7.1
   @nrwl/angular : 13.7.1
   @nrwl/cli : 13.7.1
   @nrwl/cypress : 13.7.1
   @nrwl/detox : undefined
   @nrwl/devkit : 13.7.1
   @nrwl/eslint-plugin-nx : 13.7.1
   @nrwl/express : undefined
   @nrwl/jest : 13.7.1
   @nrwl/js : undefined
   @nrwl/linter : 13.7.1
   @nrwl/nest : undefined
   @nrwl/next : undefined
   @nrwl/node : undefined
   @nrwl/nx-cloud : undefined
   @nrwl/react : undefined
   @nrwl/react-native : undefined
   @nrwl/schematics : undefined
   @nrwl/storybook : 13.7.1
   @nrwl/tao : 13.7.1
   @nrwl/web : undefined
   @nrwl/workspace : 13.7.1
   typescript : 4.5.5
   rxjs : 7.4.0
   ---------------------------------------
   Community plugins:
         @angular/animations: 13.2.0
         @angular/common: 13.2.0
         @angular/compiler: 13.2.0
         @angular/core: 13.2.0
         @angular/forms: 13.2.0
         @angular/platform-browser: 13.2.0
         @angular/platform-browser-dynamic: 13.2.0
         @angular/router: 13.2.0
         @angular-devkit/build-angular: 13.2.1
         @angular/cli: 13.2.1
         @angular/compiler-cli: 13.2.0
         @angular/language-service: 13.2.0

[bboehm86]

Hey @Coly010 😃

Thanks for all the work you put into this and the offer to help even more 😃

I’ve had already cleaned up everything in our codebase (yes, “replace all” was my choice). Just wanted to make sure that the behaviour/error could be found and others don’t have to struggle to track this down.

[Coly010]

Hey! @bboehm86 😃 Looking further into this, it does appear to be related to how Angular are extracting the styles and passing it along to postcss.

This ties our hands a little on what we can offer in support.

I’m not sure a migration would be the best solution as there won’t be too many people affected by this.

Thank you very much for tracking this down, however! In terms of cleaning up your codebase to fix this rampant style strings, you could potentially use:

• a Find All -> Replace All
• a workspace-generator

I think the first one would be easiest to execute, but if you need help putting together a workspace-generator, let me know and I can help you with that 😃

As this is somewhat out of our control however, I’m going to close this issue. Thanks again for raising it, and if you do need additional help, please let me know!!