[Bug] TypeError in extractCommentsWithHash with @storybook/addon-styling and Angular + Tailwind CSS

[iggiSocrates]

Describe the bug

When connecting @storybook/addon-styling with my Angular library that uses Tailwind CSS, I'm encountering a TypeError for components that use component styles. The error message reads ERROR TypeError: Cannot read properties of undefined (reading 'match') and points to the extractCommentsWithHash function.

Components that don't use styleUrls: ['./example.component.scss'] work without issues.

Steps to reproduce the behavior

1. Connect @storybook/addon-styling in an Angular library that uses Tailwind CSS.
2. Create a component that uses styleUrls: ['./example.component.scss'].
3. Run Storybook.
4. See error.

Expected behavior

I expect the component to render correctly in Storybook without encountering a TypeError.

Screenshots and/or logs

Console Error:
re.mjs:9171 ERROR TypeError: Cannot read properties of undefined (reading 'match') at extractCommentsWithHash (compiler.mjs:8358:1) at ShadowCss.shimCssText (compiler.mjs:7922:1) at compiler.mjs:19418:1 at Array.map (<anonymous>) at compileStyles (compiler.mjs:19417:1) at compileComponentFromMetadata (compiler.mjs:18950:1) at CompilerFacadeImpl.compileComponentFromMeta (compiler.mjs:19592:1) at CompilerFacadeImpl.compileComponent (compiler.mjs:19582:1) at EmgInputComponent.get (core.mjs:24724:1) at getComponentDef (c

Environment

package.json
package.json { "name": "lib", "version": "0.0.8", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "watch": "ng build --watch --configuration development", "test": "ng test", "sb": "ng run lib:storybook", "build-storybook": "ng run lib:build-storybook" }, "dependencies": { "@angular-material-components/datetime-picker": "^8.0.0", "@angular-material-components/moment-adapter": "^8.0.0", "@angular/animations": "^14.2.0", "@angular/cdk": "^14.2.7", "@angular/common": "^14.2.0", "@angular/compiler": "^14.2.0", "@angular/core": "^14.2.0", "@angular/forms": "^14.2.0", "@angular/material": "^14.2.7", "@angular/material-moment-adapter": "^14.2.7", "@angular/platform-browser": "^14.2.0", "@angular/platform-browser-dynamic": "^14.2.0", "@angular/router": "^14.2.0", "@fortawesome/angular-fontawesome": "^0.11.1", "@fortawesome/fontawesome-svg-core": "^6.1.1", "@fortawesome/free-brands-svg-icons": "^6.1.2", "@fortawesome/free-regular-svg-icons": "^6.1.1", "@fortawesome/free-solid-svg-icons": "^6.1.1", "@fortawesome/pro-light-svg-icons": "^6.1.1", "@fortawesome/pro-regular-svg-icons": "^6.1.1", "@fortawesome/pro-solid-svg-icons": "^6.1.1", "chroma-js": "^2.4.2", "lodash": "^4.17.21", "moment": "^2.29.4", "rxjs": "~7.5.0", "sass": "^1.62.1", "tslib": "^2.3.0", "zone.js": "~0.11.4" }, "devDependencies": { "@angular-devkit/build-angular": "^14.2.11", "@angular/cli": "~14.2.11", "@angular/compiler-cli": "^14.2.0", "@storybook/addon-actions": "^7.0.3", "@storybook/addon-controls": "^7.0.3", "@storybook/addon-docs": "^7.0.3", "@storybook/addon-essentials": "^7.0.2", "@storybook/addon-interactions": "^7.0.2", "@storybook/addon-links": "^7.0.2", "@storybook/addon-styling": "^1.0.8", "@storybook/angular": "^7.0.2", "@storybook/blocks": "^7.0.2", "@storybook/preset-scss": "^1.0.3", "@storybook/testing-library": "^0.0.14-next.2", "@tailwindcss/aspect-ratio": "^0.4.2", "@tailwindcss/typography": "^0.5.9", "@types/jasmine": "~4.0.0", "autoprefixer": "^10.4.14", "jasmine-core": "~4.3.0", "karma": "~6.4.0", "karma-chrome-launcher": "~3.1.0", "karma-coverage": "~2.2.0", "karma-jasmine": "~5.1.0", "karma-jasmine-html-reporter": "~2.0.0", "ng-packagr": "^14.2.0", "postcss": "^8.4.21", "postcss-cli": "^10.1.0", "postcss-import": "^15.1.0", "postcss-loader": "^7.2.4", "postcss-nesting": "^11.2.2", "postcss-scss": "^4.0.6", "react": "^18.2.0", "react-dom": "^18.2.0", "storybook": "^7.0.2", "style-loader": "^3.3.2", "tailwindcss": "^3.3.1", "typescript": "~4.7.2" } }

