Separate most styles from the Javascript

Set version of npm packages of Material to define compatibility

Author: RonPeters

main.scss

@@ -4,7 +4,9 @@
   "description": "MatBlazor.Web",
   "scripts": {
     "start": "webpack --config webpack/prod.config.js --watch",
-    "build": "webpack --config webpack/prod.config.js"
+    "build": "webpack --config webpack/prod.config.js",
+    "audit": "npm audit",
+    "audit-fix": "npm audit fix"
   },
   "keywords": [
     "matblazor",
@@ -14,66 +16,71 @@
   "author": "SamProf",
   "license": "MIT",
   "dependencies": {
-    "@material/base": "latest",
-    "@material/button": "latest",
-    "@material/card": "latest",
-    "@material/checkbox": "latest",
-    "@material/chips": "latest",
-    "@material/dialog": "latest",
-    "@material/drawer": "latest",
-    "@material/elevation": "latest",
-    "@material/fab": "latest",
-    "@material/form-field": "latest",
-    "@material/icon-button": "latest",
-    "@material/layout-grid": "latest",
-    "@material/linear-progress": "latest",
-    "@material/list": "latest",
-    "@material/menu": "latest",
-    "@material/radio": "latest",
-    "@material/ripple": "latest",
-    "@material/select": "latest",
-    "@material/slider": "latest",
-    "@material/snackbar": "latest",
-    "@material/switch": "latest",
-    "@material/tab-bar": "latest",
-    "@material/tab-scroller": "latest",
-    "@material/textfield": "latest",
-    "@material/theme": "latest",
-    "@material/top-app-bar": "latest",
-    "@material/typography": "latest",
+    "@material/base": "3.1.0",
+    "@material/button": "3.2.0",
+    "@material/card": "3.2.0",
+    "@material/checkbox": "3.2.0",
+    "@material/chips": "3.2.0",
+    "@material/data-table": "3.2.0",
+    "@material/dialog": "3.2.0",
+    "@material/drawer": "3.2.0",
+    "@material/elevation": "3.1.0",
+    "@material/fab": "3.2.0",
+    "@material/form-field": "3.2.0",
+    "@material/icon-button": "3.2.0",
+    "@material/layout-grid": "3.1.0",
+    "@material/linear-progress": "3.2.0",
+    "@material/list": "3.2.0",
+    "@material/menu": "3.2.0",
+    "@material/radio": "3.2.0",
+    "@material/ripple": "3.2.0",
+    "@material/select": "3.2.0",
+    "@material/slider": "3.2.0",
+    "@material/snackbar": "3.2.0",
+    "@material/switch": "3.2.0",
+    "@material/tab-bar": "3.2.0",
+    "@material/tab-scroller": "3.2.0",
+    "@material/textfield": "3.2.0",
+    "@material/theme": "3.1.0",
+    "@material/top-app-bar": "3.2.0",
+    "@material/typography": "3.1.0",
     "babel-polyfill": "^6.26.0",
-    "flatpickr": "^4.6.2",
-    "install": "^0.12.2",
-    "mini-css-extract-plugin": "^0.8.0",
-    "npm": "^6.9.0",
-    "uglifyjs-webpack-plugin": "^2.2.0"
+    "flatpickr": "^4.6.3",
+    "install": "^0.13.0",
+    "npm": "^6.13.4"
   },
   "devDependencies": {
-    "autoprefixer": "^7.1.2",
+    "autoprefixer": "^9.7.3",
     "babel-core": "^6.25.0",
     "babel-eslint": "^7.2.3",
     "babel-loader": "^7.1.1",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-object-rest-spread": "^6.23.0",
     "babel-preset-env": "^1.6.0",
-    "clean-webpack-plugin": "^0.1.16",
-    "copy-webpack-plugin": "^4.0.1",
-    "cross-env": "^5.0.1",
-    "css-loader": "^0.28.4",
-    "eslint": "^4.2.0",
-    "eslint-loader": "^1.9.0",
+    "clean-webpack-plugin": "^3.0.0",
+    "copy-webpack-plugin": "^5.1.1",
+    "cross-env": "^6.0.3",
+    "css-loader": "^3.4.0",
+    "eslint": "^6.8.0",
+    "eslint-loader": "^3.0.3",
     "eslint-plugin-react": "^7.13.0",
+    "fibers": "^4.0.2",
     "file-loader": "^0.11.2",
-    "html-webpack-plugin": "^2.29.0",
-    "json-loader": "^0.5.4",
-    "license-webpack-plugin": "^2.1.1",
-    "node-sass": "^4.12.0",
-    "postcss-loader": "^2.0.6",
-    "sass-loader": "^6.0.6",
-    "style-loader": "^0.18.2",
-    "url-loader": "^0.5.9",
-    "webpack": "^4.39.1",
-    "webpack-cli": "^3.3.6",
-    "webpack-merge": "^4.1.0"
+    "html-webpack-plugin": "^3.2.0",
+    "json-loader": "^0.5.7",
+    "license-webpack-plugin": "^2.1.3",
+    "mini-css-extract-plugin": "^0.9.0",
+    "node-sass": "^4.13.0",
+    "optimize-css-assets-webpack-plugin": "^5.0.3",
+    "postcss-loader": "^3.0.0",
+    "sass": "^1.24.0",
+    "sass-loader": "^8.0.0",
+    "style-loader": "^1.1.1",
+    "terser-webpack-plugin": "^2.3.1",
+    "uglifyjs-webpack-plugin": "^2.2.0",
+    "url-loader": "^3.0.0",
+    "webpack": "^4.41.4",
+    "webpack-cli": "^3.3.10",
+    "webpack-merge": "^4.2.2"
   }
 }

