Add CSS cascade layers for Compound, shared components, and app/web styles (#33302)

* Layer Compound and shared component CSS

* Layer app theme CSS

* Remove !important flags from ActionBarView

* Remove unnecessary !important statements from shared components

* Avoid dead code errors for *.pcss just because layer is specified after @import url

* Remove unnecessary !important styling

* Override Banner defaults in RoomStatusBarView

* Updated snaps

* Updated snaps

* Fix styling of media body in app/web

* Fix styling for Compound anchors

* Fix styling issues in app/web

* More styling fixes

* Fix a problem extracting css for HTMLExport

* Revert changes

* Fix for theme styling

* Add test to improve coverage

* Prettier

* Fix styling issues

* Add data-kind attribute to avoid global styling override

* Update screenshot that now is correct

* Revert data-kind attribute

* Handle LinkPreview styling in .pcss

* Fix flaky test: Avoid racing the lazy-loaded ManageEventIndexDialog

* Take care of review comments

* Updated snaps

* Updated snaps again after merge

* Remove !important from RoomStatusBar

knip.ts

@@ -65,13 +65,8 @@ export default {
     ignoreExportsUsedInFile: true,
     compilers: {
         pcss: (text: string) =>
-            [...text.matchAll(/(?<=@)import[^;]+/g)]
-                .map(([line]) => {
-                    if (line.startsWith("import url(")) {
-                        return line.replace("url(", "").slice(0, -1);
-                    }
-                    return line;
-                })
+            [...text.matchAll(/@import\s+(?:url\()?["']([^"']+)["']\)?[^;]*;/g)]
+                .map(([, specifier]) => `import "${specifier}";`)
                 .join("\n"),
     },
     nx: {