vnext: postcss-loader

6 files changed, 430 insertions, 88 deletions

diff --git a/package-lock.json b/package-lock.json
index ceaf2abb..61c4539d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -43,11 +43,13 @@
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^14.0.0",
         "@typescript-eslint/eslint-plugin": "^5.54.0",
+        "autoprefixer": "^10.4.13",
         "babel-loader": "^9.1.2",
         "concurrently": "^7.6.0",
         "copy-webpack-plugin": "^11.0.0",
         "core-js": "^3.29.0",
         "cross-env": "^7.0.3",
+        "css-loader": "^6.7.3",
         "cssnano": "^5.1.15",
         "eslint": "8.35.0",
         "eslint-plugin-import": "^2.27.5",
@@ -68,10 +70,12 @@
         "postcss": "^8.4.21",
         "postcss-cli": "^10.1.0",
         "postcss-import": "^15.1.0",
+        "postcss-loader": "^7.0.2",
         "postcss-preset-env": "^8.0.1",
         "postcss-url": "^10.1.3",
         "react-test-renderer": "^18.2.0",
         "regenerator-runtime": "^0.13.11",
+        "style-loader": "^3.3.1",
         "stylelint": "^15.2.0",
         "stylelint-config-standard": "^30.0.1",
         "webpack": "^5.75.0",
@@ -4209,6 +4213,12 @@
       "integrity": "sha512-f5j5b/Gf71L+dbqxIpQ4Z2WlmI/mPJ0fOkGGmFgtb6sAu97EPczzbS3/tJKxmcYDj55OX6ssqwDAWOHIYDRDGA==",
       "dev": true
     },
+    "node_modules/@types/parse-json": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
+      "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
+      "dev": true
+    },
     "node_modules/@types/prettier": {
       "version": "2.7.2",
       "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.7.2.tgz",
@@ -6415,6 +6425,47 @@
         "postcss": "^8.4"
       }
     },
+    "node_modules/css-loader": {
+      "version": "6.7.3",
+      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.7.3.tgz",
+      "integrity": "sha512-qhOH1KlBMnZP8FzRO6YCH9UHXQhVMcEGLyNdb7Hv2cpcmJbW0YrddO+tG1ab5nT41KpHIYGsbeHqxB9xPu1pKQ==",
+      "dev": true,
+      "dependencies": {
+        "icss-utils": "^5.1.0",
+        "postcss": "^8.4.19",
+        "postcss-modules-extract-imports": "^3.0.0",
+        "postcss-modules-local-by-default": "^4.0.0",
+        "postcss-modules-scope": "^3.0.0",
+        "postcss-modules-values": "^4.0.0",
+        "postcss-value-parser": "^4.2.0",
+        "semver": "^7.3.8"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^5.0.0"
+      }
+    },
+    "node_modules/css-loader/node_modules/semver": {
+      "version": "7.3.8",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
+      "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
+      "dev": true,
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/css-prefers-color-scheme": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-8.0.0.tgz",
@@ -9641,6 +9692,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/icss-utils": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
+      "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
+      "dev": true,
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.2.4",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
@@ -12233,6 +12296,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/klona": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.6.tgz",
+      "integrity": "sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/known-css-properties": {
       "version": "0.26.0",
       "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.26.0.tgz",
@@ -14045,6 +14117,59 @@
         "node": ">= 14"
       }
     },
+    "node_modules/postcss-loader": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-7.0.2.tgz",
+      "integrity": "sha512-fUJzV/QH7NXUAqV8dWJ9Lg4aTkDCezpTS5HgJ2DvqznexTbSTxgi/dTECvTZ15BwKTtk8G/bqI/QTu2HPd3ZCg==",
+      "dev": true,
+      "dependencies": {
+        "cosmiconfig": "^7.0.0",
+        "klona": "^2.0.5",
+        "semver": "^7.3.8"
+      },
+      "engines": {
+        "node": ">= 14.15.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "postcss": "^7.0.0 || ^8.0.1",
+        "webpack": "^5.0.0"
+      }
+    },
+    "node_modules/postcss-loader/node_modules/cosmiconfig": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
+      "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
+      "dev": true,
+      "dependencies": {
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.2.1",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.10.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/postcss-loader/node_modules/semver": {
+      "version": "7.3.8",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
+      "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
+      "dev": true,
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/postcss-logical": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/postcss-logical/-/postcss-logical-6.0.0.tgz",
@@ -14180,6 +14305,65 @@
         "postcss": "^8.2.15"
       }
     },
