Describe the bug
Component's ChangeDetection is set to OnPush, then Attributes are not applied until next tick is trigged via user interaction (click on button)

Expected behavior
Attributes should be applied on page laod.

This looks like a super useful addon. I'd love to use it.

Is your feature request related to a problem? Please describe.

I've tried to configure this but it seems not possible for those who are using Create React App (CRA) and have not ejected.

Describe the solution you'd like

Is it possible to document how to configure with CRA?

Would it be possible to implement this pseudo-states as a decorator that i can use anywhere?

export const pseudoStateDecorator = (story: any, context: any) => {
  const pseudo = {
    ...context?.globals?.pseudo,
    ...context?.parameters?.pseudo,
  }

  const enabledPseudos = Object.keys(pseudo)
    .map((k) => ({ key: k, value: pseudo[k] }))
    .filter((i) => i.value === true)
    .map((i) => i.key)

  const classNames = enabledPseudos
    .map((k) => k.replace(/([a-z0-9]{1})([A-Z]{1})/gm, (_, c1, c2) => `${c1}-${c2.toLowerCase()}`))
    .map((c) => `pseudo-${c}`)

  return (
    <div style={{ display: 'inline' }} className={classNames.join(' ')}>
      {story(context)}
    </div>
  )
}

Describe the bug
Cannot create a story leveraging pseudo-states that uses template strings to define the story. Instead, we get an error undefined is not an object (evaluating 'compInternal.selector')

To Reproduce
Add the following to the simple-button.stories.ts story in the angular-ci-storybook-pseudo-states-example –

export default {
  title: "Simple Button",
  decorators: [
    withPseudo(),
    moduleMetadata({
        imports: [ButtonsModule] // Import the ButtonsModule so we can use the selector directly
    }),
    withKnobs
  ],
};

export const simpleButton3 = () => {
  return {
    template: `<app-simple-button [label]="'Button Text'"></app-simple-button>`,
  };
};

If I remove the withPseudo() decorator, the story renders correctly.

Expected behavior
Pseudo states enumerated for the component.

Screenshots

Desktop (please complete the following information):

• OS: macOS
• Browser: Chrome & Safari
• Version: latest

Very cool addon – Thanks!

Describe the bug

In the Angular docs, it mentions the ability to set postCssLoaderOptions.blacklist:

https://github.com/Ergosign/storybook-addon-pseudo-states/blob/master/src/angular/README.md#styling

However, if I add blacklist: [':enabled'], or blacklist: [':not'], these items don't seem to be blacklisted

If I fork the repo and manually add one of those to the default blacklist list it works:

https://github.com/benjamincharity/storybook-addon-pseudo-states/blob/manually-extend-blacklist/src/angular/preset-postcss.ts#L54

To Reproduce
Steps to reproduce the behavior:

1. Set up an Angular reproduction with a config like:

module.exports = {
  presets: [
    {
      name:'@ergosign/storybook-addon-pseudo-states-angular/preset-postcss',
      options: {
        postCssLoaderOptions: {
          blacklist: [':enabled'],
        },
      },
    },
  ],
  addons: [
    '@ergosign/storybook-addon-pseudo-states-angular/register',
  ],
}

