Snapshots: display pseudo-classes variants for web-components

[imagoiq]

Follow-up of #1051 and #2092, where web-components are not supported by the solution.

In web-component, the CSS is embedded in the JS file and is not transformed by vite and PostCSS.

Example with post-tabs.cjs.entry.js

const postTabsCss = ".tabs-wrapper{position:relative;...";

Some ideas:

Idea	Effort
Hook at runtime the web components stylesheet.	But complicated and not optimal.
Add classes directly into web components styles.	Easy, but it means that we ship unnecessary classes to client.
Build another outputTarget inside the packages for web components and using something like stencil-postcss conditionally to render the classes.	Not sure if it's feasable and we still ship some codes for nothing for most of the package user.
Hook the web-components files entry after we build storybook and change the css inside them with a (gulp or custom) script.	Need a script to parse the file and find the right variable. Could potentially break.

[imagoiq]

After discussion in the Dev Roundtable today, the effort overweights the benefits. We'll keep this ticket open if something evolves in the addons or on ideas.

[imagoiq]

First solution would be the simplest actually, as Stencil uses adoptedStyleSheets. That means, we only need to adapt one component stylesheet to make the changes available through all the same components. Hooking into adoptedStylesheets makes it reliable as it's a standard and not something

Here is an example function, how you can add copied rules where you replace the pseudo-class with a class:

export function addPseudoClassClassesToWebComponents(componentName: string, pseudoClass: string) {
  const adoptedStyleSheets = document.querySelector(componentName)?.shadowRoot?.adoptedStyleSheets;

  if (!adoptedStyleSheets) {
    console.warn('Web component not found, to apply simulated Pseudo Class');
    return;
  }

  const rulesToTransform = Array.from(adoptedStyleSheets[0].cssRules).filter(rule =>
    rule.cssText.includes(`:${pseudoClass}`),
  );

  const pattern = `:${pseudoClass}(?<!-)$`; // Basic replacement, maybe we need something a bit smarter or share similar function with postcss plugin.
  const regex = new RegExp(pattern);
  const className = serializeSimulatedPseudoClass(pseudoClass);
  const newRules = rulesToTransform.map(rule => rule.cssText.replace(regex, className));

  const length = adoptedStyleSheets[0].cssRules.length;

  newRules.forEach((newRule, index) => {
    adoptedStyleSheets[0].insertRule(newRule, length + index);
  });
}

Another function using componentOnReady (Stencil only – allow to hook into ShadowRoot when it's ready) on the web component would add the class name on the element, similarly to what we are doing with standard element in their stories.