feat: add @match directive support by bezustally · Pull Request #2003 · openstyles/stylus

bezustally · 2025-09-08T10:58:48Z

Overview

Adds support for @match directive in usercss files.

Closes #2002

What's Added

@match directive support for URL pattern matching
Enhanced meta parser to handle @match directives
Updated style matcher and usercss compiler for @match compatibility
UI improvements to display @match patterns in style management and installation

Usage

@match https://example.com/*
@match https://*.github.com/*

body {
  background: red;
}

Styles with @match directives will now only apply to the specified domains.

UI Changes

Enhanced installation UI with favicon display for @match domains

- Added display of `@match` patterns in the style management interface

Files Changed

src/js/meta-parser.js - Added @match parser
src/background/style-manager/matcher.js - Enhanced matching
src/background/usercss-manager.js - Updated usercss handling
src/js/usercss-compiler.js - Added @match compilation
src/js/sections-util.js - Better sections processing
src/js/prefs.js - Enhanced preferences
src/install-usercss/index.js - Added @match support and favicon display
src/manage/ files - UI updates and @match display

@match

- Implemented URL pattern matching functionality for @match directives - Added support for domains with hyphens in pattern matching - Fixed regex pattern to properly parse domains like aflt-systems.ru - Updated urlMatchPattern function to handle subdomain wildcards correctly

tophf · 2025-09-08T15:20:00Z

src/background/style-manager/matcher.js

-import {ownRoot} from '@/js/urls';
-import {stringAsRegExpStr, tryRegExp, tryURL} from '@/js/util';
-import * as colorScheme from '../color-scheme';
+import { styleCodeEmpty } from "@/js/sections-util";


Please undo all cosmetic changes (formatting/quotes/indents and so on) as it makes next to impossible to use git features like blame or history grep or diff as they become too "noisy" in almost any git client.

@tophf Is it better now?

Almost. There's still prefs.js and manage-newui.css.

@match

- Revert formatting changes (quotes, spacing, line breaks) in all modified files - Preserve functional changes for @match directive support - Keep original code style to avoid git history noise - Affected files: matcher.js, usercss-manager.js, install-usercss/index.js, meta-parser.js, sections-util.js, usercss-compiler.js, render-favs.js, render.js

tophf

While I found some more trivial issues in the code, it can wait until we decide on the high-level design in #2002.

tophf · 2025-09-09T04:40:52Z

src/background/usercss-manager.js

+  const {sourceCode: code, [UCD]: {vars, preprocessor, match}} = style;
+
+  // Pass @match data to compiler
+  const varsWithMatch = vars


AFAIK this is the same as const varsWithMatch = {...vars, _usercssData: {match}}

tophf · 2025-09-09T04:45:06Z

src/install-usercss/index.js

  replaceChildren($('.external-link'), makeExternalLink());
  getAppliesTo().then(list =>
-    replaceChildren($('.applies-to'), list.map(s => $create('li', s))));
+    replaceChildren($('.applies-to'), list.map(s => {


We shouldn't show favicons if the user disables the option to show favicons in the manager (usually for privacy).

We should reuse the existing code that shows icons for all targets, not just @match.

Since this is not exactly trivial, maybe it should be done in a separate PR

tophf · 2025-09-09T04:46:15Z

src/js/meta-parser.js


 const PREPROCESSORS = new Set(['default', 'uso', 'stylus', 'less']);
+
+// Custom parser for @match directive


This should be done in https://github.com/openstyles/usercss-meta

tophf · 2025-09-09T04:47:22Z

src/js/prefs.js

-import {deepCopy, deepEqual, isCssDarkScheme, makePropertyPopProxy} from './util';
-import {onStorageChanged} from './util-webext';
-import './msg-init'; // installs direct `API` handler
+import { k_busy } from "@/js/consts";


Formatting/syntax shouldn't be changed (in the entire file).

tophf · 2025-09-09T04:48:15Z

src/js/usercss-compiler.js

  const res = extractSections({code});
+
+  // Process @match directives from metadata
+  if (vars && vars._usercssData && vars._usercssData.match) {


Use the modern syntax: vars?._usercssData?.match

tophf · 2025-09-09T04:50:36Z

src/manage/manage-newui.css

+    padding: 0 0.5em;
    display: flex;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;


Why? Changes in essential things like entry styling must be convincingly justified/explained.

tophf · 2025-09-09T04:51:55Z

src/manage/manage-newui.css

    overflow: hidden;
    max-height: calc(var(--num-targets) * 18px);
    width: 100%;
+    display: flex;


tophf · 2025-09-09T04:52:47Z

src/manage/manage-newui.css

  }
  .target {
-    display: block;
+    display: inline-block;


tophf · 2025-09-09T04:52:53Z

src/manage/manage-newui.css

    line-height: var(--target-height);
-    width: 0;
-    min-width: 100%;
+    width: auto;


tophf · 2025-09-09T04:59:35Z

src/manage/render.js

          }
        }
        element.dataset.type = type;
+        element.dataset.targetValue = targetValue; // Store original value for favicon


I don't see the necessity to have separate displayValue and target.dataset.targetValue. Looks like the renderFavs function's regexp can be changed to extract the domain from target.textContent

bezustally force-pushed the feat/match-directive-support branch from 9184c5d to 5aaecb9 Compare September 8, 2025 12:25

tophf reviewed Sep 8, 2025

View reviewed changes

bezustally force-pushed the feat/match-directive-support branch from c730e3e to 292f48a Compare September 8, 2025 16:55

bezustally force-pushed the feat/match-directive-support branch from 292f48a to 19ecb24 Compare September 8, 2025 16:55

tophf requested changes Sep 9, 2025

View reviewed changes

tophf force-pushed the master branch 3 times, most recently from b780606 to 4349385 Compare December 22, 2025 00:35

tophf force-pushed the master branch 7 times, most recently from 5aed490 to 28cdf05 Compare January 3, 2026 18:34

tophf force-pushed the master branch 3 times, most recently from 24d6cc5 to 0d6b4f6 Compare March 12, 2026 10:44


		const PREPROCESSORS = new Set(['default', 'uso', 'stylus', 'less']);

		// Custom parser for @match directive

Conversation

bezustally commented Sep 8, 2025

Overview

What's Added

Usage

UI Changes

Files Changed

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tophf left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants