Merge pull request #2349 from overleaf/as-webpack-css

Compile CSS using webpack

GitOrigin-RevId: 489834038667dde572ea5d9b4b9392b362259a09

services/web/.gitignore

@@ -1,4 +1,4 @@
-Compiled source #
+# Compiled source #
 ###################
 *.com
 *.class
@@ -42,14 +42,11 @@ TpdsWorker.js
 BackgroundJobsWorker.js
 UserAndProjectPopulator.coffee
 
+public/manifest.json
+
 public/js
 public/minjs
-
-public/stylesheets/style*.css
-public/stylesheets/sl-style*.css
-public/stylesheets/light-style*.css
-public/stylesheets/ieee-style*.css
-public/stylesheets/*.map
+public/stylesheets
 
 Gemfile.lock
 

services/web/Dockerfile

@@ -10,8 +10,6 @@ RUN npm install --quiet
 
 COPY . /app
 
-RUN make compile_full
-
 FROM node:10.15.3
 
 COPY --from=app /app /app

services/web/Makefile

@@ -16,41 +16,6 @@ MODULE_DIRS := $(shell find modules -mindepth 1 -maxdepth 1 -type d -not -name '
 MODULE_MAKEFILES := $(MODULE_DIRS:=/Makefile)
 MODULE_NAME=$(shell basename $(MODULE))
 
-LESSC := node_modules/.bin/lessc
-CLEANCSS := node_modules/.bin/cleancss
-
-LESS_FILES := $(shell find public/stylesheets -name '*.less')
-LESSC_COMMON_FLAGS := --source-map --autoprefix="last 2 versions, ie >= 10"
-CLEANCSS_FLAGS := --s0 --source-map
-
-LESS_SL_FILE := public/stylesheets/sl-style.less
-CSS_SL_FILE := public/stylesheets/sl-style.css
-LESS_OL_FILE := public/stylesheets/style.less
-CSS_OL_FILE := public/stylesheets/style.css
-LESS_OL_LIGHT_FILE := public/stylesheets/light-style.less
-CSS_OL_LIGHT_FILE := public/stylesheets/light-style.css
-LESS_OL_IEEE_FILE := public/stylesheets/ieee-style.less
-CSS_OL_IEEE_FILE := public/stylesheets/ieee-style.css
-
-CSS_FILES := $(CSS_SL_FILE) $(CSS_OL_FILE) $(CSS_OL_LIGHT_FILE) $(CSS_OL_IEEE_FILE)
-
-public/stylesheets/%.css: $(LESS_FILES)
-	$(LESSC) $(LESSC_COMMON_FLAGS) $(@D)/$*.less $(@D)/$*.css
-
-css_full: $(CSS_FILES)
-
-css: $(CSS_OL_FILE)
-
-minify: $(CSS_FILES)
-	$(CLEANCSS) $(CLEANCSS_FLAGS) -o $(CSS_SL_FILE) $(CSS_SL_FILE)
-	$(CLEANCSS) $(CLEANCSS_FLAGS) -o $(CSS_OL_FILE) $(CSS_OL_FILE)
-	$(CLEANCSS) $(CLEANCSS_FLAGS) -o $(CSS_OL_LIGHT_FILE) $(CSS_OL_LIGHT_FILE)
-	$(CLEANCSS) $(CLEANCSS_FLAGS) -o $(CSS_OL_IEEE_FILE) $(CSS_OL_IEEE_FILE)
-
-compile: css
-
-compile_full: css_full
-
 $(MODULE_MAKEFILES): Makefile.module
 	@set -e; \
 	for makefile in $(MODULE_MAKEFILES); \
@@ -62,9 +27,6 @@ $(MODULE_MAKEFILES): Makefile.module
 # Clean
 #
 
-clean:
-	rm -f public/stylesheets/*.css*
-
 clean_ci:
 	$(DOCKER_COMPOSE) down -v -t 0
 	docker container list | grep 'days ago' | cut -d ' ' -f 1 - | xargs -r docker container stop
@@ -187,9 +149,8 @@ tar:
 	COMPOSE_PROJECT_NAME=tar_$(BUILD_DIR_NAME) $(DOCKER_COMPOSE) down -v -t 0
 
 .PHONY:
-	css_full css minify minify_css minify_es compile compile_full \
-	compile_css_full compile_modules compile_modules_full clean clean_frontend \
-	clean_css clean_tests clean_ci test test_module test_unit test_unit_app \
+	compile_modules compile_modules_full clean_ci \
+	test test_module test_unit test_unit_app \
 	test_unit_modules test_unit_module test_frontend test_frontend_run \
 	test_frontend_build_run test_acceptance test_acceptance_app \
 	test_acceptance_modules test_acceptance_module ci format format_fix lint \

services/web/app/src/infrastructure/ExpressLocals.js

@@ -1,6 +1,4 @@
 const logger = require('logger-sharelatex')
-const fs = require('fs')
-const crypto = require('crypto')
 const Settings = require('settings-sharelatex')
 const querystring = require('querystring')
 const _ = require('lodash')
@@ -25,52 +23,7 @@ if (!IS_DEV_ENV) {
   // containers can't coordinate, so there no guarantee that the manifest file
   // exists when the web server boots. We therefore ignore the manifest file in
   // dev reload
-  webpackManifest = require(`../../../public/js/manifest.json`)
-}
-
-function getFileContent(filePath) {
-  filePath = Path.join(__dirname, '../../../', `public${filePath}`)
-  const exists = fs.existsSync(filePath)
-  if (exists) {
-    const content = fs.readFileSync(filePath, 'UTF-8')
-    return content
-  } else {
-    logger.log({ filePath }, 'file does not exist for hashing')
-    return ''
-  }
-}
-
-const pathList = [
-  '/stylesheets/style.css',
-  '/stylesheets/light-style.css',
-  '/stylesheets/ieee-style.css',
-  '/stylesheets/sl-style.css'
-]
-const hashedFiles = {}
-if (!Settings.useMinifiedJs) {
-  logger.log('not using minified JS, not hashing static files')
-} else {
-  logger.log('Generating file hashes...')
-  for (let path of pathList) {
-    const content = getFileContent(path)
-    const hash = crypto
-      .createHash('md5')
-      .update(content)
-      .digest('hex')
-
-    const splitPath = path.split('/')
-    const filenameSplit = splitPath.pop().split('.')
-    filenameSplit.splice(filenameSplit.length - 1, 0, hash)
-    splitPath.push(filenameSplit.join('.'))
-
-    const hashPath = splitPath.join('/')
-    hashedFiles[path] = hashPath
-
-    const fsHashPath = Path.join(__dirname, '../../../', `public${hashPath}`)
-    fs.writeFileSync(fsHashPath, content)
-
-    logger.log('Finished hashing static content')
-  }
+  webpackManifest = require(`../../../public/manifest.json`)
 }
 
 module.exports = function(webRouter, privateApiRouter, publicApiRouter) {
@@ -125,7 +78,7 @@ module.exports = function(webRouter, privateApiRouter, publicApiRouter) {
       staticFilesBase = ''
     }
 
-    res.locals.buildJsPath = function(jsFile, opts = {}) {
+    res.locals.buildJsPath = function(jsFile) {
       let path
       if (IS_DEV_ENV) {
         // In dev: resolve path within JS asset directory
@@ -139,6 +92,25 @@ module.exports = function(webRouter, privateApiRouter, publicApiRouter) {
         path = webpackManifest[jsFile]
       }
 
+      return Url.resolve(staticFilesBase, path)
+    }
+
+    // Temporary hack while jQuery/Angular dependencies are *not* bundled,
+    // instead copied into output directory
+    res.locals.buildCopiedJsAssetPath = function(jsFile, opts = {}) {
+      let path
+      if (IS_DEV_ENV) {
+        // In dev: resolve path to root directory
+        // We are *not* guaranteed to have a manifest file when the server
+        // starts up
+        path = Path.join('/', jsFile)
+      } else {
+        // In production: resolve path from webpack manifest file
+        // We are guaranteed to have a manifest file since webpack compiles in
+        // the build
+        path = webpackManifest[jsFile]
+      }
+
       if (opts.cdn !== false) {
         path = Url.resolve(staticFilesBase, path)
       }
@@ -150,10 +122,13 @@ module.exports = function(webRouter, privateApiRouter, publicApiRouter) {
       return path
     }
 
-    res.locals.mathJaxPath = res.locals.buildJsPath('libs/mathjax/MathJax.js', {
-      cdn: false,
-      qs: { config: 'TeX-AMS_HTML,Safe' }
-    })
+    res.locals.mathJaxPath = res.locals.buildCopiedJsAssetPath(
+      'js/libs/mathjax/MathJax.js',
+      {
+        cdn: false,
+        qs: { config: 'TeX-AMS_HTML,Safe' }
+      }
+    )
 
     res.locals.lib = PackageVersions.lib
 
@@ -164,36 +139,39 @@ module.exports = function(webRouter, privateApiRouter, publicApiRouter) {
       (brandVariation != null ? brandVariation.brand_id : undefined) ===
       IEEE_BRAND_ID
 
-    const _buildCssFileName = themeModifier =>
-      `/${Settings.brandPrefix}${themeModifier || ''}style.css`
-
     res.locals.getCssThemeModifier = function(userSettings, brandVariation) {
       // Themes only exist in OL v2
-      let themeModifier
       if (Settings.overleaf != null) {
         // The IEEE theme takes precedence over the user personal setting, i.e. a user with
         // a theme setting of "light" will still get the IEE theme in IEEE branded projects.
         if (res.locals.isIEEE(brandVariation)) {
-          themeModifier = 'ieee-'
-        } else if (
-          (userSettings != null ? userSettings.overallTheme : undefined) != null
-        ) {
-          themeModifier = userSettings.overallTheme
+          return 'ieee-'
+        } else if (userSettings && userSettings.overallTheme != null) {
+          return userSettings.overallTheme
         }
       }
-      return themeModifier
     }
 
-    res.locals.buildCssPath = function(themeModifier, buildOpts) {
+    function _buildCssFileName(themeModifier) {
+      return `${Settings.brandPrefix}${themeModifier || ''}style.css`
+    }
+
+    res.locals.buildCssPath = function(themeModifier) {
       const cssFileName = _buildCssFileName(themeModifier)
-      const path = Path.join('/stylesheets/', cssFileName)
-      if (
-        (buildOpts != null ? buildOpts.hashedPath : undefined) &&
-        hashedFiles[path] != null
-      ) {
-        const hashedPath = hashedFiles[path]
-        return Url.resolve(staticFilesBase, hashedPath)
+
+      let path
+      if (IS_DEV_ENV) {
+        // In dev: resolve path within CSS asset directory
+        // We are *not* guaranteed to have a manifest file when the server
+        // starts up
+        path = Path.join('/stylesheets/', cssFileName)
+      } else {
+        // In production: resolve path from webpack manifest file
+        // We are guaranteed to have a manifest file since webpack compiles in
+        // the build
+        path = webpackManifest[cssFileName]
       }
+
       return Url.resolve(staticFilesBase, path)
     }
 

services/web/app/views/layout.pug

@@ -17,7 +17,7 @@ html(
 			|!{gaExperiments}
 
 		//- Stylesheet
-		link(rel='stylesheet', href=buildCssPath(getCssThemeModifier(userSettings, brandVariation), { hashedPath: true }), id="main-stylesheet")
+		link(rel='stylesheet', href=buildCssPath(getCssThemeModifier(userSettings, brandVariation)), id="main-stylesheet")
 
 		block _headLinks
 
@@ -44,7 +44,7 @@ html(
 		script(type="text/javascript").
 			window.csrfToken = "#{csrfToken}";
 
-		script(src=buildJsPath("libs/jquery-1.11.1.min.js"))
+		script(src=buildCopiedJsAssetPath('js/libs/jquery-1.11.1.min.js'))
 		script(type="text/javascript").
 			var noCdnKey = "nocdn=true"
 			var cdnBlocked = typeof jQuery === 'undefined'
@@ -55,7 +55,7 @@ html(
 
 		block head-scripts
 
-		script(src=buildJsPath("libs/angular-1.6.4.min.js"))
+		script(src=buildCopiedJsAssetPath('js/libs/angular-1.6.4.min.js'))
 
 		script.
 			window.sharelatex = {

services/web/app/views/project/editor/new-file-modal.pug

@@ -209,9 +209,6 @@ script(type="text/template", id="qq-file-uploader-template")
 		div.row-spaced-small
 			div.qq-upload-button-selector.btn.btn-primary
 				| Select from your computer
-		span.qq-drop-processing-selector
-			span #{translate('processing')}
-			span.qq-drop-processing-spinner-selector
 		ul.qq-upload-list-selector
 			li
 				div.qq-progress-bar-container-selector

services/web/app/views/project/list/modals.pug

@@ -242,9 +242,6 @@ script(type="text/template", id="qq-project-uploader-template")
 			div #{translate('select_a_zip_file')}
 		span.or.btn-lg #{translate('or')}
 		span.drag-here.btn-lg #{translate('drag_a_zip_file')}
-		span.qq-drop-processing-selector
-			span #{translate('creating_project')}
-			span.qq-drop-processing-spinner-selector
 		ul.qq-upload-list-selector
 			li
 				div.qq-progress-bar-container-selector

services/web/frontend/js/ide/pdfng/directives/pdfAnnotations.js

@@ -1,4 +1,4 @@
-define(['base', 'pdfjs-dist/webpack'], (App, PDFJS) => {
+define(['base', './pdfJsLoader'], (App, PDFJS) => {
   const EXTERNAL_LINK_TARGET = '_blank'
   const REL_NOOPENER = 'noreferrer noopener'
 

services/web/frontend/js/ide/pdfng/directives/pdfHighlights.js

@@ -13,7 +13,7 @@
  * DS207: Consider shorter variations of null checks
  * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
  */
