README

Extends Extension:TemplateStyles with new selectors and matchers.

TemplateStylesExtender is developed based on css-sanitizer 5.5.0, which is being used by MediaWiki 1.43.

Features

• Declare CSS custom properties/variables
• Use CSS custom properties/variables in most properties
• Implement additional properties and values as listed below

Installation

Download the zip file from the latest release page.

Extract the folder to extensions/TemplateStylesExtender.
Add the following to LocalSettings.php:

wfLoadExtension( 'TemplateStyles' );
wfLoadExtension( 'TemplateStylesExtender' );

Configuration

Notes

:root CSS variables declaration

Currently using :root selectors won't work due to template styles prepending .mw-parser-output.

One possible fix is to wrap the entire content into a div element and adding the declarations to this, e.g.

div#content-wrap {
	--padding: 10px
}

.content {
	padding: var( --padding )
}

Wikitext

<div id="content-wrap">
	<div class=".content">
		The WikiText...
	</div>
</div>

Relative colors

The relative colors module is quite extensive, not every feature is currently implemented.

Development

• css-sanitizer workboard: https://phabricator.wikimedia.org/tag/css-sanitizer
• css-sanitizer repo: https://github.com/wikimedia/css-sanitizer
• TemplateStyles repo: https://github.com/wikimedia/mediawiki-extensions-TemplateStyles

Test file

Add tests.css in the content root to a TemplateStyle page to validate added matchers.

Footnotes

1. This is potentially expensive, as each templatestyles tag with wrapclass set, will attempt to look up the user of the current page revision, and check if this user has the permission to activate CSS un-scoping.
   Example: <templatestyles src="Foo/style.css" wrapclass="mediawiki" /> results in the CSS being scoped to .mediawiki instead of .mw-parser-output. ↩

2. Including such a call in a page essentially limits editing to users with the editinterface right. You can alternatively include a call to a template that includes the styles. ↩