Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(Webpack): Ensure to load CSS in correct order. #12484

Merged
merged 1 commit into from
Mar 12, 2024

Conversation

framitdavid
Copy link
Collaborator

@framitdavid framitdavid commented Mar 11, 2024

Description

Currently, we're not loading CSS in the correct order in Studio. This may have gone unnoticed because the React package from the design system has been handling it for us. However, there's an upcoming release that will change this, requiring us to take control of the CSS loading order ourselves. I've made the necessary changes in this pull request. It's fine to merge this PR before we update the design system.

Why this posed an issue:
Failing to prioritize the inclusion of CSS from the design system first puts us at risk of needing to resort to using !important to override CSS. The last-loaded CSS takes precedence. If our custom CSS is loaded beforehand, it gets overwritten by the subsequently loaded design system CSS.

Images that shows the difference:
The image below illustrates that the design system (first referenced in Index.tsx) is the initial CSS included within the style tag, as anticipated.
image

Before these changes, we had the wrong order:
image

Related Issue(s)

  • PR itself.

Verification

  • Your code builds clean without any errors or warnings
  • Manual testing done (required)

@framitdavid framitdavid added the skip-releasenotes Issues that do not make sense to list in our release notes label Mar 11, 2024
@github-actions github-actions bot added the solution/studio/designer Issues related to the Altinn Studio Designer solution. label Mar 11, 2024
Copy link

codecov bot commented Mar 11, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 88.10%. Comparing base (4f7ac24) to head (7a61c50).
Report is 1 commits behind head on main.

Additional details and impacted files
@@            Coverage Diff             @@
##             main   #12484      +/-   ##
==========================================
- Coverage   88.10%   88.10%   -0.01%     
==========================================
  Files        1271     1271              
  Lines       18321    18321              
  Branches     2263     2263              
==========================================
- Hits        16142    16141       -1     
- Misses       1909     1910       +1     
  Partials      270      270              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@framitdavid framitdavid marked this pull request as ready for review March 11, 2024 20:28
Copy link
Contributor

@mlqn mlqn left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice work! 🙂 🙌

@framitdavid framitdavid merged commit aa6097f into main Mar 12, 2024
9 of 10 checks passed
@framitdavid framitdavid deleted the chore/loadCSSCorrectly branch March 12, 2024 06:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
added-to-sprint skip-releasenotes Issues that do not make sense to list in our release notes solution/studio/designer Issues related to the Altinn Studio Designer solution.
Projects
Archived in project
Development

Successfully merging this pull request may close these issues.

2 participants