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. octfx/template-styles-extender

ActiveMediawiki-extension

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

Extends TemplateStyles with new CSS properties

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

Since Jul 19Pushed 3mo 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 1mo ago

READMEChangelog (10)Dependencies (6)Versions (19)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-c1f453af64895ab54de93343c432e40b)[2](#user-content-fn-2-c1f453af64895ab54de93343c432e40b)`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-c1f453af64895ab54de93343c432e40b)
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-c1f453af64895ab54de93343c432e40b)

###  Health Score

45

—

FairBetter than 93% of packages

Maintenance54

Moderate activity, may be stable

Popularity32

Limited adoption so far

Community18

Small or concentrated contributor base

Maturity65

Established project with proven stability

 Bus Factor1

Top contributor holds 63.6% 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 ~99 days

Recently: every ~190 days

Total

16

Last Release

272d 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 (54 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

[elgg/elgg

Elgg is an award-winning social networking engine, delivering the building blocks that enable businesses, schools, universities and associations to create their own fully-featured social networks and applications.

1.7k15.7k5](/packages/elgg-elgg)[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.

44643.1k1](/packages/pressbooks-pressbooks)[johnbillion/user-switching

Instant switching between user accounts in WordPress and WooCommerce.

19768.3k2](/packages/johnbillion-user-switching)[rainlab/blog-plugin

Blog plugin for October CMS

17257.7k](/packages/rainlab-blog-plugin)[rainlab/user-plugin

User plugin for October CMS

11954.3k13](/packages/rainlab-user-plugin)

PHPackages © 2026

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