Release: Prerelease 10.3.0-alpha.11

CHANGELOG.md

@@ -1,3 +1,9 @@
+## 10.2.12
+
+- Core: Sanitize inputs for save from controls - [#33868](https://github.com/storybookjs/storybook/pull/33868), thanks @valentinpalkovic!
+- Telemetry: Add project age - [#33910](https://github.com/storybookjs/storybook/pull/33910), thanks @shilman!
+- Webpack: Improve performance of module-mocking plugins - [#33169](https://github.com/storybookjs/storybook/pull/33169), thanks @valentinpalkovic!
+
 ## 10.2.11
 
 - Addon-Vitest: Fix postinstall a11y installation - [#33888](https://github.com/storybookjs/storybook/pull/33888), thanks @valentinpalkovic!

CHANGELOG.prerelease.md

@@ -1,3 +1,11 @@
+## 10.3.0-alpha.11
+
+- Addon Pseudo-states: Process all nested css rules - [#33605](https://github.com/storybookjs/storybook/pull/33605), thanks @hpohlmeyer!
+- Core: Avoid hanging when inferring args for recursive calls on DOM elemens - [#33922](https://github.com/storybookjs/storybook/pull/33922), thanks @valentinpalkovic!
+- Core: Sanitize inputs for save from controls - [#33868](https://github.com/storybookjs/storybook/pull/33868), thanks @valentinpalkovic!
+- Telemetry: Add project age - [#33910](https://github.com/storybookjs/storybook/pull/33910), thanks @shilman!
+- Viewport: Prioritize story viewport globals and avoid user-global pollution - [#33849](https://github.com/storybookjs/storybook/pull/33849), thanks @ia319!
+
 ## 10.3.0-alpha.10
 
 - Addon-Vitest: Fix postinstall a11y installation - [#33888](https://github.com/storybookjs/storybook/pull/33888), thanks @valentinpalkovic!

code/addons/pseudo-states/src/preview/rewriteStyleSheet.ts

@@ -198,24 +198,28 @@ const rewriteRuleContainer = (
       // @ts-expect-error We're adding this nonstandard property below
       numRewritten = cssRule.__pseudoStatesRewrittenCount;
     } else {
-      if ('cssRules' in cssRule && (cssRule.cssRules as CSSRuleList).length) {
-        numRewritten = rewriteRuleContainer(
-          cssRule as CSSGroupingRule,
-          rewriteLimit - count,
-          forShadowDOM
-        );
-      } else {
-        if (!('selectorText' in cssRule)) {
-          continue;
-        }
-        const styleRule = cssRule as CSSStyleRule;
+      let styleRule = cssRule as CSSStyleRule;
+
+      // Modify the rule, if it contains a pseudo state
+      if ('selectorText' in styleRule) {
         if (matchOne.test(styleRule.selectorText)) {
           const newRule = rewriteRule(styleRule, forShadowDOM);
           ruleContainer.deleteRule(index);
           ruleContainer.insertRule(newRule, index);
+          styleRule = ruleContainer.cssRules[index] as CSSStyleRule;
           numRewritten = 1;
         }
       }
+
+      // If it has nested rules, check them as well
+      if ('cssRules' in styleRule && (styleRule.cssRules as CSSRuleList).length) {
+        numRewritten = rewriteRuleContainer(
+          styleRule as CSSGroupingRule,
+          rewriteLimit - count,
+          forShadowDOM
+        );
+      }
+
       // @ts-expect-error We're adding this nonstandard property
       cssRule.__processed = true;
       // @ts-expect-error We're adding this nonstandard property

code/addons/pseudo-states/src/stories/NestedRules.stories.tsx

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Button } from './NestedRules';
+
+const meta = {
+  title: 'NestedRules',
+  component: Button,
+  render: (args, context) => <Button {...args}>{context.name}</Button>,
+} satisfies Meta<typeof Button>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const NestedHover: Story = {
+  parameters: {
+    pseudo: { focusVisible: true },
+  },
+  // TODO: Use this test once the pseudostates addon uses the beforeEach API
+  // play: async ({ canvas }) => {
+  //   const button = canvas.getByRole('button')!;
+  //   await expect(getComputedStyle(button).textDecorationLine).toBe('underline');
+  //   await expect(getComputedStyle(button).textDecorationColor).toBe('rgb(255, 0, 0)');
+  // },
+};

code/addons/pseudo-states/src/stories/NestedRules.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+import './nested.css';
+
+export const Button = (props: React.ButtonHTMLAttributes<HTMLButtonElement>) => (
+  <button className="nested-focus-visible" {...props} />
+);

code/addons/pseudo-states/src/stories/nested.css

@@ -0,0 +1,21 @@
+button {
+  display: inline-block;
+  cursor: pointer;
+  border: 0;
+  border-radius: 3em;
+  background-color: #1ea7fd;
+  padding: 11px 20px;
+  color: white;
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 1;
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+
+.nested-focus-visible {
+  &:focus-visible {
+    @supports (color: color-mix(in lab, red, red)) {
+      text-decoration: underline red;
+    }
+  }
+}

code/core/src/core-server/utils/get-new-story-file.test.ts

@@ -171,6 +171,42 @@ describe('get-new-story-file', () => {
     expect(storyFileContent).not.toContain(STORYBOOK_FN_PLACEHOLDER);
   });
 
+  it('should prevent XSS by escaping special characters in the component file name', async () => {
+    const { storyFileContent } = await getNewStoryFile(
+      {
+        componentFilePath: "src/stories/Button';alert(document.domain);var a='.tsx",
+        componentExportName: 'Button',
+        componentIsDefaultExport: true,
+        componentExportCount: 1,
+      },
+      {
+        presets: {
+          apply: (val: string) => {
+            if (val === 'framework') {
+              return Promise.resolve('@storybook/nextjs');
+            }
+          },
+        },
+      } as unknown as Options
+    );
+
+    expect(storyFileContent).toMatchInlineSnapshot(`
+  "import type { Meta, StoryObj } from '@storybook/nextjs';
+
+  import Buttonalert(documentDomain);varA=\\' from './Button\\';alert(document.domain);var a=\\'';
+
+  const meta = {
+    component: Buttonalert(documentDomain);varA=\\',
+  } satisfies Meta<typeof Buttonalert(documentDomain);varA=\\'>;
+
+  export default meta;
+
+  type Story = StoryObj<typeof meta>;
+
+  export const Default: Story = {};"
+`);
+  });
+
   it('should create a new story file (CSF factory)', async () => {
     const configDir = join(__dirname, '.storybook');
     const previewConfigPath = join(configDir, 'preview.ts');

code/core/src/core-server/utils/get-new-story-file.ts

@@ -26,6 +26,7 @@ import {
 import { getCsfFactoryTemplateForNewStoryFile } from './new-story-templates/csf-factory-template';
 import { getJavaScriptTemplateForNewStoryFile } from './new-story-templates/javascript';
 import { getTypeScriptTemplateForNewStoryFile } from './new-story-templates/typescript';
+import { escapeForTemplate } from './safeString';
 
 export async function getNewStoryFile(
   {
@@ -41,7 +42,7 @@ export async function getNewStoryFile(
 
   const base = basename(componentFilePath);
   const extension = extname(componentFilePath);
-  const basenameWithoutExtension = base.replace(extension, '');
+  const basenameWithoutExtension = escapeForTemplate(base.replace(extension, ''));
   const dir = dirname(componentFilePath);
 
   const { storyFileName, isTypescript, storyFileExtension } = getStoryMetadata(componentFilePath);
@@ -98,7 +99,9 @@ export async function getNewStoryFile(
         const storyFilePath = join(getProjectRoot(), dir);
         const relPath = relative(storyFilePath, previewConfigPath);
         const pathWithoutExt = relPath.replace(/\.(ts|js|mts|cts|tsx|jsx)$/, '');
-        previewImportPath = pathWithoutExt.startsWith('.') ? pathWithoutExt : `./${pathWithoutExt}`;
+        previewImportPath = escapeForTemplate(
+          pathWithoutExt.startsWith('.') ? pathWithoutExt : `./${pathWithoutExt}`
+        );
       }
     }
 

code/core/src/core-server/utils/safeString.test.ts

@@ -0,0 +1,36 @@
+import { describe, expect, it } from 'vitest';
+
+import { escapeForTemplate } from './safeString';
+
+describe('safeString', () => {
+  describe('escapeForTemplate', () => {
+    it('should escape backticks in template strings', () => {
+      expect(escapeForTemplate('button`s.tsx')).toMatchInlineSnapshot('"button\\`s.tsx"');
+    });
+
+    it('should escape dollar signs for template expressions', () => {
+      expect(escapeForTemplate('button$file.tsx')).toMatchInlineSnapshot('"button\\$file.tsx"');
+    });
+
+    it('should escape backslashes', () => {
+      expect(escapeForTemplate('button\\file.tsx')).toMatchInlineSnapshot('"button\\\\file.tsx"');
+    });
+
+    it('should escape quotes', () => {
+      expect(escapeForTemplate("button's.tsx")).toMatchInlineSnapshot(`"button\\'s.tsx"`);
+      expect(escapeForTemplate('button"s.tsx')).toMatchInlineSnapshot(`"button\\"s.tsx"`);
+    });
+
+    it('should handle multiple special characters', () => {
+      expect(escapeForTemplate('button`${file}\\path.tsx')).toMatchInlineSnapshot(
+        `"button\\\`\\\${file}\\\\path.tsx"`
+      );
+    });
+
+    it('should preserve normal file paths', () => {
+      expect(escapeForTemplate('./src/components/Button.tsx')).toMatchInlineSnapshot(
+        '"./src/components/Button.tsx"'
+      );
+    });
+  });
+});

code/core/src/core-server/utils/safeString.ts

@@ -0,0 +1,18 @@
+/**
+ * Escape special characters in a string for safe use within template literals in generated code.
+ * This escapes backticks and template expression delimiters.
+ *
+ * @example
+ *
+ * ```ts
+ * const fileName = "button's.tsx";
+ * const template = `import Button from './${escapeForTemplate(fileName)}'`;
+ * // Results in: import Button from './button\\'s.tsx'
+ * ```
+ */
+export function escapeForTemplate(str: string): string {
+  return str
+    .replace(/\\/g, '\\\\') // Escape backslashes first
+    .replace(/(['"$`])/g, '\\$&') // Then escape quotes, dollar signs, and backticks
+    .replace(/[\n\r]/g, '\\$&'); // Then newlines
+}

code/core/src/preview-api/modules/store/inferArgTypes.ts

@@ -6,7 +6,12 @@ import { dedent } from 'ts-dedent';
 
 import { combineParameters } from './parameters';
 
-const inferType = (value: any, name: string, visited: Set<any>): SBType => {
+const inferType = (
+  value: any,
+  name: string,
+  visited: Set<any>,
+  cache: Map<any, SBType>
+): SBType => {
   const type = typeof value;
   switch (type) {
     case 'boolean':
@@ -19,6 +24,12 @@ const inferType = (value: any, name: string, visited: Set<any>): SBType => {
       break;
   }
   if (value) {
+    // Check cache first for previously computed results
+    if (cache.has(value)) {
+      return cache.get(value)!;
+    }
+
+    // Check for cycles (currently being processed in this path)
     if (visited.has(value)) {
       logger.warn(dedent`
         We've detected a cycle in arg '${name}'. Args should be JSON-serializable.
@@ -29,25 +40,36 @@ const inferType = (value: any, name: string, visited: Set<any>): SBType => {
       `);
       return { name: 'other', value: 'cyclic object' };
     }
+
     visited.add(value);
+
+    let result: SBType;
+
     if (Array.isArray(value)) {
       const childType: SBType =
         value.length > 0
-          ? inferType(value[0], name, new Set(visited))
+          ? inferType(value[0], name, visited, cache)
           : { name: 'other', value: 'unknown' };
-      return { name: 'array', value: childType };
+      result = { name: 'array', value: childType };
+    } else {
+      const fieldTypes = mapValues(value, (field) => inferType(field, name, visited, cache));
+      result = { name: 'object', value: fieldTypes };
     }
-    const fieldTypes = mapValues(value, (field) => inferType(field, name, new Set(visited)));
-    return { name: 'object', value: fieldTypes };
+
+    visited.delete(value); // Remove from current path after processing
+    cache.set(value, result); // Cache the result for future lookups
+
+    return result;
   }
   return { name: 'object', value: {} };
 };
 
 export const inferArgTypes: ArgTypesEnhancer<Renderer> = (context) => {
   const { id, argTypes: userArgTypes = {}, initialArgs = {} } = context;
+  const cache = new Map<any, SBType>();
   const argTypes = mapValues(initialArgs, (arg, key) => ({
     name: key,
-    type: inferType(arg, `${id}.${key}`, new Set()),
+    type: inferType(arg, `${id}.${key}`, new Set(), cache),
   }));
   const userArgTypesNames = mapValues(userArgTypes, (argType, key) => ({
     name: key,