Fix component guide for applications without individual css loading #5087
+18
−35
Conversation
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
|
@AshGDS this is still a work in progress, but wanted to give you a heads up as it somewhat nullifies the work you did recently on loading other component's CSS on the preview pages - with this change we'll be loading all of the CSS on every page. |
|
Thanks @andysellick - is it possible to preserve the individual CSS functionality under a configuration flag? |
- include detail of how to get the component guide stylesheet included in an application not using individual css loading
andysellick
force-pushed
the
fix-component-guide
branch
from
31f5f53 to
825621e
Compare
- these two tests specifically check individual css loading within the component guide, which has now been disabled - other tests in this file use custom pages outside of the guide, where individual css loading still works
- this was very weird, have documented this change in #5099 as we may need to revert it and fix it properly
MartinJJones
approved these changes
Oct 29, 2025
There was a problem hiding this comment.
Nice work Andy, the changes look good to me.
Thanks for also creating the related issue for the option select component test, I'll have a further look at this as well, it does look like the test itself could be a bit flawed as you mention in the issue description.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
What
Fix the rendering of the component guide in applications that don't use the individual component css loading, by switching the component guide to import all of the CSS for all of the components by default and turn off the rendering for individual component css in the guide.
component_guide_stylesheetis a new method to pass into the applicationdartsassconfig to provide the component guide stylesheet. This is used in the existingall_stylesheetsmethod and this means that this change will not break component guides for applications regardless of whether they use individual css loading or not.Having said that, if an application is still using individual css loading and has its own components, those components will not render properly in the component guide (because their CSS won't load). The fix for this is either to add the application component stylesheets in somehow or switch to not using individual css loading (which we are currently moving towards for all applications).
Thanks to @MartinJJones for pairing on this.
Why
We've disabled the individual component css loading in a couple of applications, which has broken the component guide for those applications.
Relates to #5074
Visual Changes
None.
https://gov-uk.atlassian.net/jira/software/c/projects/PNP/boards/1356?selectedIssue=PNP-9612