+    "node_modules/postcss-modules-extract-imports": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
+      "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
+      "dev": true,
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/postcss-modules-local-by-default": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.0.tgz",
+      "integrity": "sha512-sT7ihtmGSF9yhm6ggikHdV0hlziDTX7oFoXtuVWeDd3hHObNkcHRo9V3yg7vCAY7cONyxJC/XXCmmiHHcvX7bQ==",
+      "dev": true,
+      "dependencies": {
+        "icss-utils": "^5.0.0",
+        "postcss-selector-parser": "^6.0.2",
+        "postcss-value-parser": "^4.1.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/postcss-modules-scope": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz",
+      "integrity": "sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==",
+      "dev": true,
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.4"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/postcss-modules-values": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz",
+      "integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==",
+      "dev": true,
+      "dependencies": {
+        "icss-utils": "^5.0.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
     "node_modules/postcss-nesting": {
       "version": "11.0.0",
       "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-11.0.0.tgz",
@@ -16401,6 +16585,22 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/style-loader": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.1.tgz",
+      "integrity": "sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==",
+      "dev": true,
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^5.0.0"
+      }
+    },
     "node_modules/style-search": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/style-search/-/style-search-0.1.0.tgz",
@@ -20876,6 +21076,12 @@
       "integrity": "sha512-f5j5b/Gf71L+dbqxIpQ4Z2WlmI/mPJ0fOkGGmFgtb6sAu97EPczzbS3/tJKxmcYDj55OX6ssqwDAWOHIYDRDGA==",
       "dev": true
     },
+    "@types/parse-json": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
+      "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
+      "dev": true
+    },
     "@types/prettier": {
       "version": "2.7.2",
       "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.7.2.tgz",
@@ -22534,6 +22740,33 @@
         "postcss-value-parser": "^4.2.0"
       }
     },
+    "css-loader": {
+      "version": "6.7.3",
+      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.7.3.tgz",
+      "integrity": "sha512-qhOH1KlBMnZP8FzRO6YCH9UHXQhVMcEGLyNdb7Hv2cpcmJbW0YrddO+tG1ab5nT41KpHIYGsbeHqxB9xPu1pKQ==",
+      "dev": true,
+      "requires": {
+        "icss-utils": "^5.1.0",
+        "postcss": "^8.4.19",
+        "postcss-modules-extract-imports": "^3.0.0",
+        "postcss-modules-local-by-default": "^4.0.0",
+        "postcss-modules-scope": "^3.0.0",
+        "postcss-modules-values": "^4.0.0",
+        "postcss-value-parser": "^4.2.0",
+        "semver": "^7.3.8"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "7.3.8",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
+          "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
+          "dev": true,
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
+        }
+      }
+    },
     "css-prefers-color-scheme": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-8.0.0.tgz",
@@ -24887,6 +25120,13 @@
         "safer-buffer": ">= 2.1.2 < 3.0.0"
       }
     },
+    "icss-utils": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
+      "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
+      "dev": true,
+      "requires": {}
+    },
     "ignore": {
       "version": "5.2.4",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
@@ -26793,6 +27033,12 @@
       "integrity": "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==",
       "dev": true
     },
+    "klona": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.6.tgz",
+      "integrity": "sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==",
+      "dev": true
+    },
     "known-css-properties": {
       "version": "0.26.0",
       "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.26.0.tgz",
@@ -28077,6 +28323,41 @@
         }
       }
     },
+    "postcss-loader": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-7.0.2.tgz",
+      "integrity": "sha512-fUJzV/QH7NXUAqV8dWJ9Lg4aTkDCezpTS5HgJ2DvqznexTbSTxgi/dTECvTZ15BwKTtk8G/bqI/QTu2HPd3ZCg==",
+      "dev": true,
+      "requires": {
+        "cosmiconfig": "^7.0.0",
+        "klona": "^2.0.5",
+        "semver": "^7.3.8"
+      },
+      "dependencies": {
+        "cosmiconfig": {
+          "version": "7.1.0",
+          "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
+          "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
+          "dev": true,
+          "requires": {
+            "@types/parse-json": "^4.0.0",
+            "import-fresh": "^3.2.1",
+            "parse-json": "^5.0.0",
+            "path-type": "^4.0.0",
+            "yaml": "^1.10.0"
+          }
+        },
+        "semver": {
+          "version": "7.3.8",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
+          "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
+          "dev": true,
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
+        }
+      }
+    },
     "postcss-logical": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/postcss-logical/-/postcss-logical-6.0.0.tgz",
@@ -28161,6 +28442,42 @@
         "postcss-selector-parser": "^6.0.5"
       }
     },
+    "postcss-modules-extract-imports": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
+      "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
+      "dev": true,
+      "requires": {}
+    },
+    "postcss-modules-local-by-default": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.0.tgz",
+      "integrity": "sha512-sT7ihtmGSF9yhm6ggikHdV0hlziDTX7oFoXtuVWeDd3hHObNkcHRo9V3yg7vCAY7cONyxJC/XXCmmiHHcvX7bQ==",
+      "dev": true,
+      "requires": {
+        "icss-utils": "^5.0.0",
+        "postcss-selector-parser": "^6.0.2",
+        "postcss-value-parser": "^4.1.0"
+      }
+    },
+    "postcss-modules-scope": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz",
+      "integrity": "sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==",
+      "dev": true,
+      "requires": {
+        "postcss-selector-parser": "^6.0.4"
+      }
+    },
+    "postcss-modules-values": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz",
+      "integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==",
+      "dev": true,
+      "requires": {
+        "icss-utils": "^5.0.0"
+      }
+    },
     "postcss-nesting": {
       "version": "11.0.0",
       "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-11.0.0.tgz",
@@ -29817,6 +30134,13 @@
       "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
       "dev": true
     },
+    "style-loader": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.1.tgz",
+      "integrity": "sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==",
+      "dev": true,
+      "requires": {}
+    },
     "style-search": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/style-search/-/style-search-0.1.0.tgz",
diff --git a/package.json b/package.json
index c9536a2c..61a37771 100644
--- a/package.json
+++ b/package.json
@@ -49,11 +49,13 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@typescript-eslint/eslint-plugin": "^5.54.0",
+    "autoprefixer": "^10.4.13",
     "babel-loader": "^9.1.2",
     "concurrently": "^7.6.0",
     "copy-webpack-plugin": "^11.0.0",
     "core-js": "^3.29.0",
     "cross-env": "^7.0.3",
+    "css-loader": "^6.7.3",
     "cssnano": "^5.1.15",
     "eslint": "8.35.0",
     "eslint-plugin-import": "^2.27.5",
@@ -74,10 +76,12 @@
     "postcss": "^8.4.21",
     "postcss-cli": "^10.1.0",
     "postcss-import": "^15.1.0",
+    "postcss-loader": "^7.0.2",
     "postcss-preset-env": "^8.0.1",
     "postcss-url": "^10.1.3",
     "react-test-renderer": "^18.2.0",
     "regenerator-runtime": "^0.13.11",
+    "style-loader": "^3.3.1",
     "stylelint": "^15.2.0",
     "stylelint-config-standard": "^30.0.1",
     "webpack": "^5.75.0",
