https://github.com/postcss/postcss-browser-reporter
Plugin to display warning messages right in your browser
https://github.com/postcss/postcss-browser-reporter
Last synced: 9 months ago
JSON representation
Plugin to display warning messages right in your browser
- Host: GitHub
- URL: https://github.com/postcss/postcss-browser-reporter
- Owner: postcss
- License: mit
- Created: 2015-03-29T19:49:38.000Z (almost 11 years ago)
- Default Branch: main
- Last Pushed: 2023-11-07T04:47:54.000Z (about 2 years ago)
- Last Synced: 2024-10-29T14:38:20.466Z (about 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 261 KB
- Stars: 75
- Watchers: 7
- Forks: 13
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# PostCSS Browser Reporter
[PostCSS] plugin to report warning messages right in your browser.
If a plugin before this one is throwing a warning, this plugin will append warning messages to `html:before`.

[PostCSS]: https://github.com/postcss/postcss
## Usage
**Step 1:** Install plugin:
```sh
npm install --save-dev postcss postcss-browser-reporter
```
**Step 2:** Check your project for existing PostCSS config: `postcss.config.js`
in the project root, `"postcss"` section in `package.json`
or `postcss` in bundle config.
If you do not use PostCSS, add it according to [official docs]
and set this plugin in settings.
**Step 3:** Add the plugin to plugins list:
```js
module.exports = {
plugins: [
+ require('postcss-browser-reporter'),
require('autoprefixer')
]
}
```
[official docs]: https://github.com/postcss/postcss#usage
## Options
### `selector`
You can override selector that will be used to display messages:
```js
require('postcss-browser-reporter')({
selector: 'body:before'
})
```
Type: `String`. Default: `html::before`.
### `styles`
You can override default styles applied to the selector:
```js
require('postcss-browser-reporter')({
styles: {
color: 'gray',
'text-align': 'center'
}
})
```
Type: `Object`. Default: opinionated styles.