fix: #837 the react scaffolder extremely slow to compile (#845)

* fix: #837 the react scaffolder extremely slow to compile
reapit · Apr 8, 2020 · e75dc1f · e75dc1f
1 parent 1b457e6
commit e75dc1f
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 18 deletions.
diff --git a/packages/react-app-scaffolder/app/templates/_package.json b/packages/react-app-scaffolder/app/templates/_package.json
@@ -14,7 +14,7 @@
     <% if (isFoundation) { %>
     <% if (stylesSolution === 'styledComponents') { %>
     "build:prod": "node '../../scripts/webpack/webpack-styled-components-prod.js'",
-    "start:dev": "webpack-dev-server --hot --progress --color --mode development --config ../../scripts/webpack/webpack.base.dev.js",
+    "start:dev": "webpack-dev-server --hot --progress --color --mode development --config ../../scripts/webpack/webpack.sass.dev.js",
     <% } else { %>
     "build:prod": "node '../../scripts/webpack/webpack-sass-prod/index.js'",
     "start:dev": "webpack-dev-server --hot --progress --color --mode development --config ../../scripts/webpack/webpack.sass.dev.js",
@@ -115,14 +115,15 @@
     "webpack-cli": "^3.3.2",
     "webpack-dev-server": "^3.4.1",
     "sass-loader": "^7.1.0",
-    "node-sass": "^4.12.0"
+    "node-sass": "^4.12.0",
+    "copy-webpack-plugin": "^5.1.1",
+    "style-loader": "^1.1.3",
+    "css-loader": "^3.5.1"
     <% if (stylesSolution === 'sass') { %>
-    ,"css-loader": "^3.0.0",
-      "loader-utils": "^1.2.3",
+      ,"loader-utils": "^1.2.3",
       "mini-css-extract-plugin": "^0.7.0",
       "purgecss": "^1.3.0",
-      "purgecss-whitelister": "^2.4.0",
-      "style-loader": "^0.23.1"
+      "purgecss-whitelister": "^2.4.0"
     <% } %>
     <% if (redux) { %>
     ,"@redux-saga/testing-utils": "^1.0.5",

diff --git a/packages/react-app-scaffolder/app/templates/base-is-not-sass/src/scripts/webpack-dev.js b/packages/react-app-scaffolder/app/templates/base-is-not-sass/src/scripts/webpack-dev.js
@@ -4,7 +4,7 @@ const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const FaviconsWebpackPlugin = require('favicons-webpack-plugin')
 const ResolveTSPathsToWebpackAlias = require('ts-paths-to-webpack-alias')
-const {PATHS} = require('./constants')
+const { PATHS } = require('./constants')
 
 module.exports = {
   mode: 'development',
@@ -70,6 +70,10 @@ module.exports = {
           },
         },
       },
+      {
+        test: /\.css$/i,
+        use: ['style-loader', 'css-loader'],
+      },
     ],
   },
   resolve: {

diff --git a/packages/react-app-scaffolder/app/templates/base-is-not-sass/src/scripts/webpack-prod.js b/packages/react-app-scaffolder/app/templates/base-is-not-sass/src/scripts/webpack-prod.js
@@ -106,6 +106,10 @@ module.exports = {
         exclude: /node_modules/,
         use: 'graphql-tag/loader',
       },
+      {
+        test: /\.css$/i,
+        use: ['style-loader', 'css-loader'],
+      },
     ],
   },
   resolve: {

diff --git a/packages/react-app-scaffolder/app/templates/base/src/core/app.tsx b/packages/react-app-scaffolder/app/templates/base/src/core/app.tsx
@@ -1,3 +1,7 @@
+<% if (isFoundation) { %>
+import * as OfflinePluginRuntime from 'offline-plugin/runtime'
+OfflinePluginRuntime.install()
+<% } %>
 import * as React from 'react'
 import Router from './router'
 <% if (redux) { %>
@@ -14,19 +18,19 @@ import { AuthContext } from '@/context'
 <% } %>
 <% if (stylesSolution == 'sass') { %>
 import '@/styles/index.scss'
-<% } else { %>
-import { createGlobalStyle } from 'styled-components'
+  <% if (!isFoundation) { %>
+import '@reapit/elements/dist/index.css'
+  <% } %>
 
-<% if (isFoundation) { %>
-  import * as OfflinePluginRuntime from 'offline-plugin/runtime'
-OfflinePluginRuntime.install()
-import globalCss from 'raw-loader!sass-loader!@reapit/elements/styles/index.scss'
 <% } else { %>
-import globalCss from 'raw-loader!sass-loader!@reapit/elements/dist/index.css'
+import { createGlobalStyle } from 'styled-components'
+  <% if (isFoundation) { %>
+import '@reapit/elements/styles/index.scss'
+  <% } else { %>
+import '@reapit/elements/dist/index.css'
 <% } %>
 
   const GlobalStyle = createGlobalStyle`
-  ${globalCss};
   body {
     background-color: unset;
   }

diff --git a/packages/react-app-scaffolder/package.json b/packages/react-app-scaffolder/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@reapit/generator-react-app-scaffolder",
-  "version": "0.0.27",
+  "version": "0.0.28",
   "description": "An opinionated gnerator for scaffolding TypeScript React Redux apps",
   "keywords": [
     "yeoman-generator"

diff --git a/packages/web-components/src/search-widget/client/utils/__tests__/results-helpers.ts b/packages/web-components/src/search-widget/client/utils/__tests__/results-helpers.ts
@@ -12,8 +12,8 @@ import { propertyStub } from '../__stubs__/property'
 describe('results helpers', () => {
   describe('getPrice', () => {
     it('runs correctly', () => {
-      expect(getPrice(propertyStub, 'Rent')).toEqual('£0 MockRentFrequency')
-      expect(getPrice(propertyStub, 'Sale')).toEqual('Guide Price £0')
+      expect(getPrice(propertyStub, 'Rent')).toEqual('£750 Monthly')
+      expect(getPrice(propertyStub, 'Sale')).toEqual('£250,000')
     })
   })
   it('runs formatPriceAndQuantifier correctly', () => {