Pseudo states is interfering with CSS classes

[philippechevieux]

Hello there,

I'm using the add-on to test pseudo states on Chromatic and it work like a charm. However i've noticed an issue with a compoment based on Ant Design.

Config

addons :[
   ...
   'storybook-addon-pseudo-states'
]

Selector rewritten by the add-on

&:not(.ant-collapse-item-active):not([data-item-selected='true']):not(:last-of-type):not(.pseudo-hover) {
   border-bottom: none;
} 

Default selector

&:not(.ant-collapse-item-active):not([data-item-selected='true']):not(:last-of-type):not(:hover) {
   border-bottom: none;
} 

The issue here is that :hover has been replaced by .pseudo-hover in the storybook build causing a wrong render of my component

[philippechevieux]

Anyone ?

[AriPerkkio]

I just ran into this myself. I have a skip link with :not(:focus) styles which breaks with this addon:

.skipLink {
    position: absolute;
    left: 0;

    &:not(:focus) {
        @include mixins.visually-hidden;
    }
}

// Generates to
.skipLink:not(:focus), .skipLink:not(.pseudo-focus) { ... }

The .skipLink:not(.pseudo-focus) part is always truthy which makes the link invisible even when it receives focus.

Is there any way to disable .pseudo-focus per-story? Or disable the whole addon per-story? I tried adding following without success:

import type {Meta} from '@storybook/react';

export default {
    parameters: {
        pseudo: {
            focus: false, // Or even ['.non-matching-selector']
        },
    },
} satisfies Meta;

Edit: Forcing the .pseudo-focus on the conflicting element seems to work:

import type {Meta} from '@storybook/react';

export default {
    parameters: {
        pseudo: {
            focus: ['[class*="skipLink"]'],
        },
    },
} satisfies Meta;