Azure DevOps: Release PR Tags v1.0.0

← Back to Stylus Rules

Highlights specific release tags with environment labels in Azure DevOps PRs.

What it does

This style rule makes release tracking easier by:

  • Release 81 (UAT): Solid red background with white border and "UAT" label
  • Release 82 (QA): Red border with "QA" label
  • Release 83 (Dev): Dotted orange border with "Dev" label
  • Provisional support: Works with both "Release XX" and "Release XX Provisional" tags

This provides instant visual identification of which environment each release is targeting in pull requests.

You can update the release numbers in the CSS as your releases progress to keep the styling relevant to your current release cycle.

Install Style

Style Content

/* ==UserStyle==
@name           Azure DevOps: Release PR Tags
@namespace      https://www.timhilton.xyz/stylus-rules/
@version        1.0.0
@description    Highlights specific release tags with environment labels in Azure DevOps PRs
@author         Tim Hilton
@homepageURL    https://www.timhilton.xyz/stylus-rules/azure-devops/release-pr-tags/
@updateURL      https://www.timhilton.xyz/stylus-rules/azure-devops/release-pr-tags/latest/release-pr-tags.user.css
==/UserStyle==*/

@-moz-document regexp("https://dev.azure.com/.*/pullrequest.*") {
/* Using ^= (starts with) selector so it highlights both "Release XX" and "Release XX Provisional" tags */

/* Common ::after styles */
.bolt-pill:has([aria-label^="Release 81"])::after,
.bolt-pill:has([aria-label^="Release 82"])::after,
.bolt-pill:has([aria-label^="Release 83"])::after {
    padding: 2px 4px;
    display: inline-block;
}

/* UAT release - solid red */
.bolt-pill:has([aria-label^="Release 81"]) {
    border: 3px solid white;
    background: red;
}

.bolt-pill:has([aria-label^="Release 81"])::after {
    content: 'UAT';
    border-left: 3px solid white;
}

/* QA release - red border */
.bolt-pill:has([aria-label^="Release 82"]) {
    border: 3px solid red;
}

.bolt-pill:has([aria-label^="Release 82"])::after {
    content: 'QA';
    border-left: 3px solid red;
}

/* Dev release - dotted orange border */
.bolt-pill:has([aria-label^="Release 83"]) {
    border: 2px dotted orange;
}

.bolt-pill:has([aria-label^="Release 83"])::after {
    content: 'Dev';
    border-left: 2px dotted orange;
}
}