chore!: upgrade to PostCSS 8 (#127)

* Upgrade to PostCSS 8

* Use rewiremock to de-randomize random ids for snapshots

Author: onigoetz

package-lock.json

@@ -31,23 +31,27 @@
   ],
   "dependencies": {
     "color-name": "^1.1.4",
-    "is-url-superb": "^4.0.0",
-    "postcss": "^7.0.5"
+    "is-url-superb": "^4.0.0"
   },
   "devDependencies": {
-    "ava": "^3.5.1",
+    "ava": "^3.12.1",
     "chalk": "^4.1.0",
-    "eslint-config-shellscape": "^2.0.2",
-    "globby": "^11.0.0",
-    "lint-staged": "^10.0.8",
-    "nyc": "^15.0.0",
+    "eslint-config-shellscape": "^2.1.0",
+    "globby": "^11.0.1",
+    "lint-staged": "^10.4.0",
+    "nyc": "^15.1.0",
     "perfy": "^1.1.5",
-    "postcss-value-parser": "^4.0.0",
+    "postcss": "^8.0.9",
+    "postcss-value-parser": "^4.1.0",
     "pre-commit": "^1.2.2",
-    "prettier": "^2.0.1",
+    "prettier": "^2.1.2",
+    "rewiremock": "^3.14.3",
     "strip-ansi": "^6.0.0",
     "text-table": "^0.2.0"
   },
+  "peerDependencies": {
+    "postcss": "^8.0.9"
+  },
   "keywords": [
     "css",
     "less",
@@ -62,7 +66,11 @@
   "ava": {
     "files": [
       "!**/fixtures/**",
-      "!**/helpers/**"
+      "!**/helpers/**",
+      "!**/rewiremock.js"
+    ],
+    "require": [
+      "./test/rewiremock.js"
     ]
   },
   "lint-staged": {

package.json

@@ -0,0 +1,12 @@
+const rewiremock = require('rewiremock/node');
+
+// Configure and enable Rewiremock
+rewiremock.overrideEntryPoint(module);
+rewiremock.enable();
+
+// Override the nanoid/non-secure module to produce a predictable nonrandom ID
+// This is necessary because the Input module of PostCSS uses this to generate
+// Random IDs and this breaks snapshots since these are different at each run.
+rewiremock('nanoid/non-secure').with({ nanoid: () => 1 });
+
+module.exports = rewiremock;

test/rewiremock.js

@@ -28,14 +28,18 @@ Generated by [AVA](https://avajs.dev).
         source: {
           input: Input {
             css: '  @word ',
+            fromOffset: Function {},
             hasBOM: false,
             id: '<input css 1>',
           },
           start: {
             column: 3,
             line: 1,
+            offset: 2,
           },
         },
         type: 'atword',
+        [Symbol(isComplete)]: false,
+        [Symbol(isClean)]: false,
       },
     ]