Skip to content

Snapshots: display pseudo-classes variants for web-components #2102

Closed
@imagoiq

Description

@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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    📦 documentationRelated to the @swisspost/design-system-documentation package

    Type

    No type

    Projects

    Status

    🚀 Done

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions