Support windows

package.json

@@ -6,12 +6,12 @@
     },
     "scripts": {
         "clean": "rimraf dist",
-        "build": "NODE_ENV=production NODE_PATH=. npm run clean && webpack --mode production",
+        "build": "cross-env NODE_ENV=production NODE_PATH=. npm run clean && webpack --mode production",
         "format": "prettier --write \"src/**/*.{ts,tsx}\" \"webpack/**/*.ts\"",
         "check-types": "tsc --noEmit",
         "start:webpack": "webpack --mode=development --watch",
         "start:server": "nodemon index.js --watch dist/server.js",
-        "start": "NODE_ENV=development npm-run-all --print-label --parallel start:*",
+        "start": "cross-env NODE_ENV=development npm-run-all --print-label --parallel start:*",
         "docker:build": "docker build -t $npm_package_name .",
         "docker:run": "docker run -p 9001:80 $npm_package_name",
         "docker": "npm-run-all docker:*",
@@ -32,7 +32,7 @@
         "connected-react-router": "6.3.2",
         "express": "4.17.1",
         "history": "4.9.0",
-        "immer": "6.0.3",
+        "immer": "8.0.2",
         "react": "17.0.1",
         "react-dom": "17.0.1",
         "react-helmet": "6.1.0",
@@ -81,8 +81,9 @@
         "@types/webpack-node-externals": "2.5.0",
         "autoprefixer": "9.4.10",
         "babel-loader": "8.0.5",
-        "compression-webpack-plugin": "2.0.0",
-        "copy-webpack-plugin": "5.1.1",
+        "compression-webpack-plugin": "7.1.2",
+        "copy-webpack-plugin": "8.0.0",
+        "cross-env": "7.0.3",
         "css-hot-loader": "1.4.4",
         "css-loader": "2.1.1",
         "cssnano": "4.1.10",
@@ -96,7 +97,6 @@
         "postcss": "7.0.14",
         "postcss-custom-media": "7.0.7",
         "postcss-import": "12.0.1",
-        "postcss-import-alias-resolver": "0.1.1",
         "postcss-load-config": "2.0.0",
         "postcss-loader": "3.0.0",
         "postcss-modules": "1.4.1",

src/components/App/App.css

@@ -1,9 +1,10 @@
-@import '~styles/base.css';
+@import 'base.css';
 
 .app {
     width: 100%;
     color: #000;
-    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
+    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
+        Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
 
     display: flex;
 

src/components/Header/Header.css

@@ -1,4 +1,4 @@
-@import '~styles/media.css';
+@import 'media.css';
 
 .header {
     max-width: 800px;
@@ -10,7 +10,7 @@
 }
 
 .header__logo {
-    background-image: url("./logo.jpg");
+    background-image: url('./logo.jpg');
     width: 100px;
     height: 120px;
     background-position: center;
@@ -29,11 +29,11 @@
     font-size: 16px;
     text-decoration: none;
     text-transform: uppercase;
-    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
+    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
 
     &:hover {
         color: #aaa;
-     }
+    }
 
     &_active {
         color: #aaa;

src/components/Page/Page.css

@@ -1,44 +1,44 @@
-@import '~styles/media.css';
+@import 'media.css';
 
 .page {
-  flex: 1 0 auto;
-  flex-grow: 1;
+    flex: 1 0 auto;
+    flex-grow: 1;
 
-  &_align_center {
-    text-align: center;
-  }
+    &_align_center {
+        text-align: center;
+    }
 
-  &__container {
-    max-width: 760px;
-    margin: 25px auto 80px;
+    &__container {
+        max-width: 760px;
+        margin: 25px auto 80px;
 
-    @media (--viewport-mobile) {
-      padding: 0 15px;
-    }
+        @media (--viewport-mobile) {
+            padding: 0 15px;
+        }
 
-    &_clear::after {
-      content: "";
-      clear: both;
-      display: table;
+        &_clear::after {
+            content: '';
+            clear: both;
+            display: table;
+        }
     }
-  }
 
-  &__container-more {
-    margin-top: 40px;
-  }
+    &__container-more {
+        margin-top: 40px;
+    }
 
-  &__container h2 {
-    text-align: left;
-    padding-left: 10px;
+    &__container h2 {
+        text-align: left;
+        padding-left: 10px;
 
-    @media (--viewport-mobile) {
-      text-align: center;
-    }
+        @media (--viewport-mobile) {
+            text-align: center;
+        }
 
-    > .rect {
-      @media (--viewport-mobile) {
-        margin: 0 auto;
-      }
+        > .rect {
+            @media (--viewport-mobile) {
+                margin: 0 auto;
+            }
+        }
     }
-  }
 }

src/components/Sneakers/Sneakers.css

@@ -1,4 +1,4 @@
-@import '~styles/media.css';
+@import 'media.css';
 
 .sneakers a {
     color: inherit;

src/components/SneakersList/SneakersList.css

@@ -1,15 +1,15 @@
-@import '~styles/media.css';
+@import 'media.css';
 
 .sneakers-list-stub {
-  padding-top: 8px;
+    padding-top: 8px;
 }
 
 .sneakers-list {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
 
-  @media (--viewport-mobile) {
-    justify-content: space-around;
-  }
+    @media (--viewport-mobile) {
+        justify-content: space-around;
+    }
 }

webpack/loaders/css.ts

@@ -2,17 +2,11 @@ const path = require('path');
 const postcssNested = require('postcss-nested');
 const postcssCustomMedia = require('postcss-custom-media');
 const postcssImport = require('postcss-import');
-const postcssImportAliasResolver = require('postcss-import-alias-resolver');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const cssnano = require('cssnano');
 
 const { IS_DEV } = require('../env');
 
-const resolverOptions = {
-    alias: { styles: path.resolve('src/styles') },
-    mergeExtensions: 'extend',
-};
-
 export default {
     client: {
         test: /\.css$/,
@@ -25,9 +19,7 @@ export default {
                 options: {
                     plugins: [
                         postcssImport({
-                            resolve: postcssImportAliasResolver(
-                                resolverOptions
-                            ),
+                            path: path.resolve('src/styles'),
                         }),
                         postcssCustomMedia(),
                         postcssNested(),