Add CSS cache busting

Makefile

@@ -59,7 +59,7 @@ lint-js:
 	@docker-compose run --rm js yarn lint-js
 lint-css:
 	$(info Running SCSS linter)
-	@docker-compose run --rm css yarn lint-css
+	@docker-compose run --rm js yarn lint-css
 lint-go:
 	$(info Running Go linter)
 	@docker-compose run --rm api ./bin/lint
@@ -106,13 +106,9 @@ coverage-go:
 # Building
 #
 build: build-frontend build-go build-cmd reset-permissions
-build-css:
-	$(info Compiling CSS)
-	@docker-compose run --rm css yarn build-css
-build-js:
-	$(info Compiling JS)
+build-frontend:
+	$(info Compiling JS and CSS)
 	@docker-compose run --rm js yarn build-js
-build-frontend: build-css build-js
 build-go:
 	$(info Compiling Go application)
 	@docker-compose run --rm api make build
@@ -180,7 +176,7 @@ start:
 stop:
 	docker-compose stop
 run:
-	docker-compose rm -f api css js
+	docker-compose rm -f api js
 	$(info Running local development server)
 	docker-compose up --abort-on-container-exit --build
 identity:

docker-compose.yml

@@ -56,20 +56,6 @@ services:
     networks:
       - eapp
 
-  css:
-    build:
-      context: .
-      dockerfile: conf/docker/Dockerfile.frontend
-    env_file:
-      - .env
-    command: yarn watch-css
-    volumes:
-      - .:/usr/src/app
-      # ditto above
-      - /usr/src/app/node_modules
-    networks:
-      - eapp
-
   api:
     build:
       context: .

gulpfile.js

@@ -17,14 +17,10 @@ var paths = {
     './node_modules/uswds/dist/fonts/**/*'
   ],
   images: ['./node_modules/uswds/dist/img/**/*', './src/img/*'],
-  css: 'eqip.css',
-  printCss: 'eqip.print.css',
   destination: {
     root: './dist',
-    css: './dist/css',
     fonts: './dist/fonts',
-    images: './dist/img',
-    js: './dist/js'
+    images: './dist/img'
   }
 }
 
@@ -45,7 +41,8 @@ function clean() {
   return del([
     paths.destination.root + '/*',
     // don't delete JS files created by Webpack
-    '!' + paths.destination.root + '/js'
+    '!' + paths.destination.root + '/js',
+    '!' + paths.destination.root + '/css'
   ])
 }
 

package.json

@@ -26,7 +26,6 @@
     "js-cookie": "^2.2.0",
     "jsdoc": "^3.5.5",
     "lodash": "^4.17.11",
-    "node-sass-chokidar": "^1.3.1",
     "prop-types": "^15.6.0",
     "query-string": "^5.1.1",
     "react": "^15.6.2",
@@ -63,11 +62,9 @@
     "lint": "npm run lint-css && npm run lint-js",
     "coverage": "NODE_ENV=test codecov -F frontend --disable=gcov",
     "build-assets": "gulp build",
-    "build-js": "webpack -p --progress",
-    "build-css": "npm run build-assets && node-sass-chokidar --include-path src/sass --output-style compressed --source-map true src/eqip.scss dist/css/eqip.css",
-    "build": "npm run build-assets && npm run build-css && npm run build-js",
+    "build-js": "npm run build-assets && webpack -p --progress",
+    "build": "npm run build-assets && npm run build-js",
     "watch-js": "echo \"Starting JS compilation... (Will be ready once you see 'eqip.js' message, after ~60 seconds.)\" && webpack --watch --progress",
-    "watch-css": "npm run build-assets && node-sass-chokidar --include-path src/sass --source-map true -w src/eqip.scss dist/css/eqip.css",
     "docs": "jsdoc ./src -r -d ./doc/frontend"
   },
   "devDependencies": {
@@ -78,6 +75,7 @@
     "babel-preset-stage-2": "^6.24.1",
     "clean-webpack-plugin": "^1.0.1",
     "codecov": "^3.0.4",
+    "css-loader": "^2.1.0",
     "enzyme": "^2.9.1",
     "eslint": "^5.0.1",
     "eslint-import-resolver-webpack": "^0.10.1",
@@ -88,9 +86,12 @@
     "html-webpack-plugin": "^3.2.0",
     "i18n-extract": "^0.6.3",
     "jest": "^23.1.0",
+    "mini-css-extract-plugin": "^0.5.0",
+    "node-sass": "^4.11.0",
     "redux-devtools-extension": "^2.13.2",
     "redux-logger": "^3.0.6",
-    "webpack": "^4.12.0",
+    "sass-loader": "^7.1.0",
+    "webpack": "^4.29.0",
     "webpack-cli": "^3.0.4"
   }
 }

src/boot.jsx

@@ -5,6 +5,7 @@ import { Provider } from 'react-redux'
 import Main from './components/Main/Main'
 import store from './services/store'
 import tabology from './plugins/tabology'
+import './eqip.scss'
 
 // This polyfill gives us more control over smooth scrolling throughout the application
 import smoothscroll from 'smoothscroll-polyfill'

src/index.html

@@ -54,7 +54,6 @@
       <script type="text/javascript" src="/html5shiv.min.js"></script>
       <script type="text/javascript" src="/respond.min.js"></script>
     <![endif]-->
-    <link rel="stylesheet" type="text/css" href="/css/eqip.css" />
     <link
       href="https://fonts.googleapis.com/css?family=Merriweather:300,400,700"
       rel="stylesheet"

webpack.config.js

@@ -6,6 +6,7 @@ const path = require('path')
 const GitRevisionPlugin = require('git-revision-webpack-plugin')
 const CleanWebpackPlugin = require('clean-webpack-plugin')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 
 module.exports = {
   mode: production ? 'production' : 'development',
@@ -27,6 +28,20 @@ module.exports = {
         test: /\.jsx?$/,
         include: path.resolve(__dirname, 'src'),
         use: ['cache-loader', 'babel-loader']
+      },
+      {
+        test: /\.scss$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          { loader: 'css-loader', options: { url: false, sourceMap: true } },
+          {
+            loader: 'sass-loader',
+            options: {
+              sourceMap: true,
+              includePaths: [path.resolve(__dirname, 'src', 'sass')]
+            }
+          }
+        ]
       }
     ]
   },
@@ -63,7 +78,10 @@ module.exports = {
         }).version()
       )
     }),
-    new CleanWebpackPlugin(['dist/js']),
+    new CleanWebpackPlugin(['dist/js', 'dist/css']),
+    new MiniCssExtractPlugin({
+      filename: '../css/[name].[contenthash].css'
+    }),
     new HtmlWebpackPlugin({
       filename: '../index.html',
       template: './src/index.html'