Adding PrettierPlugin to build process

Author: hodgef

config/webpack.config.prod.js

@@ -11,9 +11,7 @@ const TerserPlugin = require('terser-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const safePostCssParser = require('postcss-safe-parser');
-const ManifestPlugin = require('webpack-manifest-plugin');
 const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
-const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
 const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
 const paths = require('./paths');
@@ -23,7 +21,7 @@ const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin-alt')
 const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const getPackageJson = require('./getPackageJson');
-
+var PrettierPlugin = require("prettier-webpack-plugin");
 
 // Webpack uses `publicPath` to determine where the app is being served from.
 // It requires a trailing slash, or the file assets will get an incorrect path.
@@ -517,6 +515,7 @@ module.exports = {
         to: paths.appBuild
       }
     ]),
+    new PrettierPlugin(),
     // Generate a service worker script that will precache, and keep up to date,
     // the HTML & assets that are part of the Webpack build.
     /*new WorkboxWebpackPlugin.GenerateSW({

src/lib/components/Keyboard.css

@@ -1,10 +1,12 @@
-body, html {
+body,
+html {
   margin: 0;
   padding: 0;
 }
 
 .simple-keyboard {
-  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",
+    Helvetica, Arial, "Lucida Grande", sans-serif;
   width: 100%;
   user-select: none;
   box-sizing: border-box;
@@ -38,13 +40,13 @@ body, html {
  * hg-theme-default theme
  */
 .simple-keyboard.hg-theme-default {
-  background-color: rgba(0,0,0,0.1);
+  background-color: rgba(0, 0, 0, 0.1);
   padding: 5px;
   border-radius: 5px;
- }
+}
 
 .simple-keyboard.hg-theme-default .hg-button {
-  box-shadow: 0px 0px 3px -1px rgba(0,0,0,0.3);
+  box-shadow: 0px 0px 3px -1px rgba(0, 0, 0, 0.3);
   height: 40px;
   border-radius: 5px;
   box-sizing: border-box;
@@ -55,18 +57,18 @@ body, html {
   display: flex;
   align-items: center;
   justify-content: center;
- }
+}
 
- /* When using option "useButtonTag" */
- .simple-keyboard button.hg-button {
+/* When using option "useButtonTag" */
+.simple-keyboard button.hg-button {
   border-width: 0;
   outline: 0;
   font-size: inherit;
 }
 
- .simple-keyboard.hg-theme-default .hg-button:active {
+.simple-keyboard.hg-theme-default .hg-button:active {
   background: #e4e4e4;
- }
+}
 
 .simple-keyboard.hg-theme-default.hg-layout-numeric .hg-button {
   width: 33.3%;
@@ -107,4 +109,4 @@ body, html {
 
 .simple-keyboard.hg-theme-default .hg-button.hg-standardBtn[data-skbtn="@"] {
   max-width: 60px;
-}
+}