Update to PostCSS 8

packages/crafty-preset-postcss/package.json

@@ -17,14 +17,14 @@
     "@swissquote/stylelint-config-swissquote": "1.15.0",
     "css-loader": "6.3.0",
     "end-of-stream": "1.4.4",
-    "gulp-postcss": "8.0.0",
+    "gulp-postcss": "9.0.1",
     "gulp-rename": "2.0.0",
     "gulp-sourcemaps": "3.0.0",
     "mini-css-extract-plugin": "2.3.0",
-    "postcss": "7.0.38",
-    "postcss-loader": "4.3.0",
-    "postcss-reporter": "6.0.1",
-    "postcss-scss": "2.1.1",
+    "postcss": "8.3.8",
+    "postcss-loader": "6.1.1",
+    "postcss-reporter": "7.0.3",
+    "postcss-scss": "4.0.1",
     "resolve-from": "5.0.0",
     "stream-exhaust": "1.0.2",
     "style-loader": "3.3.0",

packages/crafty-preset-postcss/src/lint_reporter.js

@@ -1,5 +1,4 @@
 const util = require("postcss-reporter/lib/util");
-const postcss = require("postcss");
 const formatter = require("stylelint/lib/formatters/stringFormatter");
 
 function hasError(messages) {
@@ -17,70 +16,70 @@ function shouldThrowError(sources) {
   return sources.length && sources.some(entry => entry.errored);
 }
 
-function reporter(opts) {
+module.exports = opts => {
   const options = opts || {};
 
   let shouldThrow = false;
   const completeReport = [];
 
-  function innerReporter(css, result) {
-    const resultSource = result.root.source
-      ? result.root.source.input.file || result.root.source.input.id
-      : "";
+  return {
+    postcssPlugin: "stylelint-reporter",
+    OnceExit(root, { result }) {
+      const messagesToLog = result.messages;
 
-    const messagesToLog = result.messages;
-    const sourceGroupedMessages = messagesToLog.reduce(
-      (innerResult, message) => {
-        const key = util.getLocation(message).file || resultSource;
-        if (!message.severity) {
-          message.severity = message.type || "warning";
-        }
+      const resultSource = result.root.source
+        ? result.root.source.input.file || result.root.source.input.id
+        : "";
 
-        if (hasOwnProperty.call(innerResult, key)) {
-          innerResult[key].push(message);
-        } else {
-          innerResult[key] = [message];
-        }
-        return innerResult;
-      },
-      {}
-    );
+      const sourceGroupedMessages = messagesToLog.reduce(
+        (innerResult, message) => {
+          const key = util.getLocation(message).file || resultSource;
+          if (!message.severity) {
+            message.severity = message.type || "warning";
+          }
 
-    const prepared = [];
-    Object.keys(sourceGroupedMessages).forEach(source => {
-      const messages = sourceGroupedMessages[source];
-      prepared.push({
-        warnings: messages,
-        source,
-        deprecations: [],
-        invalidOptionWarnings: [],
-        errored: hasError(messages)
+          if (hasOwnProperty.call(innerResult, key)) {
+            innerResult[key].push(message);
+          } else {
+            innerResult[key] = [message];
+          }
+          return innerResult;
+        },
+        {}
+      );
+
+      const prepared = [];
+      Object.keys(sourceGroupedMessages).forEach(source => {
+        const messages = sourceGroupedMessages[source];
+        prepared.push({
+          warnings: messages,
+          source,
+          deprecations: [],
+          invalidOptionWarnings: [],
+          errored: hasError(messages)
+        });
       });
-    });
 
-    if (options.clearReportedMessages) {
-      result.messages = [];
-    }
+      if (options.clearReportedMessages) {
+        result.messages = [];
+      }
 
-    const report = formatter(prepared).trim();
-    if (report !== "") {
-      completeReport.push(report);
-    }
+      const report = formatter(prepared).trim();
+      if (report !== "") {
+        completeReport.push(report);
+      }
 
-    if (options.throwError && shouldThrowError(prepared)) {
-      shouldThrow = true;
-    }
-  }
+      if (options.throwError && shouldThrowError(prepared)) {
+        shouldThrow = true;
+      }
+    },
+    report() {
+      if (completeReport.length) {
+        console.log(`\n${completeReport.join("\n\n")}\n`);
+      }
 
-  innerReporter.report = function() {
-    if (completeReport.length) {
-      console.log(`\n${completeReport.join("\n\n")}\n`);
+      return !shouldThrow;
     }
-
-    return !shouldThrow;
   };
-
-  return innerReporter;
-}
-
-module.exports = postcss.plugin("stylelint-reporter", reporter);
+};
+module.exports.postcss = true;

packages/integration/__tests__/__snapshots__/crafty-preset-postcss-gulp.js.snap

@@ -236,11 +236,11 @@ exports[`Experiment with all CSS 2`] = `
 
 /* Help with RTL languages (postcss-logical, postcss-dir-pseudo-class) */
 
-.Banner:dir(ltr) {
+[dir=\\"ltr\\"] .Banner {
     padding-left: 20px;
     padding-right: 40px; }
 
-.Banner:dir(rtl) {
+[dir=\\"rtl\\"] .Banner {
     padding-right: 20px;
     padding-left: 40px; }
 

packages/postcss-swissquote-preset/package.json

@@ -16,48 +16,48 @@
     "browserslist": "4.17.2",
     "caniuse-api": "3.0.0",
     "debug": "^4.1.0",
-    "postcss": "7.0.38"
+    "postcss": "8.3.8"
   },
   "devDependencies": {
-    "autoprefixer": "9.8.7",
+    "autoprefixer": "10.3.6",
     "pixrem": "5.0.0",
     "pleeease-filters": "4.0.0",
     "postcss-advanced-variables": "3.0.1",
-    "postcss-assets": "5.0.0",
+    "postcss-assets": "6.0.0",
     "postcss-atroot": "0.1.3",
-    "postcss-attribute-case-insensitive": "4.0.1",
-    "postcss-calc": "7.0.5",
+    "postcss-attribute-case-insensitive": "5.0.0",
+    "postcss-calc": "8.0.0",
     "postcss-color-function": "4.1.0",
     "postcss-color-gray": "5.0.0",
-    "postcss-color-hex-alpha": "6.0.0",
+    "postcss-color-hex-alpha": "8.0.0",
     "postcss-color-hsl": "2.0.0",
     "postcss-color-hwb": "3.0.0",
-    "postcss-color-rebeccapurple": "6.0.0",
+    "postcss-color-rebeccapurple": "7.0.0",
     "postcss-color-rgb": "2.0.0",
     "postcss-color-rgba-fallback": "4.0.0",
-    "postcss-csso": "4.0.0",
-    "postcss-custom-media": "7.0.8",
-    "postcss-custom-properties": "10.0.0",
-    "postcss-custom-selectors": "5.1.2",
-    "postcss-dir-pseudo-class": "5.0.0",
+    "postcss-csso": "5.0.1",
+    "postcss-custom-media": "8.0.0",
+    "postcss-custom-properties": "11.0.0",
+    "postcss-custom-selectors": "6.0.0",
+    "postcss-dir-pseudo-class": "6.0.0",
     "postcss-filter-gradient": "1.0.0",
-    "postcss-font-family-system-ui": "4.3.0",
-    "postcss-font-variant": "4.0.1",
+    "postcss-font-family-system-ui": "5.0.0",
+    "postcss-font-variant": "5.0.0",
     "postcss-image-set-polyfill": "1.0.0",
-    "postcss-import": "12.0.1",
-    "postcss-initial": "3.0.4",
-    "postcss-logical": "4.0.2",
-    "postcss-media-minmax": "4.0.0",
-    "postcss-nested": "4.2.3",
-    "postcss-nesting": "7.0.1",
-    "postcss-property-lookup": "2.0.0",
-    "postcss-pseudo-class-any-link": "6.0.0",
+    "postcss-import": "14.0.2",
+    "postcss-initial": "4.0.0",
+    "postcss-logical": "5.0.0",
+    "postcss-media-minmax": "5.0.0",
+    "postcss-nested": "5.0.6",
+    "postcss-nesting": "8.0.1",
+    "postcss-property-lookup": "3.0.0",
+    "postcss-pseudo-class-any-link": "7.0.0",
     "postcss-pseudoelements": "5.0.0",
-    "postcss-replace-overflow-wrap": "3.0.0",
-    "postcss-reporter": "6.0.1",
+    "postcss-replace-overflow-wrap": "4.0.0",
+    "postcss-reporter": "7.0.3",
     "postcss-selector-matches": "4.0.0",
-    "postcss-selector-not": "4.0.1",
-    "postcss-url": "8.0.0"
+    "postcss-selector-not": "5.0.0",
+    "postcss-url": "10.1.3"
   },
   "peerDependencies": {
     "caniuse-lite": "^1.0.30000697"

packages/postcss-swissquote-preset/src/features.js

@@ -183,9 +183,7 @@ module.exports = function(config) {
     });
 
   // List the used plugins (sends output to debug)
-  processors
-    .processor("plugin-list")
-    .module(require.resolve("./postcss-plugin-list"));
+  processors.processor("plugin-list").module("./postcss-plugin-list");
 
   return processors;
 };

packages/postcss-swissquote-preset/src/postcss-packages.js

@@ -151,7 +151,7 @@ function postcssSelectorMatches() {
 }
 
 function postcssSelectorNot() {
-  return require("postcss-selector-not");
+  return require("postcss-selector-not").default;
 }
 
 function postcssUrl() {

packages/postcss-swissquote-preset/src/postcss-plugin-list.js

@@ -1,7 +1,6 @@
-const postcss = require("postcss");
 const debug = require("debug")("postcss-swissquote-preset");
 
-module.exports = postcss.plugin("plugin-list", () => {
+module.exports = () => {
   const listed = [];
 
   function reportOnPlugin(plugin) {
@@ -15,8 +14,12 @@ module.exports = postcss.plugin("plugin-list", () => {
     return `-  ${plugin.postcssPlugin} ${isNewPlugin ? " (duplicate)" : ""}`;
   }
 
-  return (source, result) => {
-    const plugins = result.processor.plugins.map(reportOnPlugin);
-    debug("Used plugins:", plugins.join("\n"));
+  return {
+    postcssPlugin: "plugin-list",
+    Once(root, { result }) {
+      const plugins = result.processor.plugins.map(reportOnPlugin);
+      debug("Used plugins:", plugins.join("\n"));
+    }
   };
-});
+};
+module.exports.postcss = true;

packages/stylelint-config-swissquote/package.json

@@ -10,7 +10,7 @@
   "main": "index.js",
   "dependencies": {
     "postcss-resolve-nested-selector": "0.1.1",
-    "postcss-scss": "2.1.1",
+    "postcss-scss": "4.0.1",
     "postcss-selector-parser": "6.0.6",
     "postcss-value-parser": "4.1.0",
     "prettier": "^1.19.1",
@@ -20,7 +20,7 @@
   },
   "devDependencies": {
     "jest": "27.2.4",
-    "postcss": "7.0.38",
+    "postcss": "8.3.8",
     "stylelint": "13.13.1"
   },
   "scripts": {

packages/stylelint-config-swissquote/src/rules/no-negative-var.js

@@ -1,6 +1,5 @@
 const declarationValueIndex = require("stylelint/lib/utils/declarationValueIndex");
 const isStandardSyntaxFunction = require("stylelint/lib/utils/isStandardSyntaxFunction");
-const postcss = require("postcss");
 const report = require("stylelint/lib/utils/report");
 const valueParser = require("postcss-value-parser");
 
@@ -26,7 +25,8 @@ const rule = function() {
           return;
         }
 
-        if (postcss.vendor.unprefixed(node.value) !== negativeVar) {
+        // Remove prefixes and check if it's a negativeVar
+        if (node.value.replace(/^-\w+-/, "") !== negativeVar) {
           return;
         }