Extends TemplateStyles with new selectors and matchers.
Go to file
H. C. Kruse d3b256f305 Merge branch 'release/v1.2.0' 2023-12-14 14:48:54 +01:00
.github/workflows refactor: Use $GITHUB_OUTPUT 2023-08-18 14:32:19 +02:00
.phan initial commit 2021-03-19 21:00:11 +01:00
i18n feat: Allow to specify a custom permission for css unscoping 2023-04-06 20:52:07 +02:00
includes nit: Make linter happy 2023-12-14 09:22:31 +01:00
.eslintignore initial commit 2021-03-19 21:00:11 +01:00
.eslintrc.json initial commit 2021-03-19 21:00:11 +01:00
.gitattributes initial commit 2021-03-19 21:00:11 +01:00
.gitignore initial commit 2021-03-19 21:00:11 +01:00
.gitreview initial commit 2021-03-19 21:00:11 +01:00
.phpcs.xml initial commit 2021-03-19 21:00:11 +01:00
COPYING initial commit 2021-03-19 21:00:11 +01:00
Gruntfile.js initial commit 2021-03-19 21:00:11 +01:00
README.md feat: Allow to specify a custom permission for css unscoping 2023-04-06 20:52:07 +02:00
composer.json dist: Bump version to 1.2.0 2023-12-14 14:48:49 +01:00
extension.json dist: Bump version to 1.2.0 2023-12-14 14:48:49 +01:00
package-lock.json initial commit 2021-03-19 21:00:11 +01:00
package.json initial commit 2021-03-19 21:00:11 +01:00

README.md

TemplateStylesExtender

Extends Extension:TemplateStyles by the following new matchers:

  • CSS Variables:
    • Example: color: var( --example-var )
  • image-rendering
  • ruby-position
  • ruby-align
  • scroll-margin-*, scroll-padding-*
  • pointer-events
  • aspect-ratio

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

$wgTemplateStylesExtenderEnablePrefersColorScheme
Default: true
Enables or disables @media (prefers-color-scheme) queries.

$wgTemplateStylesExtenderEnableCssVars
Default: true
Enables or disables css variable support.

$wgTemplateStylesExtenderEnableUnscopingSupport
Default: false
Allows users with editinterface permissions to unscope css by setting a wrapclass attribute.

Example: <templatestyles src="Foo/style.css" wrapclass="mediawiki" /> results in the css being scoped to .mediawiki instead of .mw-parser-output.

Note: 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.

$wgTemplateStylesExtenderUnscopingPermission
Default: editinterface
Specify a permission group that is allowed to unscope css.

Notes on CSS vars

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>