@component-driven/with-selector

Allows previewing a wrapped component in a specific pseudo-state like hover, focused, active.

Please note, that it required the pseudo-styles to be present on your component. Doesn't work with default HTML elements without pseudo-styles overrides.

``jsx
import styled from 'styled-components'

const Button = styled('button')
padding: 10px;
margin-right: 5px;
border: 2px solid blue;
border-radius: 4px;
background: #efefef;

&:hover:enabled {
background: #ccc;
border-color: red;
}

&:focus {
outline: none;
border-color: orange;
}

&:active {
border-color: #333;
background: #888;
color: #fff;

&:not([aria-disabled='true']) {
background: cadetblue;
border-color: darkblue;
color: #f5f5f5;
}
}

&.custom-class {
background: green;
}

;<>
normal

hover


focus


active

:active:not([aria-disabled="true"])}>
active:not([aria-disabled="true"])


class-name


`

Support for nested selectors

`jsx
import styled from 'styled-components'

const InputWrapper = styled('div')({
padding: 4,
border: '1px solid #ccc',
borderRadius: 3,
background: '#efefef',
'& > input': {
border: '1px solid green'
},
'> button': {
position: 'relative',
appearance: 'none',
'::after': {
position: 'absolute',
right: 0,
top: 0,
background: 'pink',
content: "''"
}
},
':focus-within': {
background: '#ccc',
input: {
outline: 'none',
borderColor: 'red'
},
button: {
marginLeft: 10,
borderColor: 'yellow',
'::after': {
content: "'focus'"
}
}
}
})

const Input = React.forwardRef((props, ref) => (


this is a nested button

))

;<>





``