@storybook/angular 9.0.10 → 9.0.11

package/dist/client/angular-beta/AbstractRenderer.js

@@ -1,37 +1,4 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AbstractRenderer = exports.STORY_UID_ATTRIBUTE = void 0;
 const platform_browser_1 = require("@angular/platform-browser");
@@ -41,6 +8,7 @@ const StorybookModule_1 = require("./StorybookModule");
 const StorybookProvider_1 = require("./StorybookProvider");
 const BootstrapQueue_1 = require("./utils/BootstrapQueue");
 const PropertyExtractor_1 = require("./utils/PropertyExtractor");
+const Zoneless_1 = require("./utils/Zoneless");
 const applicationRefs = new Map();
 /**
  * Attribute name for the story UID that may be written to the targetDOMNode.
@@ -115,12 +83,12 @@ class AbstractRenderer {
             ...(storyFnAngular.applicationConfig?.providers ?? []),
         ];
         if (STORYBOOK_ANGULAR_OPTIONS?.experimentalZoneless) {
-            const { provideExperimentalZonelessChangeDetection } = await Promise.resolve().then(() => __importStar(require('@angular/core')));
-            if (!provideExperimentalZonelessChangeDetection) {
-                throw new Error('Experimental zoneless change detection requires Angular 18 or higher');
+            const provideZonelessChangeDetectionFn = await (0, Zoneless_1.getProvideZonelessChangeDetectionFn)();
+            if (!provideZonelessChangeDetectionFn) {
+                throw new Error('Zoneless change detection requires Angular 18 or higher');
             }
             else {
-                providers.unshift(provideExperimentalZonelessChangeDetection());
+                providers.unshift(provideZonelessChangeDetectionFn());
             }
         }
         const applicationRef = await (0, BootstrapQueue_1.queueBootstrapping)(() => {

package/dist/client/angular-beta/AbstractRenderer.mjs

@@ -5,6 +5,7 @@ import { getApplication } from './StorybookModule';
 import { storyPropsProvider } from './StorybookProvider';
 import { queueBootstrapping } from './utils/BootstrapQueue';
 import { PropertyExtractor } from './utils/PropertyExtractor';
+import { getProvideZonelessChangeDetectionFn } from './utils/Zoneless';
 const applicationRefs = new Map();
 /**
  * Attribute name for the story UID that may be written to the targetDOMNode.
@@ -79,12 +80,12 @@ export class AbstractRenderer {
             ...(storyFnAngular.applicationConfig?.providers ?? []),
         ];
         if (STORYBOOK_ANGULAR_OPTIONS?.experimentalZoneless) {
-            const { provideExperimentalZonelessChangeDetection } = await import('@angular/core');
-            if (!provideExperimentalZonelessChangeDetection) {
-                throw new Error('Experimental zoneless change detection requires Angular 18 or higher');
+            const provideZonelessChangeDetectionFn = await getProvideZonelessChangeDetectionFn();
+            if (!provideZonelessChangeDetectionFn) {
+                throw new Error('Zoneless change detection requires Angular 18 or higher');
             }
             else {
-                providers.unshift(provideExperimentalZonelessChangeDetection());
+                providers.unshift(provideZonelessChangeDetectionFn());
             }
         }
         const applicationRef = await queueBootstrapping(() => {

package/dist/client/angular-beta/utils/Zoneless.d.ts

@@ -0,0 +1 @@
+export declare const getProvideZonelessChangeDetectionFn: () => Promise<any>;

package/dist/client/angular-beta/utils/Zoneless.js

@@ -0,0 +1,45 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getProvideZonelessChangeDetectionFn = void 0;
+const getProvideZonelessChangeDetectionFn = async () => {
+    const angularCore = await Promise.resolve().then(() => __importStar(require('@angular/core')));
+    return 'provideExperimentalZonelessChangeDetection' in angularCore
+        ? angularCore.provideExperimentalZonelessChangeDetection
+        : 'provideZonelessChangeDetection' in angularCore
+            ? angularCore.provideZonelessChangeDetection
+            : null;
+};
+exports.getProvideZonelessChangeDetectionFn = getProvideZonelessChangeDetectionFn;

package/dist/client/angular-beta/utils/Zoneless.mjs

@@ -0,0 +1,8 @@
+export const getProvideZonelessChangeDetectionFn = async () => {
+    const angularCore = await import('@angular/core');
+    return 'provideExperimentalZonelessChangeDetection' in angularCore
+        ? angularCore.provideExperimentalZonelessChangeDetection
+        : 'provideZonelessChangeDetection' in angularCore
+            ? angularCore.provideZonelessChangeDetection
+            : null;
+};

package/dist/server/angular-cli-webpack.js

@@ -15,6 +15,98 @@ const { getCommonConfig, getStylesConfig, getDevServerConfig, getTypeScriptConfi
  */
 exports.getWebpackConfig = async (baseConfig, { builderOptions, builderContext }) => {
     /** Get angular-cli Webpack config */
+    /**
+     * Custom styles config that handles Tailwind 4 compatibility issues.
+     *
+     * Problem: Angular's getStylesConfig() doesn't support Tailwind 4's new PostCSS plugin
+     * architecture. When Tailwind 4 is detected, Angular tries to load it using the old v3 API which
+     * throws errors.
+     *
+     * Solution: Detect Tailwind 4, bypass Angular's automatic Tailwind detection by hiding config
+     * files, then manually inject the correct Tailwind 4 PostCSS plugin into the webpack
+     * configuration.
+     */
+    async function getCustomStylesConfig(wco) {
+        const { root } = wco;
+        /**
+         * Detect if Tailwind 4 is being used by checking for the new @tailwindcss/postcss package.
+         * Tailwind 4 uses @tailwindcss/postcss instead of the main tailwindcss package for PostCSS
+         * integration.
+         */
+        const isTailwind4 = () => {
+            try {
+                require.resolve('@tailwindcss/postcss', { paths: [root] });
+                return true;
+            }
+            catch {
+                return false;
+            }
+        };
+        if (isTailwind4()) {
+            // Monkey patch readdir to make findTailwindConfigurationFile return undefined
+            const fs = require('node:fs/promises');
+            const originalReaddir = fs.readdir;
+            /**
+             * Hide Tailwind config files from Angular's automatic detection. This prevents Angular from
+             * trying to load Tailwind using the incompatible v3 API. By filtering out tailwind config
+             * files, findTailwindConfigurationFile() returns undefined, and Angular skips its built-in
+             * Tailwind setup entirely.
+             */
+            fs.readdir = async function (path, options) {
+                const results = await originalReaddir.call(this, path, options);
+                const tailwindFiles = [
+                    'tailwind.config.js',
+                    'tailwind.config.cjs',
+                    'tailwind.config.mjs',
+                    'tailwind.config.ts',
+                ];
+                // Filter out tailwind config files from the results
+                return results.filter((file) => !tailwindFiles.includes(file));
+            };
+            // Get styles config without Tailwind interference
+            const styleConfig = await getStylesConfig(wco);
+            // Restore original readdir immediately after getting styles config
+            fs.readdir = originalReaddir;
+            /**
+             * Manually inject Tailwind 4 PostCSS plugin into the webpack configuration. Since we bypassed
+             * Angular's automatic Tailwind detection, we need to manually add the correct Tailwind 4
+             * plugin to all PostCSS loader configurations.
+             */
+            const tailwindPackagePath = require.resolve('@tailwindcss/postcss', { paths: [root] });
+            const extraPostcssPlugins = [require(tailwindPackagePath)()];
+            /**
+             * Navigate through webpack's complex rule structure to find all postcss-loader instances and
+             * inject the Tailwind 4 plugin. This preserves Angular's existing PostCSS setup while adding
+             * Tailwind 4 support.
+             */
+            styleConfig.module.rules
+                .map((rule) => rule.rules)
+                .forEach((rule) => {
+                rule.forEach((r) => {
+                    r.oneOf?.forEach?.((oneOfRule) => {
+                        return oneOfRule.use.forEach((use) => {
+                            if (use.loader.includes('postcss-loader') && use.options.postcssOptions) {
+                                const originalOptionsFn = use.options.postcssOptions;
+                                // Wrap the original postcssOptions function to append Tailwind 4 plugin
+                                use.options.postcssOptions = (loaderOptions) => {
+                                    const originalOptions = originalOptionsFn(loaderOptions);
+                                    return {
+                                        ...originalOptions,
+                                        plugins: [...originalOptions.plugins, ...extraPostcssPlugins],
+                                    };
+                                };
+                            }
+                        });
+                    });
+                });
+            });
+            return styleConfig;
+        }
+        else {
+            // Use Angular's default styles config for Tailwind v3 and other CSS frameworks
+            return getStylesConfig(wco);
+        }
+    }
     const { config: cliConfig } = await generateI18nBrowserWebpackConfigFromContext({
         // Default options
         index: 'noop-index',
@@ -35,7 +127,7 @@ exports.getWebpackConfig = async (baseConfig, { builderOptions, builderContext }
         aot: false,
     }, builderContext, (wco) => [
         getCommonConfig(wco),
-        getStylesConfig(wco),
+        getCustomStylesConfig(wco),
         getTypeScriptConfig ? getTypeScriptConfig(wco) : getDevServerConfig(wco),
     ]);
     if (!builderOptions.experimentalZoneless && !cliConfig.entry.polyfills?.includes('zone.js')) {

package/dist/server/angular-cli-webpack.mjs

@@ -15,6 +15,98 @@ const { getCommonConfig, getStylesConfig, getDevServerConfig, getTypeScriptConfi
  */
 exports.getWebpackConfig = async (baseConfig, { builderOptions, builderContext }) => {
     /** Get angular-cli Webpack config */
+    /**
+     * Custom styles config that handles Tailwind 4 compatibility issues.
+     *
+     * Problem: Angular's getStylesConfig() doesn't support Tailwind 4's new PostCSS plugin
+     * architecture. When Tailwind 4 is detected, Angular tries to load it using the old v3 API which
+     * throws errors.
+     *
+     * Solution: Detect Tailwind 4, bypass Angular's automatic Tailwind detection by hiding config
+     * files, then manually inject the correct Tailwind 4 PostCSS plugin into the webpack
+     * configuration.
+     */
+    async function getCustomStylesConfig(wco) {
+        const { root } = wco;
+        /**
+         * Detect if Tailwind 4 is being used by checking for the new @tailwindcss/postcss package.
+         * Tailwind 4 uses @tailwindcss/postcss instead of the main tailwindcss package for PostCSS
+         * integration.
+         */
+        const isTailwind4 = () => {
+            try {
+                require.resolve('@tailwindcss/postcss', { paths: [root] });
+                return true;
+            }
+            catch {
+                return false;
+            }
+        };
+        if (isTailwind4()) {
+            // Monkey patch readdir to make findTailwindConfigurationFile return undefined
+            const fs = require('node:fs/promises');
+            const originalReaddir = fs.readdir;
+            /**
+             * Hide Tailwind config files from Angular's automatic detection. This prevents Angular from
+             * trying to load Tailwind using the incompatible v3 API. By filtering out tailwind config
+             * files, findTailwindConfigurationFile() returns undefined, and Angular skips its built-in
+             * Tailwind setup entirely.
+             */
+            fs.readdir = async function (path, options) {
+                const results = await originalReaddir.call(this, path, options);
+                const tailwindFiles = [
+                    'tailwind.config.js',
+                    'tailwind.config.cjs',
+                    'tailwind.config.mjs',
+                    'tailwind.config.ts',
+                ];
+                // Filter out tailwind config files from the results
+                return results.filter((file) => !tailwindFiles.includes(file));
+            };
+            // Get styles config without Tailwind interference
+            const styleConfig = await getStylesConfig(wco);
+            // Restore original readdir immediately after getting styles config
+            fs.readdir = originalReaddir;
+            /**
+             * Manually inject Tailwind 4 PostCSS plugin into the webpack configuration. Since we bypassed
+             * Angular's automatic Tailwind detection, we need to manually add the correct Tailwind 4
+             * plugin to all PostCSS loader configurations.
+             */
+            const tailwindPackagePath = require.resolve('@tailwindcss/postcss', { paths: [root] });
+            const extraPostcssPlugins = [require(tailwindPackagePath)()];
+            /**
+             * Navigate through webpack's complex rule structure to find all postcss-loader instances and
+             * inject the Tailwind 4 plugin. This preserves Angular's existing PostCSS setup while adding
+             * Tailwind 4 support.
+             */
+            styleConfig.module.rules
+                .map((rule) => rule.rules)
+                .forEach((rule) => {
+                rule.forEach((r) => {
+                    r.oneOf?.forEach?.((oneOfRule) => {
+                        return oneOfRule.use.forEach((use) => {
+                            if (use.loader.includes('postcss-loader') && use.options.postcssOptions) {
+                                const originalOptionsFn = use.options.postcssOptions;
+                                // Wrap the original postcssOptions function to append Tailwind 4 plugin
+                                use.options.postcssOptions = (loaderOptions) => {
+                                    const originalOptions = originalOptionsFn(loaderOptions);
+                                    return {
+                                        ...originalOptions,
+                                        plugins: [...originalOptions.plugins, ...extraPostcssPlugins],
+                                    };
+                                };
+                            }
+                        });
+                    });
+                });
+            });
+            return styleConfig;
+        }
+        else {
+            // Use Angular's default styles config for Tailwind v3 and other CSS frameworks
+            return getStylesConfig(wco);
+        }
+    }
     const { config: cliConfig } = await generateI18nBrowserWebpackConfigFromContext({
         // Default options
         index: 'noop-index',
@@ -35,7 +127,7 @@ exports.getWebpackConfig = async (baseConfig, { builderOptions, builderContext }
         aot: false,
     }, builderContext, (wco) => [
         getCommonConfig(wco),
-        getStylesConfig(wco),
+        getCustomStylesConfig(wco),
         getTypeScriptConfig ? getTypeScriptConfig(wco) : getDevServerConfig(wco),
     ]);
     if (!builderOptions.experimentalZoneless && !cliConfig.entry.polyfills?.includes('zone.js')) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/angular",
-  "version": "9.0.10",
+  "version": "9.0.11",
   "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.",
   "keywords": [
     "storybook",
@@ -52,8 +52,8 @@
     "prep": "rimraf dist && jiti ../../../scripts/prepare/tsc.ts"
   },
   "dependencies": {
-    "@storybook/builder-webpack5": "9.0.10",
-    "@storybook/core-webpack": "9.0.10",
+    "@storybook/builder-webpack5": "9.0.11",
+    "@storybook/core-webpack": "9.0.11",
     "@storybook/global": "^5.0.0",
     "@types/webpack-env": "^1.18.0",
     "fd-package-json": "^1.2.0",
@@ -96,7 +96,7 @@
     "@angular/platform-browser": ">=18.0.0 < 21.0.0",
     "@angular/platform-browser-dynamic": ">=18.0.0 < 21.0.0",
     "rxjs": "^6.5.3 || ^7.4.0",
-    "storybook": "^9.0.10",
+    "storybook": "^9.0.11",
     "typescript": "^4.9.0 || ^5.0.0",
     "zone.js": ">=0.14.0"
   },