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 CSS injection order #1330

Merged
merged 17 commits into from
Jul 31, 2023
Merged

Fix CSS injection order #1330

merged 17 commits into from
Jul 31, 2023

Conversation

bjosttveit
Copy link
Member

@bjosttveit bjosttveit commented Jul 13, 2023

Description

This is the only way I could find to fix the issues with CSS specificity, see the original issue for an explanation. This will override the document.head.appendChild method to inject style elements before any link elements. This means we no longer need to use !important or unecessarily great specificity to override styles from external libraries like material-ui and @digdir/design-system-react.

I also cleaned up the use of !important where I could.

Since our own css is now higher priority, this also means that the old tjenester3.css now more often gets applied over library styles, therefore a lot of cleanup in this file (-4000 lines) and affected components was necessary. This is a step in the right direction of getting rid of the old global css and the old font-icons. Whenever I broke an old component relying on tjenester3.css, I replaced them with design system components and nav icons instead of fixing them, so there are some visual updates as well.

Related Issue(s)

Verification/QA

  • Manual functionality testing
    • I have tested these changes manually
    • Creator of the original issue (or service owner) has been contacted for manual testing (or will be contacted when released in alpha)
    • No testing done/necessary
  • Automated tests
    • Unit test(s) have been added/updated
    • Cypress E2E test(s) have been added/updated
    • No automatic tests are needed here (no functional changes/additions)
    • I want someone to help me make some tests
  • UU/WCAG (follow these guidelines until we have our own)
    • I have tested with a screen reader/keyboard navigation/automated wcag validator
    • No testing done/necessary (no DOM/visual changes)
    • I want someone to help me perform accessibility testing
  • User documentation @ altinn-studio-docs
    • Has been added/updated
    • No functionality has been changed/added, so no documentation is needed
    • I will do that later/have created an issue
  • Changes/additions to component properties
    • Changes are reflected in both src/layout/layout.d.ts and layout.schema.v1.json, and these are all backwards-compatible
    • No changes made
  • Support in Altinn Studio
    • Issue(s) created for support in Studio
    • This change/feature does not require any changes to Altinn Studio
  • Sprint board
    • The original issue (or this PR itself) has been added to the Team Apps project and to the current sprint board
    • I don't have permissions to do that, please help me out
  • Labels
    • I have added a kind/* label to this PR for proper release notes grouping
    • I don't have permissions to add labels, please help me out

@bjosttveit bjosttveit added the kind/other Pull requests containing chores/repo structure/other changes label Jul 13, 2023
@bjosttveit bjosttveit marked this pull request as draft July 13, 2023 12:16
@bjosttveit
Copy link
Member Author

Set as draft until I fix the visual changes

@bjosttveit bjosttveit marked this pull request as ready for review July 19, 2023 12:49
@sonarcloud
Copy link

sonarcloud bot commented Jul 20, 2023

SonarCloud Quality Gate failed.    Quality Gate failed

Bug C 1 Bug
Vulnerability A 0 Vulnerabilities
Security Hotspot A 0 Security Hotspots
Code Smell A 0 Code Smells

60.5% 60.5% Coverage
0.0% 0.0% Duplication

idea Catch issues before they fail your Quality Gate with our IDE extension sonarlint SonarLint

Copy link
Contributor

@olemartinorg olemartinorg left a comment

Choose a reason for hiding this comment

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

Phenomenal work!! :godmode:

@bjosttveit bjosttveit merged commit 3f78e44 into main Jul 31, 2023
8 of 9 checks passed
@bjosttveit bjosttveit deleted the fix-css-order branch July 31, 2023 06:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
kind/other Pull requests containing chores/repo structure/other changes
Projects
None yet
Development

Successfully merging this pull request may close these issues.

CSS order prevents overriding design system
2 participants