antd: fix styles + tree shaking

.babelrc

@@ -0,0 +1,13 @@
+{
+  "presets": [["next/babel"]],
+  "plugins": [
+    [
+      "import",
+      {
+        "libraryName": "antd",
+        "libraryDirectory": "lib",
+        "style": true
+      }
+    ]
+  ]
+}

Components/Layout/Auth.jsx

@@ -4,7 +4,6 @@ import { min } from 'UIKit/mq';
 
 const UserText = styled.span`
   margin: 0;
-  margin-bottom: 1px;
   padding: 0;
   text-transform: uppercase;
   color: #fff;

Components/Layout/Header.jsx

@@ -7,7 +7,6 @@ import Logo from './Logo';
 const HeaderContent = styled(Flex)`
   flex-direction: row;
   justify-content: space-between;
-  ${'' /* align-items: flex-start; */}
 
   background: linear-gradient(
     90deg,

next.config.js

@@ -1,3 +1,6 @@
+const withPlugins = require('next-compose-plugins');
+const withAntdLess = require('next-plugin-antd-less');
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
@@ -6,4 +9,13 @@ const nextConfig = {
   },
 };
 
-module.exports = nextConfig;
+const plugins = [
+  [
+    withAntdLess,
+    {
+      modifyVars: { '@primary-color': process.env.NEXT_PUBLIC_COLOR_PRIMARY },
+    },
+  ],
+];
+
+module.exports = withPlugins(plugins, nextConfig);

package.json

@@ -10,7 +10,10 @@
   },
   "dependencies": {
     "antd": "^4.19.5",
+    "babel-plugin-import": "^1.13.5",
     "next": "12.1.5",
+    "next-compose-plugins": "^2.2.1",
+    "next-plugin-antd-less": "^1.8.0",
     "react": "18.0.0",
     "react-dom": "18.0.0",
     "rebass": "^4.0.7",