Automigrations: Create addon-postcss automigration

code/lib/cli/src/automigrate/fixes/addon-postcss.test.ts

@@ -0,0 +1,42 @@
+import { addonPostCSS } from './addon-postcss';
+import type { StorybookConfig } from '@storybook/types';
+import type { JsPackageManager } from '@storybook/core-common';
+import { expect, describe, it } from 'vitest';
+
+const checkAddonPostCSS = async ({
+  packageManager,
+  mainConfig = {},
+  storybookVersion = '7.0.0',
+}: {
+  packageManager?: Partial<JsPackageManager>;
+  mainConfig?: Partial<StorybookConfig>;
+  storybookVersion?: string;
+}) => {
+  return addonPostCSS.check({
+    packageManager: packageManager as any,
+    storybookVersion,
+    mainConfig: mainConfig as any,
+  });
+};
+
+describe('check function', () => {
+  it('should return { hasAddonPostcss: true } if @storybook/addon-postcss is found', async () => {
+    await expect(
+      checkAddonPostCSS({
+        mainConfig: {
+          addons: ['@storybook/addon-postcss'],
+        },
+      })
+    ).resolves.toEqual({ hasAddonPostcss: true });
+  });
+
+  it('should return null if @storybook/addon-postcss is not found', async () => {
+    await expect(
+      checkAddonPostCSS({
+        mainConfig: {
+          addons: [],
+        },
+      })
+    ).resolves.toBeNull();
+  });
+});

code/lib/cli/src/automigrate/fixes/addon-postcss.ts

@@ -0,0 +1,41 @@
+import chalk from 'chalk';
+import { dedent } from 'ts-dedent';
+import type { Fix } from '../types';
+import { getAddonNames } from '../helpers/mainConfigFile';
+
+interface AddonPostcssRunOptions {
+  hasAddonPostcss: boolean;
+}
+
+export const addonPostCSS: Fix<AddonPostcssRunOptions> = {
+  id: 'addon-postcss',
+
+  versionRange: ['<7', '>=7'],
+
+  promptType: 'notification',
+
+  async check({ mainConfig }) {
+    const addons = getAddonNames(mainConfig);
+    const hasAddonPostcss = !!addons.find((addon) => addon.includes('@storybook/addon-postcss'));
+
+    if (!hasAddonPostcss) {
+      return null;
+    }
+
+    return { hasAddonPostcss: true };
+  },
+
+  prompt() {
+    return dedent`
+      ${chalk.bold(
+        'Attention'
+      )}: We've detected that you're using the following package which are incompatible with Storybook 8 and beyond:
+
+      - ${chalk.cyan(`@storybook/addon-postcss`)}
+
+      Please migrate to ${chalk.cyan(
+        `@storybook/addon-styling-webpack`
+      )} once you're done upgrading.
+    `;
+  },
+};

code/lib/cli/src/automigrate/fixes/index.ts

@@ -24,6 +24,7 @@ import { removeArgtypesRegex } from './remove-argtypes-regex';
 import { webpack5CompilerSetup } from './webpack5-compiler-setup';
 import { removeJestTestingLibrary } from './remove-jest-testing-library';
 import { mdx1to3 } from './mdx-1-to-3';
+import { addonPostCSS } from './addon-postcss';
 
 export * from '../types';
 
@@ -32,6 +33,7 @@ export const allFixes: Fix[] = [
   cra5,
   webpack5,
   vue3,
+  addonPostCSS,
   viteConfigFile,
   eslintPlugin,
   builderVite,