feat: Add prefers-color-scheme rule

extension.json

@@ -18,7 +18,10 @@
 		}
 	},
 	"config": {
-
+		"TemplateStylesExtenderEnablePrefersColorScheme": {
+			"description": "Enable the prefers-color-scheme media query. WARNING this can break things if TemplateStyles was updated upstream",
+			"value": true
+		}
 	},
 	"MessagesDirs": {
 		"TemplateStylesExtender": [

includes/Hooks/PropertySanitizerHook.php

@@ -25,7 +25,11 @@ use TemplateStylesMatcherFactory;
 use Wikimedia\CSS\Sanitizer\StylePropertySanitizer;
 
 class PropertySanitizerHook {
-	public static function onSanitize( StylePropertySanitizer $propertySanitizer, TemplateStylesMatcherFactory $matcherFactory ): void {
+	/**
+	 * @param StylePropertySanitizer $propertySanitizer
+	 * @param TemplateStylesMatcherFactory $matcherFactory
+	 */
+	public static function onSanitize( $propertySanitizer, $matcherFactory ): void {
 		// Currently unused
 	}
 }

includes/Hooks/StylesheetSanitizerHook.php

@@ -21,9 +21,11 @@ declare( strict_types=1 );
 
 namespace MediaWiki\Extension\TemplateStylesExtender\Hooks;
 
+use MediaWiki\Extension\TemplateStylesExtender\MatcherFactoryExtender;
 use MediaWiki\Extension\TemplateStylesExtender\StylePropertySanitizerExtender;
 use MediaWiki\Extension\TemplateStylesExtender\TemplateStylesExtender;
 use TemplateStylesMatcherFactory;
+use Wikimedia\CSS\Sanitizer\MediaAtRuleSanitizer;
 use Wikimedia\CSS\Sanitizer\StylePropertySanitizer;
 use Wikimedia\CSS\Sanitizer\StylesheetSanitizer;
 
@@ -36,7 +38,20 @@ class StylesheetSanitizerHook {
 	 * @param StylePropertySanitizer $propertySanitizer
 	 * @param TemplateStylesMatcherFactory $matcherFactory
 	 */
-	public static function onSanitize( StylesheetSanitizer $sanitizer, StylePropertySanitizer $propertySanitizer, TemplateStylesMatcherFactory $matcherFactory ): void {
+	public static function onSanitize( $sanitizer, $propertySanitizer, $matcherFactory ): void {
+		if ( TemplateStylesExtender::getConfigValue(
+			'TemplateStylesExtenderEnablePrefersColorScheme',
+			false ) === true ) {
+			$factory = new MatcherFactoryExtender();
+
+			$newRules = $sanitizer->getRuleSanitizers();
+			$newRules['@media'] = new MediaAtRuleSanitizer( $factory->cssMediaQueryList() );
+			$newRules['@media']->setRuleSanitizers( $newRules );
+
+			$sanitizer->setRuleSanitizers( $newRules );
+
+		}
+
 		$extended = new TemplateStylesExtender();
 
 		$extender = new StylePropertySanitizerExtender( $matcherFactory );

includes/MatcherFactoryExtender.php

@@ -0,0 +1,164 @@
+<?php
+/**
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 2 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License along
+ * with this program; if not, write to the Free Software Foundation, Inc.,
+ * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
+ *
+ * @file
+ */
+
+declare( strict_types=1 );
+
+namespace MediaWiki\Extension\TemplateStylesExtender;
+
+use Wikimedia\CSS\Grammar\Alternative;
+use Wikimedia\CSS\Grammar\AnythingMatcher;
+use Wikimedia\CSS\Grammar\BlockMatcher;
+use Wikimedia\CSS\Grammar\DelimMatcher;
+use Wikimedia\CSS\Grammar\FunctionMatcher;
+use Wikimedia\CSS\Grammar\Juxtaposition;
+use Wikimedia\CSS\Grammar\KeywordMatcher;
+use Wikimedia\CSS\Grammar\MatcherFactory;
+use Wikimedia\CSS\Grammar\NothingMatcher;
+use Wikimedia\CSS\Grammar\NoWhitespace;
+use Wikimedia\CSS\Grammar\Quantifier;
+use Wikimedia\CSS\Grammar\TokenMatcher;
+use Wikimedia\CSS\Objects\Token;
+
+// phpcs:disable
+class MatcherFactoryExtender extends MatcherFactory {
+	private static $extendedCssMediaQuery = false;
+
+	/**
+	 * This is in reality a complete copy of the parent hook with line 49 and 91 extended
+	 * This can very easily break if there is an update upstream
+	 *
+	 * @inheritDoc
+	 * T241946
+	 */
+	public function cssMediaQuery( $strict = true ) {
+		$key = __METHOD__ . ':' . ( $strict ? 'strict' : 'unstrict' );
+		if ( self::$extendedCssMediaQuery === false || !isset( $this->cache[$key] ) ) {
+			if ( $strict ) {
+				$generalEnclosed = new NothingMatcher();
+
+				$mediaType = new KeywordMatcher( [
+					'all', 'print', 'screen', 'speech',
+					// deprecated
+					'tty', 'tv', 'projection', 'handheld', 'braille', 'embossed', 'aural'
+				] );
+
+				$rangeFeatures = [
+					'width', 'height', 'aspect-ratio', 'resolution', 'color', 'color-index', 'monochrome',
+					// deprecated
+					'device-width', 'device-height', 'device-aspect-ratio'
+				];
+				$discreteFeatures = [
+					'orientation', 'scan', 'grid', 'update', 'overflow-block', 'overflow-inline', 'color-gamut',
+					'pointer', 'hover', 'any-pointer', 'any-hover', 'scripting', 'prefers-color-scheme'
+				];
+				$mfName = new KeywordMatcher( array_merge(
+					$rangeFeatures,
+					array_map( function ( $f ) {
+						return "min-$f";
+					}, $rangeFeatures ),
+					array_map( function ( $f ) {
+						return "max-$f";
+					}, $rangeFeatures ),
+					$discreteFeatures
+				) );
+			} else {
+				$anythingPlus = new AnythingMatcher( [ 'quantifier' => '+' ] );
+				$generalEnclosed = new Alternative( [
+					new FunctionMatcher( null, $anythingPlus ),
+					new BlockMatcher( Token::T_LEFT_PAREN,
+						new Juxtaposition( [ $this->ident(), $anythingPlus ] )
+					),
+				] );
+				$mediaType = $this->ident();
+				$mfName = $this->ident();
+			}
+
+			$posInt = $this->calc(
+				new TokenMatcher( Token::T_NUMBER, function ( Token $t ) {
+					return $t->typeFlag() === 'integer' && preg_match( '/^\+?\d+$/', $t->representation() );
+				} ),
+				'integer'
+			);
+			$eq = new DelimMatcher( '=' );
+			$oeq = Quantifier::optional( new Juxtaposition( [ new NoWhitespace, $eq ] ) );
+			$ltgteq = Quantifier::optional( new Alternative( [
+				$eq,
+				new Juxtaposition( [ new DelimMatcher( [ '<', '>' ] ), $oeq ] ),
+			] ) );
+			$lteq = new Juxtaposition( [ new DelimMatcher( '<' ), $oeq ] );
+			$gteq = new Juxtaposition( [ new DelimMatcher( '>' ), $oeq ] );
+			$mfValue = new Alternative( [
+				$this->number(),
+				$this->dimension(),
+				$this->ident(),
+				new KeywordMatcher( [ 'light', 'dark' ] ),
+				new Juxtaposition( [ $posInt, new DelimMatcher( '/' ), $posInt ] ),
+			] );
+
+			$mediaInParens = new NothingMatcher(); // temporary
+			$mediaNot = new Juxtaposition( [ new KeywordMatcher( 'not' ), &$mediaInParens ] );
+			$mediaAnd = new Juxtaposition( [ new KeywordMatcher( 'and' ), &$mediaInParens ] );
+			$mediaOr = new Juxtaposition( [ new KeywordMatcher( 'or' ), &$mediaInParens ] );
+			$mediaCondition = new Alternative( [
+				$mediaNot,
+				new Juxtaposition( [
+					&$mediaInParens,
+					new Alternative( [
+						Quantifier::star( $mediaAnd ),
+						Quantifier::star( $mediaOr ),
+					] )
+				] ),
+			] );
+			$mediaConditionWithoutOr = new Alternative( [
+				$mediaNot,
+				new Juxtaposition( [ &$mediaInParens, Quantifier::star( $mediaAnd ) ] ),
+			] );
+			$mediaFeature = new BlockMatcher( Token::T_LEFT_PAREN, new Alternative( [
+				new Juxtaposition( [ $mfName, new TokenMatcher( Token::T_COLON ), $mfValue ] ), // <mf-plain>
+				$mfName, // <mf-boolean>
+				new Juxtaposition( [ $mfName, $ltgteq, $mfValue ] ), // <mf-range>, 1st alternative
+				new Juxtaposition( [ $mfValue, $ltgteq, $mfName ] ), // <mf-range>, 2nd alternative
+				new Juxtaposition( [ $mfValue, $lteq, $mfName, $lteq, $mfValue ] ), // <mf-range>, 3rd alt
+				new Juxtaposition( [ $mfValue, $gteq, $mfName, $gteq, $mfValue ] ), // <mf-range>, 4th alt
+			] ) );
+			$mediaInParens = new Alternative( [
+				new BlockMatcher( Token::T_LEFT_PAREN, $mediaCondition ),
+				$mediaFeature,
+				$generalEnclosed,
+			] );
+
+			$this->cache[$key] = new Alternative( [
+				$mediaCondition,
+				new Juxtaposition( [
+					Quantifier::optional( new KeywordMatcher( [ 'not', 'only' ] ) ),
+					$mediaType,
+					Quantifier::optional( new Juxtaposition( [
+						new KeywordMatcher( 'and' ),
+						$mediaConditionWithoutOr,
+					] ) )
+				] )
+			] );
+		}
+
+		self::$extendedCssMediaQuery = true;
+
+		return $this->cache[$key];
+	}
+
+}

includes/TemplateStylesExtender.php

@@ -21,9 +21,12 @@ declare( strict_types=1 );
 
 namespace MediaWiki\Extension\TemplateStylesExtender;
 
+use ConfigException;
 use InvalidArgumentException;
 use MediaWiki\Extension\TemplateStylesExtender\Matcher\VarNameMatcher;
+use MediaWiki\MediaWikiServices;
 use Wikimedia\CSS\Grammar\Alternative;
+use Wikimedia\CSS\Grammar\AnythingMatcher;
 use Wikimedia\CSS\Grammar\FunctionMatcher;
 use Wikimedia\CSS\Grammar\Juxtaposition;
 use Wikimedia\CSS\Grammar\KeywordMatcher;
@@ -41,17 +44,30 @@ class TemplateStylesExtender {
 	 */
 	public function addVarSelector( StylePropertySanitizer $propertySanitizer ): void {
 		$propertySanitizer->setCssWideKeywordsMatcher(
-			new FunctionMatcher(
+			new Juxtaposition( [
-				'var',
+				Quantifier::optional(
-				new Juxtaposition( [
+					new AnythingMatcher()
-					new WhitespaceMatcher( [ 'significant' => false ] ),
+				),
-					new VarNameMatcher(),
+				new WhitespaceMatcher( [ 'significant' => false ] ),
-					new WhitespaceMatcher( [ 'significant' => false ] ),
+				Quantifier::plus(
-                    Quantifier::optional(
+					new FunctionMatcher(
-                        new KeywordMatcher(['!important'])
+						'var',
-                    )
+						new Juxtaposition( [
-				] )
+							new WhitespaceMatcher( [ 'significant' => false ] ),
-			)
+							new VarNameMatcher(),
+							new WhitespaceMatcher( [ 'significant' => false ] ),
+						] )
+					),
+				),
+				new WhitespaceMatcher( [ 'significant' => false ] ),
+				Quantifier::optional(
+					new AnythingMatcher()
+				),
+				Quantifier::optional(
+					new KeywordMatcher( [ '!important' ] )
+				)
+			] ),
+
 		);
 	}
 
@@ -121,7 +137,7 @@ class TemplateStylesExtender {
 	 * @param StylePropertySanitizer $propertySanitizer
 	 * @param MatcherFactory $factory
 	 */
-	public function addScrollMarginProperties( StylePropertySanitizer $propertySanitizer, MatcherFactory $factory ): void {
+	public function addScrollMarginProperties( $propertySanitizer, $factory ): void {
 		$suffixes = [
 			'margin-block-end',
 			'margin-block-start',
@@ -159,4 +175,29 @@ class TemplateStylesExtender {
 			}
 		}
 	}
+
+	/**
+	 * Loads a config value for a given key from the main config
+	 * Returns null on if an ConfigException was thrown
+	 *
+	 * @param string $key The config key
+	 * @param null $default
+	 * @return mixed|null
+	 */
+	public static function getConfigValue( string $key, $default = null ) {
+		try {
+			$value = MediaWikiServices::getInstance()->getMainConfig()->get( $key );
+		} catch ( ConfigException $e ) {
+			wfLogWarning(
+				sprintf(
+					'Could not get config for "$wg%s". %s', $key,
+					$e->getMessage()
+				)
+			);
+
+			return $default;
+		}
+
+		return $value;
+	}
 }