src/MatBlazor.Web/package.json

@@ -1,8 +1,4 @@
-// global css
-import './theme/theme.scss';
-import './matTable/matTable.scss';
-import './matToast/matToast.scss';
-import './matNavMenu/matNavMenu.scss';
+// global js
 import * as matButton from './matButton/matButton';
 import * as matCheckbox from './matCheckbox/matCheckbox';
 import * as matTextField from './matTextField/matTextField';

src/MatBlazor.Web/src/main.js

@@ -0,0 +1,35 @@
+// global css
+@import '@material/theme/mdc-theme.scss';
+@import './matAccordion/matAccordion.scss';
+@import './matAppBar/matAppBar.scss';
+@import './matAutocompleteList/matAutocompleteList.scss';
+@import './matButton/matButton.scss';
+@import './matCard/matCard.scss';
+@import './matCheckbox/matCheckbox.scss';
+@import './matChipSet/matChipSet.scss';
+@import './matDatePicker/matDatePicker.scss';
+@import './matDialog/matDialog.scss';
+@import './matDrawer/matDrawer.scss';
+@import './matElevation/matElevation.scss';
+@import './matFAB/matFAB.scss';
+@import './matFileUpload/matFileUpload.scss';
+@import './matIconButton/matIconButton.scss';
+@import './matLayoutGrid/matLayoutGrid.scss';
+@import './matList/matList.scss';
+@import './matMenu/matMenu.scss';
+@import './matNavMenu/matNavMenu.scss';
+@import './matNumericUpDownField/matNumericUpDownField.scss';
+@import './matProgressBar/matProgressBar.scss';
+@import './matRadioButton/matRadioButton.scss';
+@import './matRipple/matRipple.scss';
+@import './matSelect/matSelect.scss';
+@import './matSlider/matSlider.scss';
+@import './matSlideToggle/matSlideToggle.scss';
+@import './matSnackbar/matSnackbar.scss';
+@import './matSplitter/matSplitter.scss';
+@import './matTabBar/matTabBar.scss';
+@import './matTable/matTable.scss';
+@import './matTextField/matTextField.scss';
+@import './matToast/matToast.scss';
+@import './matTooltip/matTooltip.scss';
+@import './matTypography/matTypography.scss';

src/MatBlazor.Web/src/main.scss

