habsi/authentik
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web: Storybook css import fix (#5964)

Browse Source 
* web: fix storybook `build` css import issue

This is an incredibly frustrating issue, because Storybook works
in `dev` mode but not in `build` mode, and that's not at all what
you'd expecte from a mature piece of software.  Lit uses the native
CSS adoptedStylesheets field, which takes only a constructedStylesheet.
Lit provides a way of generating those, but the imports from
Patternfly (or any `.css` file) are text, and converting those to
stylesheets required a bit of magic.

What this means going forward is that any Storied components will
have to have their CSS wrapped in a way that ensures it is managed
correctly by Lit (well, to be pedantic, by the
shadowDOM.adoptedStylesheets).  That wrapper is provided and the
components that need it have been wrapped.

This problem deserves further investigation, but for the time
being this actually does solve it with a minimum amount of surgical
pain.

* web: fix storybook build issue

This commit further fixes the typing issues around strings, CSSResults,
and CSSStyleSheets by providing overloaded functions that assist
consumers in knowing that if they send an array to expect an array
in return, and if they send a scalar expect a scalar in return.

* replace any with unknown

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

---------

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
Co-authored-by: Jens Langhammer <jens@goauthentik.io>
This commit is contained in:
Ken Sternberg
2023-06-16 04:36:04 -07:00
committed by GitHub
parent 50fd93b7cd
commit f179d6572e
3 changed files with 33 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
web/src/elements/Base.ts
View File

@ -1,8 +1,9 @@
import { config, tenant } from "@goauthentik/common/api/config";
import { EVENT_LOCALE_CHANGE, EVENT_THEME_CHANGE } from "@goauthentik/common/constants";
import { UIConfig, uiConfig } from "@goauthentik/common/ui/config";
import { adaptCSS } from "@goauthentik/common/utils";
import { CSSResult, LitElement } from "lit";
import { LitElement } from "lit";
import { state } from "lit/decorators.js";
import AKGlobal from "@goauthentik/common/styles/authentik.css";
@ -68,8 +69,7 @@ export class AKElement extends LitElement {
if ("ShadyDOM" in window) {
styleRoot = document;
}
const globalStyleSheet = AKGlobal instanceof CSSResult ? AKGlobal.styleSheet : AKGlobal;
styleRoot.adoptedStyleSheets = [...styleRoot.adoptedStyleSheets, globalStyleSheet];
styleRoot.adoptedStyleSheets = adaptCSS([...styleRoot.adoptedStyleSheets, AKGlobal]);
this._initTheme(styleRoot);
this._initCustomCSS(styleRoot);
return root;