octfx/template-styles-extender

Extends TemplateStyles with new CSS properties

Maintainers

Details

github.com/octfx/mediawiki-extensions-TemplateStylesExtender

Homepage

Source

Issues

Installs: 1 310

Dependents: 0

Suggesters: 0

Security: 0

Stars: 8

Watchers: 1

Forks: 4

Open Issues: 4

Type:mediawiki-extension

1.2.2 2024-06-30 09:56 UTC

Requires

Requires (Dev)

GPL-2.0+ 5b97d8f4481b03e148782cad0b52ae55457a24ba

This package is auto-updated.

Last update: 2025-06-03 08:58:46 UTC

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
Module Changes Upstream task
Basic User Interface Module Level 4 Added property: pointer-events T342271
Box Sizing Module Level 4 Backported for css-sanitizer 5.5.0 T375344
Cascading and Inheritance Level 5 Added value: revert-layer -
Color Module Level 4 Fully implemented T265675, T351500
Color Module Level 5 Added: Relative color -
Containment Module Level 3 Added properties: contain, content-visibility -
Filter Effects Module Level 2 Added property: backdrop-filter -
Fonts Module Level 4 Added properties: font-optical-sizing, font-variation-settings, ascent-override, descent-override, font-display, line-gap-override -
Fonts Module Level 5 Added property: size-adjust -
Images Module Level 4 Added function: image-set() -
Masking Module Level 1 Added property: -webkit-mask-image -
Ruby Annotation Layout Module Level 1 Added properties: ruby-align, ruby-position T277755
Scroll Snap Module Level 1 Added properties: scroll-margin, scroll-padding, scroll-snap-align, scroll-snap-stop, scroll-snap-type T271598
Values and Units Module Level 4 Added function: clamp() T394619

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

Configuration Description Default
$wgTemplateStylesExtenderCustomPropertiesDeclaration Allow CSS custom properties (CSS variables) to be declared as properties true
$wgTemplateStylesExtenderExtendCustomPropertiesValues Allow the CSS custom properties (CSS variables) to be used as values in all properties true
$wgTemplateStylesExtenderEnableUnscopingSupport Allows users with unscope permissions to unscope CSS by setting a wrapclass attribute.12 false
$wgTemplateStylesExtenderUnscopingPermission Specify a permission group that is allowed to unscope CSS. editinterface

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

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. ↩