diff --git a/postcss.config.js b/postcss.config.js
deleted file mode 100644
index d5ff5a25..00000000
--- a/postcss.config.js
+++ /dev/null
@@ -1,16 +0,0 @@
-module.exports = (ctx) => {
-    const production = ctx.env === 'production';
-    const config = {
-        map: production ? false : ctx.options.map,
-        plugins: {
-            'autoprefixer': { grid: true },
-            'stylelint': production ? false : {},
-            'postcss-import': {},
-            'postcss-preset-env': { stage: 0 },
-            'cssnano': production ? { preset: 'default' } : false,
-            'postcss-url' : { url: 'copy', assetsPath: '', useHash: true }
-        },
-    };
-    return config;
-};
-
diff --git a/vnext/src/ui/Icon.js b/vnext/src/ui/Icon.js
index 0386182f..a9cd8a95 100644
--- a/vnext/src/ui/Icon.js
+++ b/vnext/src/ui/Icon.js
@@ -22,7 +22,7 @@ function IconElement(props) {
     var klass = 'icon' + (!props.noFill ? ' icon--' + props.name : '') + size + className;
 
     var name = '#' + props.name + '-icon';
-    var useTag = `<use xlink:href='/${evilIcons}${name}' />`;
+    var useTag = `<use xlink:href='${evilIcons}${name}' />`;
     var Icon = createElement('svg', { className: 'icon__cnt', dangerouslySetInnerHTML: { __html: useTag } });
     return createElement(
         'div',
diff --git a/vnext/webpack.config.js b/vnext/webpack.config.js
index 821ce2f7..16e5a135 100644
--- a/vnext/webpack.config.js
+++ b/vnext/webpack.config.js
@@ -1,84 +1,112 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+
 const ESLintPlugin = require('eslint-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 
 module.exports = (env, argv) => {
-    const node_env = process.env.NODE_ENV ? process.env.NODE_ENV : 'development';
-    const dev = node_env !== 'production';
-    const config = {
-        mode: node_env,
-        devtool: dev ? 'source-map' : false,
-        entry: {
-            'index': [
-                __dirname + '/src/index.js'
-            ]
-        },
-        output: {
-            path: __dirname + '/../public',
-            filename: '[name].js'
-        },
-        module: {
-            rules: [{
-                test: /\.js$/,
-                exclude: [
-                    /\bnode_modules\b/,
-                    /\bcore-js\b/,
-                    /\bwebpack\/buildin\b/
-                ],
-                loader: 'babel-loader'
-            }, {
-              test: /\.(css)$/,
-              use: [
-                {
-                  loader: dev ? 'style-loader' : MiniCssExtractPlugin.loader,
-                },
-                {
-                  loader: 'css-loader',
-                  options: {
-                    sourceMap: true,
-                  },
-                }
-              ],
-            }, {
-                test: /\.(png|jpe?g|gif|svg)$/i,
-                use: [
+  const node_env = process.env.NODE_ENV ? process.env.NODE_ENV : 'development';
+  const dev = node_env !== 'production';
+  const config = {
+    mode: node_env,
+    devtool: dev ? 'source-map' : false,
+    entry: {
+      'index': [
+        __dirname + '/src/index.js',
+        __dirname + '/src/index.css'
+      ]
+    },
+    output: {
+      path: __dirname + '/../public',
+      filename: '[name].js'
+    },
+    module: {
+      rules: [{
+        test: /\.js$/,
+        exclude: [
+          /node_modules/
+        ],
+        loader: 'babel-loader'
+      }, {
+        test: /\.(css)$/,
+        use: [
+          {
+            loader: dev ? 'style-loader' : MiniCssExtractPlugin.loader,
+          },
+          {
+            loader: 'css-loader',
+            options: {
+              sourceMap: true,
+            },
+          },
+          {
+            loader: 'postcss-loader',
+            options: {
+              postcssOptions: {
+                plugins: [
+                  [
+                    'postcss-preset-env',
                     {
-                        loader: 'file-loader',
+                      'stage': 0
                     },
+                    'stylelint',
+                    'autoprefixer',
+                    {
+                      'grid': true
+                    }
+                  ],
                 ],
-            }]
-        },
-        plugins: [
-            new HtmlWebpackPlugin({
-                template: __dirname + '/src/index.html'
-              }),
+              },
+            },
+          },
         ],
-        resolve: {
-            symlinks: false,
-            extensions: ['.js']
-        }
-    };
-    if (dev) {
-        config.plugins.push(
-            new ESLintPlugin({
-                files: __dirname + '/src',
-                lintDirtyModulesOnly: true,
-                failOnWarning: false,
-                failOnError: true,
-                fix: false
-            }));
+      }, {
+        test: /\.(png|jpe?g|gif|svg)$/i,
+        use: [
+          {
+            loader: 'file-loader',
+          },
+        ],
+      }]
+    },
+    plugins: [
+      new HtmlWebpackPlugin({
+        template: __dirname + '/src/index.html'
+      }),
+    ],
+    resolve: {
+      symlinks: false,
+      extensions: ['.js']
     }
-    config.optimization = {
-        minimize: !dev,
-        minimizer: [
-            new TerserPlugin({
-                minify: TerserPlugin.swcMinify,
-                // `terserOptions` options will be passed to `swc` (`@swc/core`)
-                // Link to options - https://swc.rs/docs/config-js-minify
-                terserOptions: {},
-            }),
-        ]
+  };
+  if (dev) {
+    config.plugins.push(
+      new ESLintPlugin({
+        files: __dirname + '/src',
+        lintDirtyModulesOnly: true,
+        failOnWarning: false,
+        failOnError: true,
+        fix: false
+      }));
+    config.devServer = {
+      hot: true,
+      historyApiFallback: true,
+      client: {
+        overlay: true
+      }
     };
-    return config;
+  }
+  config.optimization = {
+    minimize: !dev,
+    minimizer: [
+      new TerserPlugin({
+        minify: TerserPlugin.swcMinify,
+        // `terserOptions` options will be passed to `swc` (`@swc/core`)
+        // Link to options - https://swc.rs/docs/config-js-minify
+        terserOptions: {},
+      }),
+    ]
+  };
+  return config;
 };
diff --git a/webpack.config.js b/webpack.config.js
index cd77fb53..0cf69606 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+
 const ESLintPlugin = require('eslint-webpack-plugin');
 const CopyPlugin = require('copy-webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin');