### Temporary Firefox Installation

Source: https://github.com/openstyles/stylus/wiki/Install-Stylus-from-GitHub

Guide for temporarily installing the Stylus extension in Firefox. This method is useful for testing and involves loading the extension via `about:debugging#addons`.

```APIDOC
Temporary Firefox Installation:
  1. Open the URL: `about:debugging#addons`
  2. Click the "Load Temporary Add-on" button.
  3. Select the extracted "stylus" folder.
  4. Select *any* file within the folder.
  5. Click "Open".
  Note: If a permanent version is installed, it will be temporarily hidden and restored on browser restart. Both extensions use the same data.
```

--------------------------------

### Nightly Test Build Installation Instructions

Source: https://github.com/openstyles/stylus/blob/master/README.md

Instructions for downloading and installing nightly test builds of Stylus from GitHub Actions. This process involves navigating GitHub, identifying build artifacts, and installing them as unpacked extensions in Chrome or temporarily in Firefox.

```APIDOC
Install Nightly Test Builds:

1. Navigate to the CI workflow: https://github.com/openstyles/stylus/actions/workflows/ci.yml
2. Select a specific workflow run entry.
3. Download the build artifact (e.g., `stylus-chrome-mv3-3.0.7-fc0999b`). The name indicates the target browser (Chrome/Chromium), manifest version (mv3), version number, and commit hash.
4. Install the downloaded build:
   - Chrome/Chromium: Load as an unpacked extension.
   - Firefox: Install as a temporary extension.

Note: When testing in Chrome, disable any existing Stylus extension from the web store to avoid ID conflicts, as unpacked extensions get IDs based on their directory path.
```

--------------------------------

### Semi-permanent Firefox Installation

Source: https://github.com/openstyles/stylus/wiki/Install-Stylus-from-GitHub

Instructions for a semi-permanent installation of Stylus in Firefox, compatible with Developer Edition, Nightly, and LibreWolf. Requires zipping extension contents and installing via file.

```APIDOC
Semi-permanent Firefox Installation:
  Prerequisites: Works with Developer Edition, Nightly, LibreWolf. Standard Firefox may not support this.
  Steps:
  1. Zip all contents of the stylus folder (do not zip the folder itself, but its contents).
  2. Go to the Firefox `about:addons` page.
  3. Click the gear icon at the top and choose "Install Add-on From File..."
  4. Select the zip file you created and click "Open."
  Troubleshooting:
  - Corrupt add-on message: Ensure the zip file contains files/folders directly, not a parent folder.
  - Not verified message: Go to `about:config`, search for `xpinstall.signatures.required`, and set it to `false`. Retry installation.
```

--------------------------------

### Install Stylus in Chrome

Source: https://github.com/openstyles/stylus/wiki/Install-Stylus-from-GitHub

Steps to install the Stylus extension in Chrome or Chromium-based browsers. This involves enabling developer mode and either dragging the extension file or loading it unpacked.

```APIDOC
Install Stylus in Chrome:
  1. Open the menu -> Extensions -> Manage, which opens `chrome://extensions` page.
  2. Check the `Developer mode` checkbox at the top.
  3. In modern Chrome, drag'n'drop the zip file into that page.
     In some Chromium-based browsers and older Chrome, unpack the zip file first, click `Load unpacked` button, select the extracted folder, and click "OK".
  4. Disable any other versions of Stylus that are already installed!
