web: fix storybook build after npm update#7855
Merged
Conversation
✅ Deploy Preview for authentik-storybook ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for authentik ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #7855 +/- ##
===========================================
+ Coverage 25.91% 92.43% +66.52%
===========================================
Files 588 588
Lines 29200 29200
===========================================
+ Hits 7566 26991 +19425
+ Misses 21634 2209 -19425
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. |
c7f6e43 to
de1abfd
Compare
This commit follows the [patch for Turnstile](#7854) and performs a similar operation for the Storybook build, which failed after the latest `npm audit` and `npm update` passes. [This patch to Vite](vitejs/vite#10762) fixes a problem with the Vite build in that Vite could not resolve if a CSS import was strictly at the module level or if it was necessary to include the imported CSS at the document level. The fix is to hack a query, `?inline`, to the end of the import string, to indicate that it's a module-only import. The Storybook for Web Components build recommended by the Open Webcomponent Consortium is a Storybook-Vite implementation. The latest update fully deprecated undecorated CSS imports, and Storybook broke, unable to reconcile the CSS imports. This patch inlines the inlining of the CSS automatically for Storybook by using the Rollup `modify()` plug-in which performs string substitutions on the source code before it's presented to the compiler and bundler; it recognizes the strings that require inlining, those that match the regex: ``` JavaScript /^(import \w+ from .*\.css)";/ ``` ... and replaces them with a version ending in `.css?inline`. Because the actual recognizer inside `modify()` recognizes strings and not regular expressions, a script to build the strings has been added to the `scripts` folder. Just like locales, you will have to re-run and re-build `build-storybook-import-maps` script if you add a new CSS file to the source tree.
…etting; that's purely an HCaptcha thing.
6812071 to
c1808bf
Compare
✅ Deploy Preview for authentik ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Details
This commit follows the patch for Turnstile and performs a similar operation for the Storybook build, which failed after the latest
npm auditandnpm updatepasses.This patch to Vite fixed a problem with the Vite build in that Vite could not resolve if a CSS import was strictly at the module level or if it was necessary to include the imported CSS at the document level. The fix is to hack a query,
?inline, to the end of the import string, to indicate that it’s a module-only import.The Storybook for Web Components build recommended by the Open Webcomponent Consortium is a Storybook-Vite implementation. The latest update fully deprecated undecorated CSS imports, and Storybook broke, unable to reconcile the CSS imports.
This patch inlines the inlining of the CSS automatically for Storybook by using the Rollup
modify()plug-in which performs string substitutions on the source code before it’s presented to the compiler and bundler; it recognizes the strings that require inlining, those that match the regex:/^(import \w+ from .*\.css)";/… and replaces them with a version ending in
.css?inline. Because the actual recognizer insidemodify()recognizes strings and not regular expressions, a script to build the strings has been added to thescriptsfolder.Just like locales, you will have to re-run and re-build
build-storybook-import-mapsscript if you add a new CSS file to the source tree.Checklist
ak test authentik/)make lint-fix)If an API change has been made
make gen-build)If changes to the frontend have been made
make web)make i18n-extract)If applicable
make website)