Update dev practices

.github/workflows/test.yml

@@ -0,0 +1,52 @@
+name: Test
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+permissions:
+  contents: read
+jobs:
+  full:
+    name: Node.js Latest Full
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout the repository
+        uses: actions/checkout@v4
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8
+      - name: Install Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20
+          cache: pnpm
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile --ignore-scripts
+      - name: Run tests
+        run: pnpm test
+
+  short:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version:
+          - 18
+    name: Node.js ${{ matrix.node-version }} Quick
+    steps:
+      - name: Checkout the repository
+        uses: actions/checkout@v4
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8
+      - name: Install Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: pnpm
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile --ignore-scripts
+      - name: Run unit tests
+        run: pnpm unit

.gitignore

@@ -1,3 +1,3 @@
 node_modules/
-npm-debug.log
-yarn-error.log
+
+coverage/

.npmignore

@@ -1,9 +1,2 @@
-.editorconfig
-
-node_modules/
-npm-debug.log
-yarn-error.log
-yarn.lock
-
 *.test.js
-.travis.yml
+coverage/

CHANGELOG.md

@@ -0,0 +1,15 @@
+# Change Log
+This project adheres to [Semantic Versioning](http://semver.org/).
+
+## 0.6
+* Moved to PostCSS 7.
+
+## 0.3
+* Renamed from `postcss-messages` to `postcss-browser-reporter`.
+
+## 0.2.0
+* Updated styles of displayed warnings.
+* Added options for overriding styles and selector.
+
+## 0.1
+* Initial release.

README.md

@@ -1,57 +1,62 @@
-# PostCSS Browser Reporter [![Build Status](https://travis-ci.org/postcss/postcss-browser-reporter.svg)](https://travis-ci.org/postcss/postcss-browser-reporter)
+# PostCSS Browser Reporter
 
-> [PostCSS] plugin to report warning messages right in your browser.
+[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-browser-reporter – warnings from other postcss plugins in your browser](http://postcss.github.io/postcss-browser-reporter/screenshot.png)
 
+
 ## Usage
 
-Put this plugin after all plugins if you want to cover all possible warnings:
+**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
-postcss([
-  require('other-plugin'),
-  require('postcss-browser-reporter')
-])
+module.exports = {
+  plugins: [
++   require('postcss-browser-reporter'),
+    require('autoprefixer')
+  ]
+}
 ```
 
-### Options
+[official docs]: https://github.com/postcss/postcss#usage
 
-#### `selector` (`{String}`, default: `html::before`)
+
+## Options
+
+### `selector` (`{String}`, default: `html::before`)
 
 You can override selector that will be used to display messages:
 
 ```js
-var messages = require('postcss-browser-reporter')
-postcss([
-  messages({
+  require('postcss-browser-reporter')({
     selector: 'body:before'
   })
-])
 ```
 
-#### `styles` (`{Object}`, default: opinionated styles)
+### `styles` (`{Object}`, default: opinionated styles)
 
 You can override default styles applied to the selector:
 
 ```js
-var messages = require('postcss-browser-reporter')
-postcss([
-  messages({
+  require('postcss-browser-reporter')({
     styles: {
       color: 'gray',
       'text-align': 'center'
     }
   })
-])
 ```
-
-See [PostCSS] docs for examples for your environment.
-
-## License
-
-The MIT License
-
-[PostCSS]: https://github.com/postcss/postcss

index.js

@@ -1,17 +1,22 @@
+let { relative } = require('node:path')
+
 function warningToString(warning) {
-  let str = '';
+  let str = ''
   if (warning.node && warning.node.type !== 'root') {
-    str += warning.node.source.start.line + ':' +
-      warning.node.source.start.column + '\t';
+    str +=
+      warning.node.source.start.line +
+      ':' +
+      warning.node.source.start.column +
+      '\t'
   }
-  str += warning.text;
+  str += warning.text
   if (warning.plugin) {
-    str += ' [' + warning.plugin + ']';
+    str += ' [' + warning.plugin + ']'
   }
-  return str;
+  return str
 }
 
-const defaultStyles = {
+const DEFAULT_STYLES = {
   'display': 'block',
   'z-index': '1000',
 
@@ -22,7 +27,7 @@ const defaultStyles = {
   'right': '0',
 
   'font-size': '.9em',
-  'padding': '1.5em 1em 1.5em 4.5em', /* padding + background image padding */
+  'padding': '1.5em 1em 1.5em 4.5em' /* padding + background image padding */,
 
   /* background */
   'color': 'white',
@@ -39,56 +44,59 @@ const defaultStyles = {
   'white-space': 'pre-wrap',
   'font-family': 'Menlo, Monaco, monospace',
   'text-shadow': '0 1px #A82734'
-};
+}
 
 const plugin = (opts = {}) => {
-  if (opts?.disabled === true) {
-    return function () { };
+  if (opts.disabled) {
+    return function () {}
   }
 
-  const styles = (opts?.styles ?? defaultStyles);
+  let styles = opts.styles ?? DEFAULT_STYLES
 
   return {
-    postcssPlugin: 'postcss-browser-reporter',
     OnceExit(root, { result }) {
-      const warnings = result.warnings();
+      let warnings = result.warnings()
       if (warnings.length === 0) {
-        return;
+        return
       }
 
-      let selector = 'html::before';
+      let selector = 'html::before'
       if (opts?.selector) {
-        selector = opts.selector;
+        selector = opts.selector
       } else {
-        root.walkRules(function (rule) {
-          if (rule.selector == 'html::before' || rule.selector == 'html:before') {
-            selector = 'html::after';
+        root.walkRules(rule => {
+          if (
+            rule.selector === 'html::before' ||
+            rule.selector === 'html:before'
+          ) {
+            selector = 'html::after'
           }
-        });
+        })
       }
 
-      root.append({ selector: selector });
+      root.append({ selector })
       for (let style in styles) {
-        if (styles.hasOwnProperty(style)) {
-          root.last.append({ prop: style, value: styles[style] });
-        }
+        root.last.append({ prop: style, value: styles[style] })
       }
 
-      let content = warnings.map(function (message) {
-        return warningToString(message).replace(/"/g, '\\"');
-      });
+      let content = warnings.map(message => {
+        return warningToString(message).replace(/"/g, '\\"')
+      })
 
       if (root.source.input.file) {
-        content.unshift(require('path').relative(process.cwd(), root.source.input.file).replace(/\\/g, '/'));
+        content.unshift(
+          relative(process.cwd(), root.source.input.file).replace(/\\/g, '/')
+        )
       }
 
-      content = content.join('\\00000a');
+      content = content.join('\\00000a')
 
-      root.last.append({ prop: 'content', value: `"${content}"` });
-    }
+      root.last.append({ prop: 'content', value: `"${content}"` })
+    },
+    postcssPlugin: 'postcss-browser-reporter'
   }
 }
 
-plugin.postcss = true;
+plugin.postcss = true
 
-module.exports = plugin;
+module.exports = plugin