Start anew on PostCSS 8 update

packages/crafty-preset-postcss/package.json

@@ -17,14 +17,14 @@
     "@swissquote/stylelint-config-swissquote": "1.14.0",
     "css-loader": "5.1.2",
     "end-of-stream": "1.4.4",
-    "gulp-postcss": "8.0.0",
+    "gulp-postcss": "9.0.0",
     "gulp-rename": "2.0.0",
     "gulp-sourcemaps": "3.0.0",
     "mini-css-extract-plugin": "1.3.9",
-    "postcss": "7.0.35",
+    "postcss": "8.2.8",
     "postcss-loader": "4.2.0",
-    "postcss-reporter": "6.0.1",
-    "postcss-scss": "2.1.1",
+    "postcss-reporter": "7.0.2",
+    "postcss-scss": "3.0.5",
     "resolve-from": "5.0.0",
     "stream-exhaust": "1.0.2",
     "style-loader": "2.0.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/postcss-swissquote-preset/package.json

@@ -12,49 +12,49 @@
     "lint": "yarn node ../crafty-preset-eslint/src/commands/jsLint.js --preset recommended --preset node '*.js' src"
   },
   "dependencies": {
-    "autoprefixer": "9.8.6",
+    "autoprefixer": "10.2.5",
     "browserslist": "4.16.3",
     "caniuse-api": "3.0.0",
     "debug": "^4.1.0",
     "pixrem": "5.0.0",
     "pleeease-filters": "4.0.0",
-    "postcss": "7.0.35",
+    "postcss": "8.2.8",
     "postcss-advanced-variables": "3.0.1",
     "postcss-assets": "5.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": "7.0.0",
     "postcss-color-hsl": "2.0.0",
     "postcss-color-hwb": "3.0.0",
     "postcss-color-rebeccapurple": "6.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-csso": "5.0.0",
+    "postcss-custom-media": "8.0.0",
     "postcss-custom-properties": "7.0.0",
-    "postcss-custom-selectors": "5.1.2",
+    "postcss-custom-selectors": "6.0.0",
     "postcss-dir-pseudo-class": "5.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.2",
+    "postcss-import": "14.0.0",
+    "postcss-initial": "4.0.0",
     "postcss-logical": "4.0.2",
-    "postcss-media-minmax": "4.0.0",
-    "postcss-nested": "4.2.3",
+    "postcss-media-minmax": "5.0.0",
+    "postcss-nested": "5.0.5",
     "postcss-nesting": "7.0.1",
     "postcss-property-lookup": "2.0.0",
     "postcss-pseudo-class-any-link": "6.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.2",
     "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.1"
   },
   "peerDependencies": {
     "caniuse-lite": "^1.0.30000697"

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

@@ -103,6 +103,7 @@ module.exports = function(config) {
 
   processors
     .processor("postcss-selector-not")
+    .init(options => require("postcss-selector-not").default(options))
     .enableIfUnsupported(["css-not-sel-list"], config.browsers);
 
   processors.processor("postcss-pseudo-class-any-link");
@@ -143,17 +144,34 @@ module.exports = function(config) {
   });
 
   // CSSO :: Minify and Optimize CSS
-  processors.processor("postcss-csso").enableIf(() => env === "production");
+  processors
+    .processor("postcss-csso")
+    .init(options => {
+      // Inline the index.js of postcss-csso until https://github.com/lahmatiy/postcss-csso/pull/20 is fixed
+      // FIXME https://github.com/lahmatiy/postcss-csso/pull/20
+      const { compress } = require("csso").syntax;
+      const postcssToCsso = require("postcss-csso/lib/postcssToCsso.js");
+      const cssoToPostcss = require("postcss-csso/lib/cssoToPostcss.js");
+
+      return {
+        postcssPlugin: "postcss-csso",
+        OnceExit(root, { result, postcss }) {
+          result.root = cssoToPostcss(
+            compress(postcssToCsso(root), options).ast,
+            postcss
+          );
+        }
+      };
+    })
+    .enableIf(() => env === "production");
 
   // Report problems encountered during build
   processors.processor("postcss-reporter").setOptions({
     clearReportedMessages: true
   });
 
   // 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-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": "3.0.5",
     "postcss-selector-parser": "6.0.4",
     "postcss-value-parser": "4.1.0",
     "prettier": "^1.19.1",
@@ -20,7 +20,7 @@
   },
   "devDependencies": {
     "jest": "26.6.3",
-    "postcss": "7.0.35",
+    "postcss": "8.2.8",
     "stylelint": "13.12.0"
   },
   "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;
         }