Bump less-loader from 7.0.1 to 7.0.2

Bumps [less-loader](https://github.com/webpack-contrib/less-loader) from 7.0.1 to 7.0.2.
- [Release notes](https://github.com/webpack-contrib/less-loader/releases)
- [Changelog](https://github.com/webpack-contrib/less-loader/blob/master/CHANGELOG.md)
- [Commits](webpack-contrib/less-loader@v7.0.1...v7.0.2)

Signed-off-by: dependabot-preview[bot] <support@dependabot.com>

packages/demo-app/package.json

@@ -26,13 +26,9 @@
     "@types/styled-components": "^5.0.1",
     "clean-webpack-plugin": "^3.0.0",
     "copy-webpack-plugin": "^6.0.3",
-    "css-loader": "^4.2.1",
     "html-webpack-plugin": "^4.5.0",
-    "less": "^3.10.3",
-    "less-loader": "^7.0.1",
     "node-fetch": "^2.6.0",
     "source-map-loader": "^1.0.2",
-    "style-loader": "^2.0.0",
     "ts-loader": "^8.0.2",
     "typescript": "^3.9.6",
     "webpack": "^4.41.5",

packages/demo-app/src/app/app.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { HashRouter, Route, Switch } from 'react-router-dom';
-import styled from 'styled-components';
+import styled, { createGlobalStyle } from 'styled-components';
 import './app.less';
 import { DemoAppBar } from './app-bar';
 import { AppDrawer } from './app-drawer';
@@ -9,6 +9,106 @@ import { ThemeProvider, useTheme } from './demos/theme';
 import { RealDataGridDemo } from './demos/grid/real-data-grid.demo';
 import { AppIntro } from './app-intro';
 
+const GlobalStyle = createGlobalStyle`
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
+
+#root {
+  min-width: 100%;
+  min-height: 100%;
+  display: flex;
+  position: absolute;
+}
+
+.app {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.main-container {
+  position: relative;
+  flex-grow: 1;
+  box-sizing: border-box;
+}
+
+.fill-space, .fill-abs, .fill {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+
+.flex-col {
+  display: flex;
+  flex-direction: column;
+}
+
+.flex-row {
+  display: flex;
+  flex-direction: row;
+}
+
+.grow {
+  flex-grow: 1;
+}
+
+.center {
+  justify-content: center;
+}
+
+.action-bar {
+  display: flex;
+  justify-content: center;
+
+  button {
+    margin-right: 20px;
+  }
+}
+.storybook-img {
+  width: 30px;
+}
+
+@media screen and (max-width: 768px) {
+  .big-device {
+    display: none !important;
+  }
+}
+
+.negative {
+  color: #d20704;
+}
+
+.positive {
+  color: #008508;
+}
+
+.info-icon {
+  color: #2196f3;
+  align-self: center;
+}
+
+.bad {
+  background: rgba(255,128,171,.4);
+}
+
+.good {
+  background: rgba(185,246,202,.4);
+}
+`;
+
 const StyledApp = styled.div`
   background: ${(p) => p.theme.colors.background};
 `;
@@ -23,6 +123,7 @@ export function App() {
   const { theme, themeId, toggleTheme, isDark } = useTheme();
   return (
     <ThemeProvider theme={theme}>
+      <GlobalStyle />
       <HashRouter>
         <StyledApp className="app">
           <DemoAppBar

packages/demo-app/webpack.common.js

@@ -21,10 +21,6 @@ module.exports = {
         use: 'ts-loader',
         exclude: /node_modules/,
       },
-      {
-        test: /\.less|\.css$/,
-        use: ['style-loader', 'css-loader', 'less-loader'],
-      },
       {
         test: /\.(png|svg|jpg|jpeg|gif|ico)$/,
         exclude: /node_modules/,

webpackBaseConfig.js

@@ -38,10 +38,6 @@ module.exports = {
         test: /\.md$/,
         loader: 'raw-loader',
       },
-      {
-        test: /\.css$/,
-        loader: 'style-loader!css-loader',
-      },
     ],
   },
 };