postcss.config.js

module.exports = { syntax: 'postcss-scss', plugins: { 'postcss-import': {}, 'tailwindcss/nesting': 'postcss-nesting', tailwindcss: {}, autoprefixer: {}, }, };

[ShaunEvening]

Hey @iggiSocrates 👋

Are you able to share a small reproduction repo with me for investigation?

[iggiSocrates]

Hey, @integrayshaun,

Firstly, thank you so much for your prompt response and willingness to help. I have created a minimal reproduction repository at this link: https://github.com/iggiSocrates/addon-styling-test
To reproduce an error just run the storybook and open the "Problematic" component.
If you will comment line: styleUrls: ['./problematic.component.scss'] everything starts working as it should
Looking forward to hearing from you soon!

[iggiSocrates]

@integrayshaun Hey, do you have any information on that case?

[ShaunEvening]

Hi @iggiSocrates,

Apologies, I was away for the weekend. I'll get a better look at this today. Stay tuned

[ShaunEvening]

Hey @iggiSocrates 👋

I'm just following up. It looks like, because of the way angular is set up, @storybook/addon-styling is not needed to make scss or postcss work in Storybook. If you'd like to use @storybook/addon-styling for the theme switching feature you can update your config to just be

{
  name: "@storybook/addon-styling",
  options: {},
}

[iggiSocrates]

Hey, @integrayshaun
I would like to use it for switching themes from Tailwind, but I also would like to use it for connections global styles scss files which are based on Tailwind. ( with '@apply', '@layer', '@tailwind components', '@tailwind utilities' and so on).
To make it work properly I need to use scss and postcss.
And as I see from the documentation: "Options for css modules, postCss, Sass, and Less" it should be supported by @storybook/addon-styling
As I said previously it works fine for me, the only problem is with the components which have styleUrls.
Do you have any ideas or workaround how to fix this ?

[ShaunEvening]

@iggiSocrates Right, but it looks like Angular handles postcss and sass for you already for the styleUrl files. However, after digging again, it looks like the addon is needed for other styles to be processed properly.

I'll need to look at how we can exclude the StyleURL files from processing

[iggiSocrates]

Hi @integrayshaun
thanks for your information, it would be very helpful if this would be fixed.
Waiting for your updates.

[mmeylan]

Any workaround / fix for this ? We're blocked by this issue

[ShaunEvening]

Hey @mmeylan I'm still investigating right now. Do you have a reproduction of your issue was well for me to dig into?

[ShaunEvening]

@iggiSocrates I think I have figured out the answer 🎉 For Angular CLI, it already handles sass and postcss for you. Instead of configuring it with @storybook/addon-styling you can do it through your angular.json

1. Create a css file for your global tailwind styles in your .storybook folder like so

/* .storybook/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

2. Remove the configuration options from @storybook/addon-styling

import type { StorybookConfig } from '@storybook/angular';

import * as path from 'path';

const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    // Don't give the styling addon options as this will
    // override angular's style rules
    '@storybook/addon-styling',
  ],
  framework: {
    name: '@storybook/angular',
    options: {},
  },
  docs: {
    autodocs: true,
  },
};
export default config;

4. Update your angular.json to inject the global tailwind styles into storybook

{
  "storybook": {
    "builder": "@storybook/angular:start-storybook",
    "options": {
      "configDir": "projects/my-lib/.storybook",
      "browserTarget": "my-lib:build",
      "styles": ["projects/my-lib/.storybook/tailwind.css"],
      "compodoc": false,
      "port": 6006
    }
  },
  "build-storybook": {
    "builder": "@storybook/angular:build-storybook",
    "options": {
      "configDir": "projects/my-lib/.storybook",
      "browserTarget": "my-lib:build",
      "styles": ["projects/my-lib/.storybook/tailwind.css"],
      "compodoc": false,
      "outputDir": "storybook-static"
    }
  }
}

[iggiSocrates]

Hi @integrayshaun, thanks for your reply and investigation.
I think that in basic usage this solution can work, but what if we have multiple scss files which should be attached to Storybook, and some of these files use functionality from Tailwind like : '@apply font-semibold text-xs;', then your solution stops working.
And also tailwind file should also be a scss file, because in some cases people want to override for example @layer base {} from tailwind using '@apply'.
Do you have any ideas?

[ShaunEvening]

Hi @iggiSocrates 👋

I think this should still work for scss files too. Have you had a chance to try it out?