move tests to use stories for verification instead

Author: yannbf

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

@@ -3,34 +3,6 @@ import { describe, expect, it } from 'vitest';
 import { rewriteStyleSheet } from './rewriteStyleSheet';
 import { splitSelectors } from './splitSelectors';
 
-function getNestedRule(rule: any, index: number) {
-  if (!('cssRules' in rule)) {
-    throw new Error('Cannot get nested rule, because the rule is not a CSSGroupingRule.', rule);
-  }
-  return (rule as CSSGroupingRule).cssRules[index];
-}
-
-function ensureCSSStyleRule(rule: any) {
-  if (!(rule instanceof CSSStyleRule)) {
-    throw new Error(`Rule is not a CSSStyleRule, but a ${rule.constructor.name}`);
-  }
-  return rule;
-}
-
-function ensureCSSLayerBlockRule(rule: any) {
-  if (!(rule instanceof CSSLayerBlockRule)) {
-    throw new Error(`Rule is not a BlockLayerRule, but a ${rule.constructor.name}`);
-  }
-  return rule;
-}
-
-function ensureCSSMediaRule(rule: any) {
-  if (!(rule instanceof CSSMediaRule)) {
-    throw new Error(`Rule is not a CSSMediaRule, but a ${rule.constructor.name}`);
-  }
-  return rule;
-}
-
 function splitRules(cssText: string): string[] {
   let ruleStart: number | undefined;
   let depth = 0;
@@ -478,36 +450,6 @@ describe('rewriteStyleSheet', () => {
     expect(sheet.cssRules[3].getSelectors()).toContain('.pseudo-hover-all .test2');
   });
 
-  it('rewrites deeply nested rules', () => {
-    const styleSheet = new CSSStyleSheet();
-    styleSheet.replaceSync(
-      `@layer utilities {
-        .hover\\:text-red-500 {
-          @media (hover: hover) {
-            &:hover {
-                color: var(--color-red-500);
-            }
-          }
-        }
-      }`
-    );
-
-    rewriteStyleSheet(styleSheet);
-
-    const layerRule = ensureCSSLayerBlockRule(getNestedRule(styleSheet, 0));
-    expect(layerRule.name).toBe('utilities');
-
-    const twSelector = ensureCSSStyleRule(getNestedRule(layerRule, 0));
-    expect(twSelector.selectorText).toBe('.hover\\:text-red-500');
-
-    const media = ensureCSSMediaRule(getNestedRule(twSelector, 0));
-    expect(media.conditionText).toBe('(hover: hover)');
-
-    const hover = ensureCSSStyleRule(getNestedRule(media, 0));
-    expect(hover).toBeInstanceOf(CSSStyleRule);
-    expect(hover.selectorText).toBe('&:hover, &.pseudo-hover, .pseudo-hover-all &');
-  });
-
   it('rewrites rules inside "@media"', () => {
     const sheet = new Sheet(
       `@media (max-width: 790px) {

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/addons/pseudo-states/vitest.config.ts

@@ -1,7 +1,5 @@
 import { defineConfig, mergeConfig } from 'vitest/config';
 
-import { playwright } from '@vitest/browser-playwright';
-
 import { vitestCommonConfig } from '../../vitest.shared';
 
 export default mergeConfig(
@@ -11,12 +9,6 @@ export default mergeConfig(
       typecheck: {
         enabled: true,
       },
-      browser: {
-        enabled: true,
-        headless: true,
-        provider: playwright(),
-        instances: [{ browser: 'chromium' }],
-      },
     },
   })
 );

scripts/ci/common-jobs.ts

@@ -239,7 +239,7 @@ export const testsUnit_linux = defineJob(
   'Tests (linux)',
   (workflowName) => ({
     executor: {
-      name: 'sb_playwright',
+      name: 'sb_node_22_classic',
       class: 'large',
     },
     steps: [