2. Write CSS that uses enabled (in our case it's SCSS):

.foo {
  &:enabled {
    &:hover {
      color: red;
    }
  }
}

3. Check generated styles to see that the output still contains an 'enabled' class:

/* Output */
.foo:enabled:hover,
.foo.pseudo-states--enabled.pseudo-states--hover {
  color: red;
}

In this example, the CSS has the pseudo-states--enabled class but it is not added to the DOM.

Expected behavior

The desired output would not included classes for blacklisted items:

/* Output */
.foo:enabled:hover,
.foo:enabled.pseudo-states--hover {
  color: red;
}

Desktop:

• OS: OSX 10.15.6
• Browser: Brave/Chrome
• Version: Latest

Describe the bug
After changing a property via knobs-addon that is affecting/altering class/classList of "selected element" (element where pseudo class is applied to), the (generated) pseudo classes are not re-applied.

For instance, host modifier class is set by attribute.

This is working:

<button
  class="btn "
  [class.rounded]="rounded"
     >{{label}}</button>

This is not working:

<button
  class="btn {{rounded}}"
     >{{label}}</button>

Expected behavior
Pseudo States should be applied and displayed

Additional context

• Angular Version
• Angular 9
• Element with "host modifier" class

Describe the bug
pseudos: ['focus & hover'] does not work in angular version

Does it support styled-components?
I see the :hover class is added to the element, but the state doesn't change

Not a feature but an FYI:

We just release a babel-plugin to support emotion.js: https://www.npmjs.com/package/babel-plugin-storybook-addon-pseudo-states-emotion

Live Demo: https://dekk-ui.dekk.app/?path=/story/design-system-atoms-button--pseudo-states

Is it ok to add this to the docs for React?

Hi,

Thank you for this addon. This is exactly what I need to display all button states from our application. I am having trouble getting pseudo-classes applied to my DOM button element. We are using the react-bootstrap library button with classes (btn-primary, btn-secondary, etc.). Our CSS is not where our storybook stories are. It is being linked to stories from our in-house CSS library.

This is how the DOM looks. The demo CRA app is working fine locally. I am not sure what is missing. What code takes care of adding the pseudo-classes to DOM elements? I am not concerned at this point about applying class styles; just getting the pseudo-classes would help. Thank you!

Describe the bug
When wrapping :hover style in the media query @media (hover: hover) in the component stylesheet, the plugin doesn't apply it.

To Reproduce
Steps to reproduce the behavior:

1. Create a component with something like the following style in it:

.some-component {
  color: blue;

  @media (hover: hover) {
    &:hover {
      color: red;
    }
  }
}

3. Run Storybook
4. Try setting the hover-state using the psudo state plugin
5. See error

Expected behavior
A clear and concise description of what you expected to happen.
I would expect the defined hover style to be applied.

Screenshots
—

Desktop (please complete the following information):

• OS: macOS
• Browser: Chrome
• Version: 119

Additional context
The plugin works as expected when I remove the media query, but introduces hover bugs for users of touch devices instead.

Describe the bug
When switching dark/light mode via https://storybook.js.org/addons/storybook-dark-mode the pseudo-classes do not persist.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://dekk-ui.dekk.app/?path=/story/design-system-atoms-button--pseudo-states

2. Click on Toggle mode
   

3. See error (styles/classes are not applied)

Expected behavior
The classes should still exist, The pseudo styles should work

Screenshots

Desktop (please complete the following information):

• OS: macOS (Version 11.5.2)
• Browser Chrome (Version 92.0.4515.159)
• Addon Version v0.0.1-alpha.47

Describe the bug
When ever we have deep nested styles then Addon is throwing below error.

To Reproduce
Steps to reproduce the behavior:

1. add .checkbox:hover:not(:active) and see error where checkbox class is on input type="checkbox"
2. even tried to change .checkbox:hover:not(:active) and i do not have luck
   Note: after pseudo-state new rule :not() is invalid

I do not have any changes except adding addons: [
'storybook-addon-pseudo-states',
] to main.js
Expected behavior
A clear and concise description of what you expected to happen.

Desktop (please complete the following information):

• OS: Windows 10
• Browser chrome
• Version 88.0.4324.150

Describe the bug
There seems to be an error causing the React demo site to crash.

To Reproduce
Steps to reproduce the behavior:

1. Go to README of React
2. Click on Live-Demo
3. See the error message

Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=object%20with%20keys%20%7Bname%2C%20value%7D&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
Error: Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=object%20with%20keys%20%7Bname%2C%20value%7D&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at Qg (https://philippone.github.io/create-react-app-storybook-addon-pseuo-states/vendors~main.7485033b14b621a5e3d6.bundle.js:2:1020337)
    at p (https://philippone.github.io/create-react-app-storybook-addon-pseuo-states/vendors~main.7485033b14b621a5e3d6.bundle.js:2:1021975)
    at ca (https://philippone.github.io/create-react-app-storybook-addon-pseuo-states/vendors~main.7485033b14b621a5e3d6.bundle.js:2:1023085)
    at https://philippone.github.io/create-react-app-storybook-addon-pseuo-states/vendors~main.7485033b14b621a5e3d6.bundle.js:2:1025168
    at R (https://philippone.github.io/create-react-app-storybook-addon-pseuo-states/vendors~main.7485033b14b621a5e3d6.bundle.js:2:1034566)
    at Rj (https://philippone.github.io/create-react-app-storybook-addon-pseuo-states/vendors~main.7485033b14b621a5e3d6.bundle.js:2:1074719)
    at Qj (https://philippone.github.io/create-react-app-storybook-addon-pseuo-states/vendors~main.7485033b14b621a5e3d6.bundle.js:2:1065354)
    at Kj (https://philippone.github.io/create-react-app-storybook-addon-pseuo-states/vendors~main.7485033b14b621a5e3d6.bundle.js:2:1065283)
    at yj (https://philippone.github.io/create-react-app-storybook-addon-pseuo-states/vendors~main.7485033b14b621a5e3d6.bundle.js:2:1062347)
    at Ig (https://philippone.github.io/create-react-app-storybook-addon-pseuo-states/vendors~main.7485033b14b621a5e3d6.bundle.js:2:1059139)

Expected behavior
The demo site should run without any error.

Screenshots

Desktop:

• OS: macOS Catalina 10.15.6
• Browser:
  • Chrome 85.0.4183.102
  • Safari 14.0

Describe the bug
Property change via knobs addon does not work after story changed.
On first load, it is working.

Only tested with Angular. Could be the same with other frameworks.

When adding preset-postcss, I can no longer use exported constants from Sass files.

Reproduction: https://github.com/torkelrogstad/storybook-scss

1. in src/styling.scss i export a constant foo.
2. in src/stories/Button.stories.tsx I try to access this constant in a story at the bottom of the file.
3. Run yarn storybook, and observe that nothing is rendered. I would have expected an object with foo set to #efabcd

Is your feature request related to a problem? Please describe.
Instead of column layout (block):

Describe the solution you'd like
Display states in row (or inline)

Progress:

• Angular (#20 )
• React
• Vue
• HTML
• Lit

Describe the bug
withPseudoState.js:194 DOMException: Failed to execute 'insertRule' on 'CSSStyleSheet': Failed to parse the rule '.iJhULf :focus:not(:focus-visible), .pseudo-focus.pseudo-focus-visible .iJhULf :not() { box-shadow: none; }'.

To Reproduce
Have a CSS with the following content:

&:focus {
  box-shadow: 0 0 4px red;

  &:not(:focus-visible) {
    box-shadow: none;
  }
}

Expected behavior
It should work

Describe the bug

the textarea I set is in the error state, while hover it, it should show the red invalid style

but the pseudo class make the previous class has higher priority

Is there any method to fix the conditional style problem?

Expected behavior

show red box shadow and border

Desktop (please complete the following information):

• OS: [e.g. iOS] MacOS
• Browser [e.g. chrome, safari] Chrome
• Version [e.g. 22]: latest

Describe the bug

Yarn PnP requires projects to declare all their dependencies. When trying to use this addon in a project that uses yarn pnp, it gives an error:

Error: @ergosign/storybook-addon-pseudo-states-react tried to access @storybook/node-logger, but it isn't declared in its dependencies; this makes the require call ambiguous and unsound.

We have only just begun to use Storybook, so I'm honestly not even sure the feasibility of what I'm about to ask.. 🙃

Is your feature request related to a problem? Please describe.

We would like to offer a storybook view that shows a grid of our buttons with various themes and states. Something like this:

Describe the solution you'd like

I would like to pass an array of selectors rather than just one.

export const simpleButton = () => ({
  component: TsButtonComponent,
  template: `
    <ts-button id="btn1">My Button</ts-button>
    <ts-button id="btn2" theme="secondary">My Button</ts-button>
    <ts-button id="btn3" theme="warning">My Button</ts-button>
  `,
  parameters: {
    withPseudo: {
      selector: ['#btn1', '#btn2', '#btn3'],
    },
  },
}

Describe alternatives you've considered

We've seen suggestions from Chromatic that include generating classes for pseudo states (https://www.chromatic.com/docs/hoverfocus#css-class-name) but a) this requires us to ship storybook specific CSS to consumers, and b) it only works if the top level wrapper is the one that needs pseudo states.

For us, the top level DOM element rarely is the one getting user interaction. So it is not as simple as:

ts-button {
  button {
    &.storybook-hover,
    &:hover {
      color: red;
    }
  }
}

<ts-button id="one" class="storybook-hover">My Button</ts-button>

We would need to either
a) add @Inputs to all the components that adds these custom classes to the wrapper element,
or
b) duplicate the pseudo styles separately for the top level:

ts-button {
  &.storybook-hover {
    button {
      color: red;
    }
  }

  button {
    &:hover {
      color: red;
    }
  }
}

Again, really digging this addon. I'm honestly surprised this addon hasn't been rolled back into core. It seems like such a useful feature for everyone!

Describe the solution you'd like
Instead of showing an attribute the same way as the pseudo states, apply all pseudo states to the attribute, too.

For instance, instead of selected state is displayed below all other states, it is used as a second 'normal' state and all pseudo states are applied to the selected state in a second column next to the normal.

Describe alternatives you've considered

• Workaround is to create another story and enable property/attribute manually via props instead of parameters.withPseudo.attributes
• Another solution is to use knobs-addon and enable property/attribute via knob

Progress:

• Angular
• React
• Vue
• HTML
• Lit

Describe the bug
The pseudo-classes are not generated correctly when the original classname contains a :.

To Reproduce
TailwindCSS uses classnames on elements to control the styling when hover or focus, or whatever happens. The way they do this is by prefixing their regular classes with hover: or focus: or other switches.
When picking up these classes, the generated ones have an additional \. before the :. As in, if you have:

<div className="hover:text-gray-400:hover">test</div>

the class

.hover\.\:text-gray-400.\:hover

gets generated.

Expected behavior
The correct class name gets generated. In this case:

.hover\:text-gray-400.\:hover

Describe the bug
I cannot get this addon to work without using CSS modules.

To Reproduce
Steps to reproduce the behavior:

1. Clone my fork of this repo: https://github.com/torkelrogstad/create-react-app-storybook-addon-pseuo-states
2. install deps: yarn
3. start storybook: yarn storybook
4. Observe that pseudoelements aren't applied

Expected behavior
I'd expect pseudoelements to apply

Any help on getting this to work without CSS modules would be much appreciated.

Hey there!

We're currently checking out Storybook as an alternative for our previous solution, and my dear friend our designer asked me to check out if it was easily possible to display the different states of our components:
So thats how we got here :D

I now added the configs according to the docs, but postCSS seems to have some trouble processing the styles.

As I'm not familiar with postCSS or building with webpack that much I thought I might ask if you could help me :)

Using

Storybook 6.1.2
Vue 2.6.11
storybook-addon-pseudo-states 0.0.1-alpha.40
Contents of the ./storybook/main.js and postcss.config.js can be found here: https://pastebin.com/wTt40fVC

I apologize in advance if I just made a noob mistake, but any help on this would be highly appreciated!

Error Message

ERROR in ./src/stories/button.css (./node_modules/@storybook/core/node_modules/css-loader/dist/cjs.js??ref--10-1!./node_modules/@storybook/core/node_modules/postcss-loader/src??postcss!./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js??ref--14-1!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ref--14-3!./src/stories/button.css)
Module build failed (from ./node_modules/@storybook/core/node_modules/postcss-loader/src/index.js):
SyntaxError

(1:1) Unknown word

> 1 | import api from "!../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js";
    | ^
  2 |             import content from "!!../../node_modules/css-loader/dist/cjs.js??ref--14-1!../../node_modules/postcss-loader/dist/cjs.js!../../node_modules/sass-loader/dist/cjs.js??ref--14-3!./button.css";
  3 | 

Also I noticed that the documentation for Vue tells you to add the angular addon, which is probably not correct :D
(https://github.com/Ergosign/storybook-addon-pseudo-states/blob/master/src/vue/README.md)