PHPackages                             octfx/template-styles-extender - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Templating & Views](/categories/templating)
4. /
5. octfx/template-styles-extender

ActiveMediawiki-extension[Templating & Views](/categories/templating)

octfx/template-styles-extender
==============================

Extends TemplateStyles with new CSS properties

2.2.0(2mo ago)106.4k↑1550%12[9 issues](https://github.com/octfx/mediawiki-extensions-TemplateStylesExtender/issues)GPL-2.0+PHPPHP >=8.0CI passing

Since Jul 19Pushed 2mo ago2 watchersCompare

[ Source](https://github.com/octfx/mediawiki-extensions-TemplateStylesExtender)[ Packagist](https://packagist.org/packages/octfx/template-styles-extender)[ Docs](http://www.mediawiki.org/wiki/Extension:TemplateStylesExtender)[ RSS](/packages/octfx-template-styles-extender/feed)WikiDiscussions master Synced 3d ago

READMEChangelog (10)Dependencies (12)Versions (20)Used By (0)

TemplateStylesExtender
======================

[](#templatestylesextender)

Extends [Extension:TemplateStyles](https://www.mediawiki.org/wiki/Extension:TemplateStyles) with new selectors and matchers.

TemplateStylesExtender is developed based on [css-sanitizer](https://www.mediawiki.org/wiki/Css-sanitizer) 5.5.0, which is being used by MediaWiki 1.43.

Features
--------

[](#features)

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

ModuleChangesUpstream task[Basic User Interface Module Level 4](https://www.w3.org/TR/css-ui-4/)Added property: [`pointer-events`](https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events)[T342271](https://phabricator.wikimedia.org/T342271)[Box Sizing Module Level 4](https://www.w3.org/TR/css-sizing-4/)Backported for `css-sanitizer` 5.5.0[T375344](https://phabricator.wikimedia.org/T375344)[Cascading and Inheritance Level 5](https://www.w3.org/TR/css-cascade-5/)Added value: [`revert-layer`](https://developer.mozilla.org/en-US/docs/Web/CSS/revert-layer)-[Color Module Level 4](https://www.w3.org/TR/css-color-4/)Fully implemented[T265675](https://phabricator.wikimedia.org/T265675), [T351500](https://phabricator.wikimedia.org/T351500)[Color Module Level 5](https://www.w3.org/TR/css-color-5/)Added: [Relative color](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors/Relative_colors)-[Containment Module Level 3](https://www.w3.org/TR/css-contain-3/)Added properties: [`contain`](https://developer.mozilla.org/en-US/docs/Web/CSS/contain), [`content-visibility`](https://developer.mozilla.org/en-US/docs/Web/CSS/content-visibility)-[Filter Effects Module Level 2](https://drafts.fxtf.org/filter-effects-2)Added property: [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter)-[Fonts Module Level 4](https://www.w3.org/TR/css-fonts-4/)Added properties: [`font-optical-sizing`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-optical-sizing), [`font-variation-settings`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variation-settings), [`ascent-override`](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/ascent-override), [`descent-override`](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/descent-override), [`font-display`](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display), [`line-gap-override`](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/line-gap-override)-[Fonts Module Level 5](https://www.w3.org/TR/css-fonts-5/)Added property: [`size-adjust`](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/size-adjust)-[Images Module Level 4](https://www.w3.org/TR/css-images-4/)Added function: [`image-set()`](https://developer.mozilla.org/en-US/docs/Web/CSS/image/image-set)-[Masking Module Level 1](https://www.w3.org/TR/css-masking/)Added property: `-webkit-mask-image`-[Ruby Annotation Layout Module Level 1](https://www.w3.org/TR/css-ruby-1/)Added properties: [`ruby-align`](https://developer.mozilla.org/en-US/docs/Web/CSS/ruby-align), [`ruby-position`](https://developer.mozilla.org/en-US/docs/Web/CSS/ruby-position)[T277755](https://phabricator.wikimedia.org/T277755)[Scroll Snap Module Level 1](https://www.w3.org/TR/css-scroll-snap-1/)Added properties: [`scroll-margin`](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin), [`scroll-padding`](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding), [`scroll-snap-align`](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-align), [`scroll-snap-stop`](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-stop), [`scroll-snap-type`](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type)[T271598](https://phabricator.wikimedia.org/T271598)[Values and Units Module Level 4](https://www.w3.org/TR/css-values-4/)Added function: [`clamp()`](https://developer.mozilla.org/en-US/docs/Web/CSS/clamp)[T394619](https://phabricator.wikimedia.org/T394619)Installation
------------

[](#installation)

Download the zip file from the [latest release](https://github.com/octfx/mediawiki-extensions-TemplateStylesExtender/releases/latest) page.

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

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

Configuration
-------------

[](#configuration)

ConfigurationDescriptionDefault`$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.[1](#user-content-fn-1-8033f52cd75ae9c31ea82f46461b5e1e)[2](#user-content-fn-2-8033f52cd75ae9c31ea82f46461b5e1e)`false``$wgTemplateStylesExtenderUnscopingPermission`Specify a permission group that is allowed to unscope CSS.`editinterface`Notes
-----

[](#notes)

### `:root` CSS variables declaration

[](#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

```

		The WikiText...

```

### Relative colors

[](#relative-colors)

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

Development
-----------

[](#development)

- css-sanitizer workboard:
- css-sanitizer repo:
- TemplateStyles repo:

### Test file

[](#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: `` results in the CSS being scoped to `.mediawiki` instead of `.mw-parser-output`. [↩](#user-content-fnref-1-8033f52cd75ae9c31ea82f46461b5e1e)
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. [↩](#user-content-fnref-2-8033f52cd75ae9c31ea82f46461b5e1e)

###  Health Score

49

—

FairBetter than 94% of packages

Maintenance67

Regular maintenance activity

Popularity34

Limited adoption so far

Community18

Small or concentrated contributor base

Maturity65

Established project with proven stability

 Bus Factor1

Top contributor holds 63.3% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~108 days

Recently: every ~213 days

Total

17

Last Release

79d ago

Major Versions

1.2.2 → 2.1.02025-08-19

PHP version history (3 changes)1.0.0PHP >=7.2

1.1.2PHP >=7.3.19

1.2.0PHP >=8.0

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/6594492?v=4)[H. C. Kruse](/maintainers/Octfx)[@octfx](https://github.com/octfx)

---

Top Contributors

[![octfx](https://avatars.githubusercontent.com/u/6594492?v=4)](https://github.com/octfx "octfx (105 commits)")[![alistair3149](https://avatars.githubusercontent.com/u/9260542?v=4)](https://github.com/alistair3149 "alistair3149 (55 commits)")[![xtexx](https://avatars.githubusercontent.com/u/46394906?v=4)](https://github.com/xtexx "xtexx (2 commits)")[![Gravy59](https://avatars.githubusercontent.com/u/58180094?v=4)](https://github.com/Gravy59 "Gravy59 (1 commits)")[![hsl0](https://avatars.githubusercontent.com/u/46296273?v=4)](https://github.com/hsl0 "hsl0 (1 commits)")[![SomeMWDev](https://avatars.githubusercontent.com/u/186634068?v=4)](https://github.com/SomeMWDev "SomeMWDev (1 commits)")[![Universal-Omega](https://avatars.githubusercontent.com/u/54654040?v=4)](https://github.com/Universal-Omega "Universal-Omega (1 commits)")

---

Tags

mediawiki-extension

### Embed Badge

![Health badge](/badges/octfx-template-styles-extender/health.svg)

```
[![Health](https://phpackages.com/badges/octfx-template-styles-extender/health.svg)](https://phpackages.com/packages/octfx-template-styles-extender)
```

###  Alternatives

[helsingborg-stad/municipio

A bootstrap theme for creating municipality sites.

4028.5k10](/packages/helsingborg-stad-municipio)[pressbooks/pressbooks

Pressbooks is an open source book publishing tool built on a WordPress multisite platform. Pressbooks outputs books in multiple formats, including PDF, EPUB, web, and a variety of XML flavours, using a theming/templating system, driven by CSS.

45444.2k1](/packages/pressbooks-pressbooks)[october/rain

October Rain Library

1601.7M83](/packages/october-rain)[pressbooks/pressbooks-book

This theme is named after Canadian media theorist Marshall McLuhan, who coined the phrase “the medium is the message.” It is designed for academic writing and is also suitable for fiction. Headings are set in Cormorant Garamond, and body type is set in Lora.

206.7k](/packages/pressbooks-pressbooks-book)[mediawiki/maps

Adds various mapping features to MediaWiki

84152.3k3](/packages/mediawiki-maps)[silverstripe-themes/simple

The SilverStripe simple theme (default SilverStripe 3 theme)

411.3M8](/packages/silverstripe-themes-simple)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)