feat: Add prefers-color-scheme rule

This commit is contained in:
Hannes 2021-03-19 22:48:47 +01:00
parent 91610a8c7b
commit 1e7439f246
No known key found for this signature in database
GPG key ID: 371029119C5F0D51
5 changed files with 242 additions and 15 deletions

View file

@ -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": [

View file

@ -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
}
}

View file

@ -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 );

View file

@ -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];
}
}

View file

@ -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 Juxtaposition( [
Quantifier::optional(
new AnythingMatcher()
),
new WhitespaceMatcher( [ 'significant' => false ] ),
Quantifier::plus(
new FunctionMatcher(
'var',
new Juxtaposition( [
new WhitespaceMatcher( [ 'significant' => false ] ),
new VarNameMatcher(),
new WhitespaceMatcher( [ 'significant' => false ] ),
Quantifier::optional(
new KeywordMatcher(['!important'])
)
] )
),
),
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;
}
}