userstyle-dev-server

Prerequisite

- Tampermonkey
- Chrome Extension
- Firefox Extension
- Stylus
- Chrome Extension
- Firefox Extension

Or similiar Extension, which can run javascript code. (Setting up a websocket to notify about style changes)

$3

npm i -D userstyle-dev-server

Usage (Development)

1. Create a index-File for instance style.scss, where you import all your partial scss-files.
2. Create a npm script userstyle-dev-server ./your/index/file.scss
3. Copy client code into a Tampermonkey userscript, so that websocket can be notified about changes in the scss code (if wanted change match-pattern)
``
// ==UserScript==
// @name UserStyle File-Reloader for Development
// @match https:///
// @require http://127.0.0.1:10000/client.js
// ==/UserScript==
`
4. Run your npm script and enjoy hot reloading of your userstyles

Usage (Build Output)

1. Create a build-File (for instance userStyle.definition.scss), which contains your userstyle declaration comment and import styles (see example below)
2. Create a npm script userstyle-dev-server --build ./src/userStyle.definition.scss
3. Run build script
4. (Optional) Create a Link to your built file in your Readme, so you can install your styles from the repo.

$3

`
/* ==UserStyle==
@name UserStyleName
@author Author
@version 1.0.0
==/UserStyle== */

@-moz-document regexp("https://google.com") {
@import 'style';
}
``

Options

--help, -h Print help
--port, -p Provide port for server, given port and port+1 will be used
Default: 10000 and 10001
--build, -b Build the output file to dist folder