Release: Patch 8.0.6

.circleci/config.yml

@@ -17,7 +17,7 @@ executors:
         default: "small"
     working_directory: /tmp/storybook
     docker:
-      - image: cimg/node:18.18.0
+      - image: cimg/node:18.19.1
         environment:
           NODE_OPTIONS: --max_old_space_size=6144
     resource_class: <<parameters.class>>
@@ -30,7 +30,7 @@ executors:
         default: "small"
     working_directory: /tmp/storybook
     docker:
-      - image: cimg/node:18.18.0-browsers
+      - image: cimg/node:18.19.1-browsers
         environment:
           NODE_OPTIONS: --max_old_space_size=6144
     resource_class: <<parameters.class>>

.nvmrc

@@ -1 +1 @@
-18.18.2
+18.19.1

CHANGELOG.md

@@ -1,3 +1,10 @@
+## 8.0.6
+
+- CLI: Add --config-dir flag to migrate command - [#26721](https://github.com/storybookjs/storybook/pull/26721), thanks @yannbf!
+- Next.js: Fix next/font usage on Windows machines - [#26700](https://github.com/storybookjs/storybook/pull/26700), thanks @valentinpalkovic!
+- Next.js: Support path aliases when no base url is set - [#26651](https://github.com/storybookjs/storybook/pull/26651), thanks @yannbf!
+- Webpack: Fix sourcemap generation in webpack react-docgen-loader - [#26676](https://github.com/storybookjs/storybook/pull/26676), thanks @valentinpalkovic!
+
 ## 8.0.5
 
 - Addon-docs: Fix `react-dom/server` imports breaking stories and docs - [#26557](https://github.com/storybookjs/storybook/pull/26557), thanks @JReinhold!

code/frameworks/nextjs/src/css/webpack.ts

@@ -36,7 +36,7 @@ export const configureCss = (baseConfig: WebpackConfig, nextConfig: NextConfig):
         ],
         // We transform the "target.css" files from next.js into Javascript
         // for Next.js to support fonts, so it should be ignored by the css-loader.
-        exclude: /next\/.*\/target.css$/,
+        exclude: /next(\\|\/|\\\\).*(\\|\/|\\\\)target\.css$/,
       };
     }
   });

code/frameworks/nextjs/src/font/webpack/configureNextFont.ts

