fix css issues with vector (and vector-2022) skin

Author: oetterer

modules/ext.bootstrapComponents.vector-fix.css

@@ -30,3 +30,7 @@ body.skin-vector {
     font-size: inherit;
 	font-family: sans-serif !important;
 }
+
+body.skin-vector *, *::before, *::after {
+    box-sizing: initial;
+}

src/Hooks/OutputPageParserOutput.php

@@ -28,7 +28,6 @@
 
 use BootstrapComponents\ApplicationFactory;
 use BootstrapComponents\ParserOutputHelper;
-use Geocoder\Exception\LogicException;
 use MWException;
 use OutputPage;
 use ParserOutput;
@@ -95,6 +94,10 @@ public function process(): bool
 			$this->getOutputPage()->addHTML( $deferredText );
 		}
 
+		if ( $this->getParserOutputHelper()->vectorSkinInUse() ) {
+			$this->getOutputPage()->addModules( [ 'ext.bootstrapComponents.vector-fix' ] );
+		}
+
 		return true;
 	}
 

src/ParserOutputHelper.php

@@ -26,7 +26,6 @@
 
 namespace BootstrapComponents;
 
-use \ConfigException;
 use \Html;
 use \MediaWiki\MediaWikiServices;
 use \ParserOutput;
@@ -158,7 +157,7 @@ public function areImageModalsSuppressed() {
 	 *
 	 * @return string
 	 */
-	public function getContentForLaterInjection( \ParserOutput $parserOutput ) {
+	public function getContentForLaterInjection( \ParserOutput $parserOutput ): string {
 		$deferredContent = $parserOutput->getExtensionData( self::EXTENSION_DATA_DEFERRED_CONTENT_KEY );
 
 		if ( empty( $deferredContent ) || !is_array( $deferredContent ) ) {
@@ -210,14 +209,11 @@ public function loadBootstrapModules() {
 		if ( is_a( $parserOutput, ParserOutput::class ) ) {
 			// Q: when do we expect \Parser->getOutput() not to be a \ParserOutput? A: During tests.
 			$parserOutput->setExtensionData( 'bsc_load_modules', true );
-			if ( $this->vectorSkinInUse() ) {
-				$parserOutput->addModules( [ 'ext.bootstrapComponents.vector-fix' ] );
-			}
 		}
 	}
 
 	/**
-	 * Formats a text as error text so it can be added to the output.
+	 * Formats a text as error text, so it can be added to the output.
 	 *
 	 * @param string $errorMessageName
 	 *
@@ -241,7 +237,7 @@ public function renderErrorMessage( $errorMessageName ) {
 	 * @return bool
 	 */
 	public function vectorSkinInUse() {
-		return strtolower( $this->getNameOfActiveSkin() ) == 'vector';
+		return in_array( strtolower( $this->getNameOfActiveSkin() ), [ 'vector', 'vector-2022' ] ) ;
 	}
 
 	/**