Merge pull request #33605 from hpohlmeyer/fix/tw4-selectors

Addon Pseudo-states: Process all nested css rules

Author: yannbf

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;
+    }
+  }
+}