@@ -7,7 +7,7 @@ export function configureNextFont(baseConfig: Configuration, isSWC?: boolean) {
 
   if (isSWC) {
     baseConfig.module?.rules?.push({
-      test: /next\/.*\/target.css$/,
+      test: /next(\\|\/|\\\\).*(\\|\/|\\\\)target\.css$/,
       loader: fontLoaderPath,
     });
   } else {

code/frameworks/nextjs/src/font/webpack/loader/local/get-font-face-declarations.ts

@@ -39,13 +39,9 @@ export async function getFontFaceDeclarations(
     .map(({ prop, value }: { prop: string; value: string }) => `${prop}: ${value};`)
     .join('\n');
 
-  const arePathsWin32Format = /^[a-z]:\\/iu.test(options.filename);
-  const cleanWin32Path = (pathString: string): string =>
-    arePathsWin32Format ? pathString.replace(/\\/gu, '/') : pathString;
-
   const getFontFaceCSS = () => {
     if (typeof localFontSrc === 'string') {
-      const localFontPath = cleanWin32Path(path.join(parentFolder, localFontSrc));
+      const localFontPath = path.join(parentFolder, localFontSrc).replaceAll('\\', '/');
 
       return `@font-face {
           font-family: ${id};
@@ -55,7 +51,7 @@ export async function getFontFaceDeclarations(
     }
     return localFontSrc
       .map((font) => {
-        const localFontPath = cleanWin32Path(path.join(parentFolder, font.path));
+        const localFontPath = path.join(parentFolder, font.path).replaceAll('\\', '/');
 
         return `@font-face {
           font-family: ${id};

code/frameworks/nextjs/src/font/webpack/loader/storybook-nextjs-font-loader.ts

@@ -3,6 +3,7 @@ import { getFontFaceDeclarations as getLocalFontFaceDeclarations } from './local
 import type { LoaderOptions } from './types';
 import { getCSSMeta } from './utils/get-css-meta';
 import { setFontDeclarationsInHead } from './utils/set-font-declarations-in-head';
+import path from 'path';
 
 type FontFaceDeclaration = {
   id: string;
@@ -39,11 +40,19 @@ export default async function storybookNextjsFontLoader(this: any) {
 
   let fontFaceDeclaration: FontFaceDeclaration | undefined;
 
-  if (options.source.endsWith('next/font/google') || options.source.endsWith('@next/font/google')) {
+  const pathSep = path.sep;
+
+  if (
+    options.source.endsWith(`next${pathSep}font${pathSep}google`) ||
+    options.source.endsWith(`@next${pathSep}font${pathSep}google`)
+  ) {
     fontFaceDeclaration = await getGoogleFontFaceDeclarations(options);
   }
 
-  if (options.source.endsWith('next/font/local') || options.source.endsWith('@next/font/local')) {
+  if (
+    options.source.endsWith(`next${pathSep}font${pathSep}local`) ||
+    options.source.endsWith(`@next${pathSep}font${pathSep}local`)
+  ) {
     fontFaceDeclaration = await getLocalFontFaceDeclarations(options, rootCtx, swcMode);
   }
 

code/frameworks/nextjs/src/imports/webpack.ts

@@ -11,8 +11,8 @@ export const configureImports = ({
 }): void => {
   const configLoadResult = loadConfig(configDir);
 
-  if (configLoadResult.resultType === 'failed' || !configLoadResult.baseUrl) {
-    // either not a typescript project or tsconfig contains no baseUrl
+  if (configLoadResult.resultType === 'failed') {
+    // either not a typescript project or tsconfig is not found - we bail
     return;
   }
 

code/lib/cli/src/generate.ts

@@ -126,6 +126,7 @@ command('migrate [migration]')
   .option('-l --list', 'List available migrations')
   .option('-g --glob <glob>', 'Glob for files upon which to apply the migration', '**/*.js')
   .option('-p --parser <babel | babylon | flow | ts | tsx>', 'jscodeshift parser')
+  .option('-c, --config-dir <dir-name>', 'Directory where to load Storybook configurations from')
   .option(
     '-n --dry-run',
     'Dry run: verify the migration exists and show the files to which it will be applied'
@@ -142,7 +143,6 @@ command('migrate [migration]')
       list,
       rename,
       parser,
-      logger: consoleLogger,
     }).catch((err) => {
       logger.error(err);
       process.exit(1);

code/lib/cli/src/migrate.ts

@@ -11,21 +11,40 @@ import { getStorybookVersionSpecifier } from './helpers';
 
 const logger = console;
 
-export async function migrate(migration: any, { glob, dryRun, list, rename, parser }: any) {
+type CLIOptions = {
+  glob: string;
+  configDir?: string;
+  dryRun?: boolean;
+  list?: string[];
+  /**
+   * Rename suffix of matching files after codemod has been applied, e.g. ".js:.ts"
+   */
+  rename?: string;
+  /**
+   * jscodeshift parser
+   */
+  parser?: 'babel' | 'babylon' | 'flow' | 'ts' | 'tsx';
+};
+
+export async function migrate(
+  migration: any,
+  { glob, dryRun, list, rename, parser, configDir: userSpecifiedConfigDir }: CLIOptions
+) {
   if (list) {
     listCodemods().forEach((key: any) => logger.log(key));
   } else if (migration) {
     if (migration === 'mdx-to-csf' && !dryRun) {
       const packageManager = JsPackageManagerFactory.getPackageManager();
 
       const [packageJson, storybookVersion] = await Promise.all([
-        //
         packageManager.retrievePackageJson(),
         getCoercedStorybookVersion(packageManager),
       ]);
-      const { configDir: inferredConfigDir, mainConfig: mainConfigPath } =
-        getStorybookInfo(packageJson);
-      const configDir = inferredConfigDir || '.storybook';
+      const { configDir: inferredConfigDir, mainConfig: mainConfigPath } = getStorybookInfo(
+        packageJson,
+        userSpecifiedConfigDir
+      );
+      const configDir = userSpecifiedConfigDir || inferredConfigDir || '.storybook';
 
       // GUARDS
       if (!storybookVersion) {

code/package.json

@@ -295,5 +295,6 @@
         "Dependency Upgrades"
       ]
     ]
-  }
+  },
+  "deferredNextVersion": "8.0.6"
 }

code/presets/react-webpack/src/loaders/react-docgen-loader.ts

@@ -114,7 +114,10 @@ export default async function reactDocgenLoader(
       }
     });
 
-    const map = magicString.generateMap({ hires: true });
+    const map = magicString.generateMap({
+      includeContent: true,
+      source: this.resourcePath,
+    });
     callback(null, magicString.toString(), map);
   } catch (error: any) {
     if (error.code === ERROR_CODES.MISSING_DEFINITION) {