@@ -1,4 +1,3 @@
-import * as styles from './matAccordion.scss';
 import {MDCRipple} from '@material/ripple/component';
 
 export function init(ref) {

src/MatBlazor.Web/src/matAccordion/matAccordion.js

@@ -1,4 +1,3 @@
-import './matAppBar.scss';
 import {MDCTopAppBar} from '@material/top-app-bar';
 
 

src/MatBlazor.Web/src/matAppBar/matAppBar.js

@@ -1,5 +1,3 @@
-import './matAutocompleteList.scss';
-
 // export class MatAutocompleteList {
 //
 // }

src/MatBlazor.Web/src/matAutocompleteList/matAutocompleteList.js

@@ -1,6 +1,3 @@
-import * as styles from './matButton.scss';
-
-
 import {MDCRipple} from '@material/ripple';
 
 

src/MatBlazor.Web/src/matButton/matButton.js

@@ -1,5 +1,3 @@
-import './matCard.scss';
-
 // alert(111);
 export function init(ref) {
 

src/MatBlazor.Web/src/matCard/matCard.js

@@ -1,4 +1,3 @@
-import './matCheckbox.scss';
 import {MDCFormField} from '@material/form-field';
 import {MDCCheckbox} from '@material/checkbox';
 import {getMatBlazorInstance, setMatBlazorInstance} from '../utils/base';

src/MatBlazor.Web/src/matCheckbox/matCheckbox.js

@@ -1,4 +1,3 @@
-import './matChipSet.scss';
 import {MDCChipSet} from '@material/chips';
 
 

src/MatBlazor.Web/src/matChipSet/matChipSet.js

@@ -1,5 +1,3 @@
-import './matDatePicker.scss';
-
 import flatpickr from 'flatpickr';
 import {getMatBlazorInstance, setMatBlazorInstance} from '../utils/base';
 

src/MatBlazor.Web/src/matDatePicker/matDatePicker.js

@@ -1,5 +1,3 @@
-import './matDialog.scss';
-
 import { MDCDialog } from '@material/dialog';
 
 

src/MatBlazor.Web/src/matDialog/matDialog.js

@@ -1,4 +1,3 @@
-import './matDrawer.scss';
 import {MDCDrawer} from '@material/drawer/index';
 
 

src/MatBlazor.Web/src/matDrawer/matDrawer.js

@@ -1,4 +1,2 @@
-import './matElevation.scss';
-
 export function init() {
 };

src/MatBlazor.Web/src/matElevation/matElevation.js

@@ -1,4 +1,3 @@
-import * as styles from './matFAB.scss';
 import {MDCRipple} from '@material/ripple/component';
 
 

src/MatBlazor.Web/src/matFAB/matFAB.js

@@ -1,4 +1,3 @@
-import * as styles from './matFileUpload.scss';
 import * as matRipple from '../matRipple/matRipple';
 
 

src/MatBlazor.Web/src/matFileUpload/matFileUpload.js

@@ -1,5 +1,3 @@
-import './matIconButton.scss';
-
 import {MDCRipple} from '@material/ripple';
 import {MatButton} from '../matButton/matButton';
 

src/MatBlazor.Web/src/matIconButton/matIconButton.js

@@ -1 +0,0 @@
-import './matLayoutGrid.scss';

src/MatBlazor.Web/src/matLayoutGrid/matLayoutGrid.js

@@ -1,4 +1,3 @@
-import './matList.scss';
 import {MDCList} from '@material/list';
 import {MDCRipple} from '@material/ripple';
 

src/MatBlazor.Web/src/matList/matList.js

@@ -1,4 +1,3 @@
-import './matMenu.scss';
 import {MDCMenu} from '@material/menu';
 import {Corner} from '@material/menu-surface/constants';
 

src/MatBlazor.Web/src/matMenu/matMenu.js

@@ -1,4 +1,3 @@
-import './matNumericUpDownField.scss';
 import {MDCTextField} from '@material/textfield';
 
 export class MatNumericUpDownField {

src/MatBlazor.Web/src/matNumericUpDownField/matNumericUpDownField.js

@@ -1,4 +1,3 @@
-import './matProgressBar.scss';
 import {MDCLinearProgress} from '@material/linear-progress/component';
 
 

src/MatBlazor.Web/src/matProgressBar/matProgressBar.js

@@ -1,4 +1,3 @@
-import './matRadioButton.scss';
 import {MDCFormField} from '@material/form-field';
 import {MDCRadio} from '@material/radio';
 

src/MatBlazor.Web/src/matRadioButton/matRadioButton.js

@@ -1,4 +1,3 @@
-import './matRipple.scss';
 import {MDCRipple} from '@material/ripple/component';
 
 

src/MatBlazor.Web/src/matRipple/matRipple.js

@@ -1,4 +1,3 @@
-import './matSelect.scss';
 import {MDCSelect} from '@material/select';
 
 

src/MatBlazor.Web/src/matSelect/matSelect.js

@@ -1,4 +1,3 @@
-import './matSlideToggle.scss';
 import {MDCSwitch} from '@material/switch';
 
 

src/MatBlazor.Web/src/matSlideToggle/matSlideToggle.js

@@ -1,4 +1,3 @@
-import './matSlider.scss';
 import {MDCSlider} from '@material/slider';
 
 export class MatSlider {

src/MatBlazor.Web/src/matSlider/matSlider.js

@@ -1,4 +1,3 @@
-import './matSnackbar.scss';
 import {MDCSnackbar} from '@material/snackbar/component';
 
 

src/MatBlazor.Web/src/matSnackbar/matSnackbar.js

@@ -1,5 +1,3 @@
-import * as styles from './matSplitter.scss';
-
 export function init(ref) {
 
 }

src/MatBlazor.Web/src/matSplitter/matSplitter.js

@@ -1,4 +1,3 @@
-import './matTabBar.scss';
 import {MDCTabBar} from '@material/tab-bar/component';
 import {MDCTabScroller} from '@material/tab-scroller/component';
 

src/MatBlazor.Web/src/matTabBar/matTabBar.js

@@ -1,3 +1,5 @@
+@import "@material/data-table/mdc-data-table";
+
 .mdc-table, .mdc-table--striped {
     width: 100%;
     max-width: 100%;

src/MatBlazor.Web/src/matTable/matTable.scss

@@ -1,4 +1,3 @@
-import './matTextField.scss';
 import {MDCTextField} from '@material/textfield';
 
 export class MatTextField {

src/MatBlazor.Web/src/matTextField/matTextField.js

@@ -1,6 +1,3 @@
-import * as styles from './matTooltip.scss';
-
-
 export const matTooltipRefKey = '$matBlazor.matTooltipRef';
 export const matTooltipTargetRefKey = '$matBlazor.matTooltipTargetRef';
 

src/MatBlazor.Web/src/matTooltip/matTooltip.js

@@ -1 +0,0 @@
-import './matTypography.scss';