-define(['base', 'pdfjs-dist/webpack'], (App, PDFJS) =>
+define(['base', './pdfJsLoader'], (App, PDFJS) =>
   // app = angular.module 'pdfHighlights', []
 
   App.factory('pdfHighlights', function() {

services/web/frontend/js/ide/pdfng/directives/pdfJsLoader.js

@@ -0,0 +1,18 @@
+/*
+ * Adapted from https://github.com/mozilla/pdfjs-dist/blob/e9492b7a725ec4edd466880223474f4295a5fb45/webpack.js
+ * The PDF.js worker needs to be loaded in a Web Worker. This can be done
+ * automatically with webpack via worker-loader.
+ * PDF.js has the above file to do this, however it uses the webpack loader
+ * module loading syntax, which prevents us from customising the loader.
+ * We need to output the worker file to the public/js directory, and so we need
+ * to customise the loader's options. However the rest of the file is identical
+ * to the one provided by PDF.js.
+ */
+var pdfjs = require('pdfjs-dist/build/pdf.js')
+var PdfjsWorker = require('pdfjs-dist/build/pdf.worker.js')
+
+if (typeof window !== 'undefined' && 'Worker' in window) {
+  pdfjs.GlobalWorkerOptions.workerPort = new PdfjsWorker()
+}
+
+module.exports = pdfjs

services/web/frontend/js/ide/pdfng/directives/pdfRenderer.js

@@ -18,7 +18,7 @@
  * DS207: Consider shorter variations of null checks
  * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
  */
-define(['base', 'pdfjs-dist/webpack'], (App, PDFJS) =>
+define(['base', './pdfJsLoader'], (App, PDFJS) =>
   // App = angular.module 'PDFRenderer', ['pdfAnnotations', 'pdfTextLayer']
 
   App.factory('PDFRenderer', function(

services/web/public/stylesheets/_style_includes.less → services/web/frontend/stylesheets/_style_includes.less

@@ -28,7 +28,6 @@
 @import "components/card.less";
 //@import "components/code.less";
 @import "components/component-animations.less";
-@import "components/glyphicons.less";
 @import "components/dropdowns.less";
 @import "components/button-groups.less";
 @import "components/input-groups.less";

services/web/public/stylesheets/components/fineupload.less → services/web/frontend/stylesheets/components/fineupload.less

@@ -101,16 +101,6 @@
   height: 15px;
   vertical-align: text-bottom;
 }
-.qq-drop-processing-selector {
-  display: none;
-}
-.qq-drop-processing-spinner-selector {
-  display: inline-block;
-  background: url('processing.gif');
-  width: 24px;
-  height: 24px;
-  vertical-align: text-bottom;
-}
 .qq-upload-finished-selector {
   display: none;
   width: 15px;