Migrate to the postcss-logical-properties-polyfill.

Update what can be updated.

.gitlab-ci.yml

@@ -1,6 +1,6 @@
 variables:
-  NODE_IMAGE: node:12-alpine
+  NODE_IMAGE: node:14-alpine
-  NODE_E2E_IMAGE: circleci/node:12-buster-browsers
+  NODE_E2E_IMAGE: circleci/node:14-buster-browsers
   DEPLOY_IMAGE: docksal/ssh-agent:1.3
   # To cache both npm modules and Cypress binary we use environment variables
   # to point at the folders we can list as paths in "cache" job settings

package.json

@@ -144,14 +144,15 @@
         "lint-staged": "^10.2.4",
         "loader-utils": "^2.0.0",
         "mini-css-extract-plugin": "^0.9.0",
-        "node-sass": "^4.14.1",
+        "node-sass": "^6.0.1",
-        "postcss-bidirection": "https://github.com/erickskrauch/postcss-bidirection.git#iss_23",
+        "postcss": "^8.2.8",
-        "postcss-import": "^12.0.1",
+        "postcss-import": "^14.0.0",
-        "postcss-loader": "^3.0.0",
+        "postcss-loader": "^4.2.0",
-        "postcss-scss": "^2.1.1",
+        "postcss-logical-properties-polyfill": "^0.1.0",
+        "postcss-scss": "^3.0.5",
         "prettier": "^2.0.5",
         "raw-loader": "^4.0.1",
-        "sass-loader": "^8.0.2",
+        "sass-loader": "^10.2.0",
         "sinon": "^9.0.2",
         "sitemap-webpack-plugin": "^0.8.0",
         "speed-measure-webpack-plugin": "^1.3.3",

packages/app/components/auth/chooseAccount/accountSwitcher.scss

@@ -83,14 +83,6 @@ $border: 1px solid lighter($black);
     line-height: 35px;
 
     transition: color 0.25s, inset-inline-start 0.5s;
-    // TODO: right now transition property doesn't support the bidirectional value.
-    //       See https://github.com/gasolin/postcss-bidirection/issues/25.
-    // noinspection CssOverwrittenProperties Graceful degradation
-    transition: color 0.25s, left 0.5s;
-
-    html[dir='rtl'] & {
-        transition: color 0.25s, right 0.5s;
-    }
 
     .item:hover & {
         color: #aaa;

packages/app/components/ui/form/dropdown.scss

@@ -63,14 +63,6 @@ $dropdownPadding: 15px;
     top: 16px;
     font-size: 17px;
     transition: inset-inline-end 0.3s cubic-bezier(0.23, 1, 0.32, 1); // easeOutQuint
-    // TODO: right now transition property doesn't support the bidirectional value.
-    //       See https://github.com/gasolin/postcss-bidirection/issues/25.
-    // noinspection CssOverwrittenProperties Graceful degradation
-    transition: right 0.3s cubic-bezier(0.23, 1, 0.32, 1);
-
-    html[dir='rtl'] & {
-        transition: left 0.3s cubic-bezier(0.23, 1, 0.32, 1);
-    }
 
     .dropdown:hover & {
         inset-inline-end: $dropdownPadding - 5px;

postcss.config.js

@@ -6,7 +6,7 @@ const fileCache = {};
 const isProduction = process.argv.some((arg) => arg === '-p');
 const rootPath = path.resolve('./src');
 
-module.exports = ({ webpack: loader }) => ({
+module.exports = ({ webpackLoaderContext: loader }) => ({
     syntax: 'postcss-scss',
     plugins: {
         'postcss-import': {
@@ -47,7 +47,7 @@ module.exports = ({ webpack: loader }) => ({
                 return defaultLoad(filename, importOptions);
             })(require('postcss-import/lib/load-content')),
         },
-        'postcss-bidirection': {},
+        'postcss-logical-properties-polyfill': {},
         // TODO: for some reason cssnano strips out @mixin declarations
         // cssnano: {
         //     /**

webpack.config.js

@@ -156,9 +156,7 @@ const webpackConfig = {
                     {
                         loader: 'postcss-loader',
                         options: {
-                            ident: 'postcss',
                             sourceMap: !isProduction,
-                            config: { path: __dirname },
                         },
                     },
                 ],