```

--------------------------------

### Stylus Installation Badges

Source: https://github.com/openstyles/stylus/wiki/Writing-UserCSS

Markdown code for badges that link directly to UserCSS styles for installation via the Stylus browser extension. Replace MY.USER.CSS with the raw URL of your style.

```Markdown
[![Install directly with Stylus](https://img.shields.io/badge/Install%20directly%20with-Stylus-00adad.svg)](MY.USER.CSS)
```

```Markdown
[![Install directly with Stylus](https://img.shields.io/badge/Install%20directly%20with-Stylus-285959.svg)](MY.USER.CSS)
```

```Markdown
[![Install directly with Stylus](https://img.shields.io/badge/Install%20directly%20with-Stylus-238b8b.svg)](MY.USER.CSS)
```

--------------------------------

### CSS Specificity Example

Source: https://github.com/openstyles/stylus/wiki/Writing-styles

Demonstrates how to increase CSS selector specificity to override existing styles. It shows example HTML and various CSS selectors with increasing specificity, including the :not(#\0) trick.

```html
<div id="foo">
    <span class="bar">text</span>
</div>
```

```css
span {
    color: red !important;
}

/* More specific selectors */
div > span {
    /* ... */
}
.bar {
    /* ... */
}
div .bar {
    /* ... */
}
#foo .bar {
    /* ... */
}
div#foo > span.bar {
    /* ... */
}

/* Trick to increase specificity */
span:not(#\0) {
    /* ... */
}
span:not(#\0):not(#\0):not(#\0) {
    /* ... */
}
```

--------------------------------

### Usercss Format Support

Source: https://github.com/openstyles/stylus/blob/master/README.md

Stylus supports installing styles from .user.css or .user.styl URLs, following the Usercss format. This allows for styles with customizable parameters directly from URLs.

```APIDOC
Usercss Format:

Stylus allows installation of styles from URLs that follow the Usercss format, typically ending in `.user.css` or `.user.styl`.

Example URL format:
`https://example.com/path/to/your/style.user.css`

This format supports customizable parameters within the CSS comments, enabling users to configure styles upon installation.
```

--------------------------------

### Opening Stylus Popup

Source: https://github.com/openstyles/stylus/wiki/Popup

Instructions on how to open the Stylus extension popup in Chrome, Opera, and Firefox browsers. This includes clicking the extension icon or using keyboard shortcuts.

```APIDOC
Open Stylus Popup:
  - Chrome/Opera: Click the Stylus extension icon on the current page.
  - Firefox: Click the Stylus addon icon on the current page.
  - All Browsers: Use a defined keyboard shortcut.

Define Keyboard Shortcut:
  1. Access Chrome's `chrome://extensions/shortcuts` or Opera's extension shortcuts page.
  2. Click the 'Shortcuts' button in the Stylus options panel.
  3. Modify the 'Activate the extension shortcut' entry.
```

--------------------------------

### Stylus @-moz-document URL Prefix Rules

Source: https://github.com/openstyles/stylus/wiki/Writing-styles

Applies styles to URLs that start with a specified prefix, including the protocol. Wildcards are not permitted. This is useful for matching a range of pages within a domain or protocol.

```APIDOC
@-moz-document url-prefix("http://www.example.com/")
@-moz-document url-prefix("http://www.example.")
@-moz-document url-prefix("http:")
```

--------------------------------

### Stylus @var Directive Example

Source: https://github.com/openstyles/stylus/wiki/Writing-UserCSS

An example demonstrating the declaration of a Stylus variable using the `@var` directive, specifying its type, name, label, and default value.

```stylus
/*
@var <type> <name>   <label>        <default value> */
@var text   myBorder "Border style" 3px dotted blue
```

--------------------------------

### Example UserCSS Style with Metadata

Source: https://github.com/openstyles/stylus/wiki/UserCSS

Demonstrates the structure of a UserCSS style, including metadata comments and CSS rules for styling web pages. The metadata defines style properties like name, namespace, version, license, preprocessor, and variables.

```css
/* ==UserStyle==
@name         Example UserCSS style
@namespace    github.com/openstyles/stylus
@version      1.0.0
@license      unlicense
@preprocessor default
@var color link-color "Link Color" red
==/UserStyle== */

@-moz-document domain("example.com") {
  a {
    color: var(--link-color);
  }
}
```

--------------------------------

### Example HTML with stylus-iframe Attribute

Source: https://github.com/openstyles/stylus/wiki/Options

This HTML example illustrates the structure of an iframe's document when the Stylus extension is active. The `stylus-iframe` attribute is appended to the `<html>` tag, containing the URL of the parent page that embedded the iframe, enabling targeted CSS rules.

```html
<!-- iframe embedded on twitter.com -->
<html stylus-iframe="https://twitter.com">
  <head></head>
  <body>
    <h1>Header to hide</h1>
  </body>
  <!-- style injected by Stylus -->
  <style id="stylus-99" type="text/css" class="stylus">
  html[stylus-iframe*="twitter.com"] h1 {
    display:none;
  }
  </style>
</html>
```

--------------------------------

### Maintaining Local Changes with Companion Styles

Source: https://github.com/openstyles/stylus/wiki/FAQ

Describes how to manage local modifications to user styles installed from external pages. It explains that direct modification blocks automatic updates and suggests using companion styles to avoid losing changes.

```APIDOC
APIDOC:
  Function: Maintain Local Userstyle Modifications
  Description: When a userstyle is installed from a webpage, Stylus links it to the original URL. Modifying or renaming such a style prevents automatic updates and can lead to data loss if not handled properly.
  Problem:
    - Modifying an installed userstyle blocks automatic updates.
    - A manual update will overwrite all local changes, resulting in data loss.
  Solution:
    - Create a "companion style" to manage local modifications.
  Reference:
    - For detailed instructions, refer to the [[Writing Styles page|Writing-styles#making-a-companion-style]] wiki page.
```

--------------------------------

### Stylus Keyboard Shortcuts

Source: https://github.com/openstyles/stylus/wiki/Popup

Defines keyboard shortcuts available within the Stylus extension popup for quick actions like toggling styles, enabling/disabling all styles, and opening the editor.

```APIDOC
Stylus Popup Keyboard Shortcuts:
  - <kbd>0</kbd>-<kbd>9</kbd> (Numpad included): Toggle the n-th style (0 corresponds to the 10th style).
  - <kbd>A</kbd>-<kbd>Z</kbd>: Toggle the first style whose name begins with the pressed letter.
  - <kbd>Shift</kbd> + Number or Letter: Opens the editor for the targeted style instead of toggling.
  - <kbd>Numpad +</kbd>: Enables all listed styles.
  - <kbd>Numpad -</kbd>: Disables all listed styles.
  - <kbd>Numpad *</kbd> or <kbd>`</kbd>: Toggles *initially* enabled styles, restoring the original selection state.
    - This action does not affect styles enabled/disabled while the popup is open.
    - Example: After disabling all styles with <kbd>Numpad -</kbd>, pressing <kbd>Numpad *</kbd> restores their initial enabled/disabled status.
```

--------------------------------

### Stylus: Apply CSS to a Specific URL

Source: https://github.com/openstyles/stylus/wiki/Writing-styles

Shows a basic example of applying CSS to a single, exact URL using the url() directive within an @-moz-document rule. This targets a precise web page.

```css
@-moz-document url("https://www.example.com/test.html") {
    body {
        background-color: green !important;
    }
}
```

--------------------------------

### Stylus Interface Elements

Source: https://github.com/openstyles/stylus/wiki/Popup

Description of the elements within the Stylus extension popup interface and their corresponding functions. This includes toggling styles, editing, deleting, and managing styles.

```APIDOC
Stylus Popup Interface:
  1. Stylus Toolbar button: Opens popup, shows active style count.
  2. Activate style: Toggles a style on/off.
  3. Style title: Toggles style on/off; Right/Wheel-click to open editor.
  4. Config from homepage: Links to style configuration on homepage.
  5. Config Usercss: Opens usercss configuration modal.
  6. Edit style: Opens the style editor.
  7. Delete style: Prompts for confirmation before deletion.
  8. Toggle style hotkey: Press number to toggle style; see keyboard shortcuts.
  9. Toggle all styles: Toggles all listed styles on/off.
  10. Find styles: If 'inline' checked, shows popular themes; otherwise, links to userstyles.org.
  11. Write a style: Create new style for domain, folder, or page.
  12. Manage: Opens the manage styles page.
  13. Options: Opens the browser's extension options page.
  14. Wiki: Opens the Stylus wiki for help.
```

--------------------------------

### UserCSS Metadata and Stylus Preprocessor Example

Source: https://github.com/openstyles/stylus/wiki/Writing-UserCSS

This snippet demonstrates the required UserCSS metadata block, including name, description, author, and license. It also showcases the use of Stylus preprocessor directives for defining user-customizable variables like colors, select options, checkboxes, and text inputs, which can be dynamically configured in the Stylus UI.

```stylus
/* ==UserStyle==
@name         Stack Overflow Navbar Enhancer
@description  Move navbar position, change font color, and more.
@namespace    eight04.blogspot
@version      0.1.8
@author       eight04 <eight04@gmail.com> (https://github.com/eight04)
@homepageURL  http://example.com/
@supportURL   http://example.com/issues
@license      unlicense
@preprocessor stylus

@var          color    fontColor "Font color"    #123456
@var          select   navPos    "Navbar position" {
    "Top": "top",
    "Bottom": "bottom"
}
@var          checkbox fixNav    "Fixed navbar"  1
@var          text     navHeight "Navbar height" 60px
==/UserStyle== */

@-moz-document domain("stackoverflow.com") {
  body {
    color: fontColor;
    background: #eee;
  }
  if navPos == "bottom" {
    body > .container {
      padding-top: 0 !important;
    }
    body > footer {
      padding-bottom: 60px !important;
    }
    body > header {
      top: auto !important;
      bottom: 0 !important;
    }
  }
  if not fixNav {
    body {
      position: relative !important;
    }
    body > header {
      position: absolute !important;
    }
  }
  body > header {
    height: navHeight !important;
  }
}
```

--------------------------------

### List Styles in chromeStorageDB (JavaScript)

Source: https://github.com/openstyles/stylus/wiki/How-to-Debug-Database-Issue

This JavaScript command retrieves and lists all style entries stored in the chromeStorageDB. It accesses `chrome.storage.local` and filters for keys starting with "style-", then logs the found styles to the console.

```javascript
chrome.storage.local.get(r => {
  console.log(Object.entries(r).map(([k, v]) => k.startsWith("style-") && v).filter(Boolean));
});
```

--------------------------------

### Importing Stylish Backup Files to Stylus

Source: https://github.com/openstyles/stylus/wiki/FAQ

Instructions for importing backup files created by Stylish into Stylus. It highlights the need to select 'All files (*.*)' when the backup file lacks an extension, or to use drag-and-drop.

```text
When importing a backup file from Stylish into Stylus, ensure you select 'All files (*.*)' in the file dialog if the backup file has no extension.
Alternatively, you can drag and drop the backup file directly onto the Stylus management page.
```

--------------------------------

### Build Project Variants

Source: https://github.com/openstyles/stylus/blob/master/BUILD.md

Commands to build the project for different browser targets and versions. These commands compile the project assets and generate distributable files for specific environments like MV2 for any browser, MV2 optimized for Firefox, and MV3 for Chrome/Chromium-based browsers.

```shell
pnpm build-mv2
pnpm build-firefox
pnpm build-chrome-mv3
```

--------------------------------

### Create Extension ZIP Archives

Source: https://github.com/openstyles/stylus/blob/master/BUILD.md

Commands to package the project into ZIP files suitable for extension galleries. This includes options for creating general archives or specific versions optimized for Firefox MV2, Chrome MV2, Chrome MV3, and Chrome MV3 beta.

```shell
pnpm zip
pnpm zip-firefox
pnpm zip-chrome-mv2
pnpm zip-chrome-mv3
pnpm zip-chrome-mv3-beta
```

--------------------------------

### Closing Stylus Popup

Source: https://github.com/openstyles/stylus/wiki/Popup

Methods for closing the Stylus extension popup. This includes pressing the Escape key, clicking outside the popup, or changing browser tabs.

```APIDOC
Close Stylus Popup:
  - Press the <kbd>Esc</kbd> key.
  - Click anywhere inside the current browser window.
  - Switch to a different browser tab.
```

--------------------------------

### Tag Release and Bump Version

Source: https://github.com/openstyles/stylus/blob/master/BUILD.md

Scripts for managing project releases, including bumping the version number and tagging commits. These scripts automate tasks such as running tests, updating the manifest file, generating ZIP archives, and pushing tags to GitHub.

```shell
pnpm bump
pnpm bump-stable
```

--------------------------------

### Migrating Styles from Stylish (Pre-3.0.1) via SQLite

Source: https://github.com/openstyles/stylus/wiki/FAQ

Guidance for users with Stylish versions prior to 3.0.1, which did not support direct export. This method involves locating the `stylish.sqlite` file in the Firefox profile and using an external tool to convert it to JSON.

```text
For Stylish versions before 3.0.1, locate the `stylish.sqlite` file within your Firefox user profile.
Use the User Style Extractor tool (e.g., jeffersonscher.com/res/stylishextract.html) by dragging and dropping the `stylish.sqlite` file and selecting 'All styles' to convert it to JSON format for Stylus import.
```

--------------------------------

### UserCSS Hosting URLs

Source: https://github.com/openstyles/stylus/wiki/Writing-UserCSS

Provides raw URLs for hosting UserCSS files on various platforms like GitHub, GitLab, Bitbucket, and Dropbox. Ensure the file ends with ".user.css" or append a dummy parameter if necessary.

```Text
https://raw.githubusercontent.com/{USER}/{REPO}/master/{NAME}.user.css
```

```Text
https://raw.githack.com/{USER}/{REPO}/master/{NAME}.user.css
```

```Text
https://bitbucket.org/{USER}/{REPO}/raw/HEAD/{NAME}.user.css
```

```Text
https://gitlab.com/{USER}/{REPO}/raw/master/{NAME}.user.css
```

```Text
https://gist.github.com/{USER}/{SHA}/raw/{REVISION-SHA}/{NAME}.user.css
```

```Text
https://dl.dropboxusercontent.com/s/{RANDOM}/{NAME}.user.css?dl=0
```

```Text
https://gitlab.com/{USER}/{REPO}/snippets/{ID}/raw?dummy=.user.css
```

--------------------------------

### Manage Locales with Transifex

Source: https://github.com/openstyles/stylus/blob/master/BUILD.md

Commands to synchronize locale files with Transifex. 'pnpm update-locales' pulls the latest translations from Transifex, while 'pnpm update-transifex' pushes local changes to the Transifex service.

```shell
pnpm update-locales
pnpm update-transifex
```

--------------------------------

### Watch for Development

Source: https://github.com/openstyles/stylus/blob/master/BUILD.md

Commands to initiate a development watch process. These commands monitor file changes and automatically recompile the project, facilitating rapid development cycles for both MV2 and MV3 targets.

```shell
pnpm watch-mv2
pnpm watch-mv3
```

--------------------------------

### Stylus: Apply CSS with Multiple @-moz-document Rules

Source: https://github.com/openstyles/stylus/wiki/Writing-styles

Demonstrates applying CSS styles to specific URLs and domains using multiple @-moz-document rules. Covers url(), domain(), and url-prefix() directives for precise targeting.

```css
@-moz-document url("https://asdf.com/index.html"),
               url("https://asdf.com/guestbook.html") {
  /* This code is for index and guestbook page only */
}

@-moz-document domain("asdf.com"),
               domain("example.com") {
  /* This code is for the whole domain asdf.com
     and example.com including subdomains */
}

@-moz-document url-prefix("https://goodfurniture.com/bookshelves/") {
  /* This code is for something completely different,
     but in the same style */
}
```

--------------------------------

### Domain-Specific Styling for Embedded Iframes

Source: https://github.com/openstyles/stylus/wiki/Options

This CSS example shows how to apply styles to a specific domain within an iframe, especially when the iframe is embedded on a different domain. It uses `@-moz-document` to target the iframe's domain and the `stylus-iframe` attribute to link it to the parent site.

```css
/* Main target of the userstyle - darken an anime site */
@-moz-document domain("my-favorite-anime-site.com") {
  body {
    background: #000 !important;
    color: #ddd !important;
  }
}

/* Only target the chat-app when it's embedded on the anime site */
@-moz-document domain("chat-app.com") {
  html[stylus-iframe*="my-favorite-anime-site.com"] body {
    background: #000 !important;
    color: #ddd !important;
  }
}
```

--------------------------------

### Stylus UserCSS Metadata with Variables

Source: https://github.com/openstyles/stylus/wiki/Writing-UserCSS

Demonstrates how to define user-configurable variables using Stylus's @var directive within UserCSS metadata. Supports various types like checkbox, text, color, select, number, and range, with examples of their usage in CSS rules.

```stylus
/* ==UserStyle==
@name         test
@description  UserCSS example
@namespace    example.com
@author       me
@version      0.1.0
@preprocessor stylus
@var checkbox fontEnable "Font enabled" 1
@var text     fontSize   "Font size"    2.1em
@var color    fontColor  "Font color"   #123456
@var select   fontName   "Font name"    ["Arial", "Consolas*", "Times New Roman"]
@var select   fontBkgd   "Body background color"   {
  "Near Black": "#111111",
  "Near White*": "#eeeeee"
}
@var text     bkgdImg    "Bkgd image"   "'http://example.com/bkgd.jpg'"
@var text     logoImg    "Logo image"   none
@var number   adOpacity  "Ad opacity"       [0.5, 0, 1, 0.1]
@var range    imgHeight  "Max image height" [50, 10, 200, 10, "px"]
==/UserStyle== */
@-moz-document domain("example.com") {
  if fontEnable {
    body {
      font-size: fontSize !important;
      color: fontColor !important;
      font-family: fontName !important; /* Consolas (without the "*") will be set as default */
      background-color: fontBkgd !important;
      /* This approach will not allow setting the background-image to "none" */
      background-image: url(bkgdImg) !important;
    }
    #logo {
       /* This approach will, but needs url('URL_HERE') written in the config input if set to a URL */
      background-image: logoImg !important;
    }
    #ad {
      opacity: adOpacity !important;
    }
    img {
      max-height: imgHeight !important; /* the 'px' is added to this value automatically */
    }
  }
}
```

--------------------------------

### Migrating Styles from Stylish (Firefox 38.0a1-56.0) via XPI

Source: https://github.com/openstyles/stylus/wiki/FAQ

Instructions for migrating styles from Stylish on specific Firefox versions (38.0a1 to 56.0) using a temporary add-on. This method generates a Stylus-compatible JSON file.

```firefox-addon
Download the `stylish-export.xpi` file.
Navigate to `about:debugging` in Firefox.
Use 'Load as temporary add-on' to load the downloaded .xpi file.
Wait for the conversion process to complete; a JSON file will be saved to your desktop.
```

--------------------------------

### Import and Basic Editing Shortcuts

Source: https://github.com/openstyles/stylus/wiki/Hotkey-shortcuts

Shortcuts for importing styles from the clipboard and basic editing operations like toggling styles and scrolling.

```Stylus Editor
Ctrl+V: Import style when clipboard content starts with "@-moz-document ..."
Alt+PgUp/PgDn: Navigate between previous/next section-editor (also applicable for UserCSS)
Alt+Enter: Toggle Style visibility
Ctrl+Shift+Wheel: Scroll the main document scrollbar instead of the editor scrollbar
```

--------------------------------

### UserStyles.org API Unresponsiveness

Source: https://github.com/openstyles/stylus/wiki/FAQ

Explains that issues with inline search or UserStyles.org functionality within Stylus are due to the unresponsiveness of the UserStyles.org API. The Stylus team has no control over this external service.

```APIDOC
APIDOC:
  Function: UserStyles.org Inline Search Issues
  Description: The inline search feature in Stylus relies on the UserStyles.org (USo) API. This API has become increasingly unresponsive, impacting the usability of the search feature.
  Details:
    - Stylus is not affiliated with USo and cannot influence its API performance.
    - The unresponsiveness makes the inline search barely usable.
  Workaround:
    - For browsing user styles, refer to the [USo-archive](https://github.com/33kk/uso-archive) project.
```

--------------------------------

### CSS @-moz-document Rule Syntax

Source: https://github.com/openstyles/stylus/wiki/Editor

Details the various ways to specify URL patterns for applying CSS styles using the @-moz-document rule. This includes exact URL matching, URL prefixes, domain matching, and regular expression matching.

```APIDOC
CSS @-moz-document Rule Directives:

  URL(url): Matches an exact URL.
    Example: url("http://example.com/page.html")

  URL-PREFIX(url-prefix): Matches if the document URL starts with the provided value.
    Example: url-prefix("http://example.com/blog/")

  DOMAIN(domain): Matches if the document URL is on the provided domain or a subdomain.
    Example: domain("example.com")

  REGEXP(regexp): Matches if the document URL is matched by the regular expression. The expression must match the entire URL.
    Note: Special characters in the regex must be escaped using two backslashes (e.g., '.' becomes '\\.')
    Example: regexp("https?://.*\\.example\\.com/path/.*")

  ALL: Applies the style to all pages (when no specific @-moz-document rule is present).

  Usage: Styles are applied based on these rules within the @-moz-document block.
```

--------------------------------

### Mozilla Format Import/Export

Source: https://github.com/openstyles/stylus/wiki/Editor

Details on how to import and export styles using the Mozilla format, which is compatible with userstyles.org and classic Stylish for Firefox. This format includes `@-moz-document` wrappers.

```APIDOC
Mozilla Format Userstyle:
  Description: A specific format for user styles, including `@-moz-document` wrappers, used for compatibility with userstyles.org and older Firefox extensions like Stylish.

  Import:
    Action: Paste Mozilla-format code into the editor.
    Steps:
      1. Click 'Import'.
      2. A popup window appears: 'Paste the Mozilla-format code'.
      3. Paste the full userstyle, including `@-moz-document` sections.
      4. Use 'Overwrite style' to replace current editor content.
      5. Use 'Append to style' to add to the end of current editor content.
    Example:
      @-moz-document url-prefix("http://www.example.com") {
        body {
          background-color: red !important;
        }
      }

  Export:
    Action: Copy the current style in Mozilla format.
    Steps:
      1. Click 'Export'.
      2. A popup window appears: 'Style in Mozilla format'.
      3. All content is initially selected.
      4. Copy the content using (Ctrl or ⌘) + C or right-click and select copy.
      5. Paste the style elsewhere.
    Note: This process is necessary to preserve `@-moz-document` rules when working in plain userstyle mode.
```

--------------------------------

### Enabling External CSS Loading via CSP Patching

Source: https://github.com/openstyles/stylus/wiki/FAQ

Explains how to enable styles that load external CSS files, which might be blocked by Content Security Policy (CSP). This involves enabling a specific setting within Stylus.

```text
If your styles load external CSS files (e.g., via `@import url`), you may need to enable CSP patching.
Go to Stylus icon -> Gear icon -> Advanced -> Tick 'Patch CSP to allow style assets'.
```

--------------------------------

### Webpack HTML Plugin Integration

Source: https://github.com/openstyles/stylus/blob/master/src/background.html

These are placeholders used by the html-webpack-plugin to dynamically inject script and link tags into the HTML file. They ensure that all necessary assets are correctly linked and loaded by the browser.

```ejs
<%= htmlWebpackPlugin.tags.headTags %> <%= htmlWebpackPlugin.tags.bodyTags %>
```

--------------------------------

### Dependency and Specification Updates

Source: https://github.com/openstyles/stylus/wiki/Log

Details updates to external libraries, linters, and adherence to new CSS specifications.

```changelog
Dependency & Specification Updates:
- Update stylelint to 16.5.0
- Update csslint
- Update parser
- Update locales, LESS and other dependencies
- [CSSLint] New `style-rule-nesting` rule to warn about new CSS nesting syntax
- Allow tag selectors in nested CSS per the newest spec
- stylelint 15.10.2

Description:
This snippet highlights updates to various dependencies and adherence to new specifications. It includes specific version bumps for stylelint and csslint, general updates for locales and LESS, the introduction of a new CSSLint rule for nesting syntax, and support for new CSS nesting specifications.
```

--------------------------------

### Document Navigation

Source: https://github.com/openstyles/stylus/wiki/Hotkey-shortcuts

Shortcuts for navigating to the beginning or end of a line, document, or screen.

```Stylus Editor
Home/End: Go to the beginning/end of the current line.
Ctrl+Home/End: Go to the beginning/end of the document.
Shift+PgUp/PgDn: Select text from the current position to the top/bottom of the screen.
Ctrl+Shift+Home/End: Select text from the current position to the beginning/end of the document.
```

--------------------------------

### Webpack HTML Plugin Integration

Source: https://github.com/openstyles/stylus/blob/master/src/offscreen.html

These are placeholders used by the html-webpack-plugin to dynamically inject script and link tags into the HTML file. They ensure that all necessary assets are correctly linked and loaded by the browser.

```ejs
<%= htmlWebpackPlugin.tags.headTags %> <%= htmlWebpackPlugin.tags.bodyTags %>
```

--------------------------------

### Stylus: @-moz-document with RegExp

Source: https://github.com/openstyles/stylus/wiki/Writing-styles

Demonstrates using the @-moz-document rule with regular expressions in Stylus to apply styles to specific URLs. Covers basic matching, optional characters, and negative lookaheads for precise targeting.

```css
@-moz-document regexp("http://www\.example\.(com|de|org)/images/.*")
```

```css
@-moz-document regexp("https?://www\.(example|test)\.com/")
```

```css
@-moz-document regexp("(?!https?://www\.example\.com/).*")
```

```css
@-moz-document regexp("(?!https://(www\.aaa\.com|www\.bbb\.com|ccc\.org)/).*")
```

```css
@-moz-document regexp("(?!https://(www\.(aaa|bbb)\.com|ccc\.org)/).*")
```

```css
@-moz-document regexp("http://www\.example\.com/(?!members).*")
```

--------------------------------

### UserStyles.org (uso) Preprocessor Mode

Source: https://github.com/openstyles/stylus/wiki/Writing-UserCSS

The `uso` preprocessor mode supports UserStyles.org syntax, including placeholders like `/*[[variable-name]]*/`. This mode is used when `@preprocessor uso` is set, or when `@preprocessor` is missing and variables are defined by `@var` or `@advanced`.

```stylus
@preprocessor uso
/*[[my-variable]]*/
```

--------------------------------

### Stylus: @-moz-document Rule Types and Syntax

Source: https://github.com/openstyles/stylus/wiki/Writing-styles

Details the different types of @-moz-document rules used in Stylus for applying CSS to specific web pages, including domain, url-prefix, url, and regexp. Explains syntax, case sensitivity, and escaping rules.

```APIDOC
Stylus @-moz-document Rules:

Rule Types:
  - domain: Matches all URLs on a domain or subdomain (case-insensitive for domain name, case-sensitive for path).
  - url-prefix: Matches URLs that start with the exact string (case-sensitive).
  - url: Matches exact URLs (case-sensitive).
  - regexp: Matches URLs using regular expressions (case-sensitive).

Syntax:
  @-moz-document <rule-type>(<value>) {
    /* CSS rules */
  }

  Multiple rules can be specified by separating them with commas.
  Quotes around URLs are recommended.
  Backslashes in RegExp values must be escaped (e.g., \\d).
  All letters in URLs are case-sensitive.

Example:
  @-moz-document url("https://www.example.com/test.html") {
      body {
          background-color: green !important;
      }
  }

  @-moz-document domain("images.example.com"),
                 url-prefix("https://example.com/images") {
      /* Styles for images.example.com and URLs starting with https://example.com/images */
  }
```