vnext: postcss-loader

2 files changed, 100 insertions, 72 deletions

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;
 };