diff --git a/CHANGELOG.md b/CHANGELOG.md index 14dc6a61ecc7..256196a7e79a 100644 --- a/CHANGELOG.md +++ b/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! diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md index 80d0e45f1981..f6df38746483 100644 --- a/CHANGELOG.prerelease.md +++ b/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! diff --git a/code/addons/pseudo-states/src/preview/rewriteStyleSheet.ts b/code/addons/pseudo-states/src/preview/rewriteStyleSheet.ts index e41a7a62ea58..d9eedaef0208 100644 --- a/code/addons/pseudo-states/src/preview/rewriteStyleSheet.ts +++ b/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 diff --git a/code/addons/pseudo-states/src/stories/NestedRules.stories.tsx b/code/addons/pseudo-states/src/stories/NestedRules.stories.tsx new file mode 100644 index 000000000000..3b52327a73f0 --- /dev/null +++ b/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) => , +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +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)'); + // }, +}; diff --git a/code/addons/pseudo-states/src/stories/NestedRules.tsx b/code/addons/pseudo-states/src/stories/NestedRules.tsx new file mode 100644 index 000000000000..41a047caca9c --- /dev/null +++ b/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) => ( +