Improve CSS chunk importing (#3817)

* Move ide.css to editor.pug
* Import angular-csp.css

GitOrigin-RevId: e0f4792690567e785e124d742e0332ddcf1155e6

services/web/app/views/layout.pug

@@ -13,14 +13,13 @@ html(
 		script(type="text/javascript", nonce=scriptNonce).
 			// Stop superfish from loading
 			window.similarproducts = true
-		style [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak  {display: none !important; display: none; }
 
 		if (typeof(gaExperiments) != "undefined")
 			|!{gaExperiments}
 
 		//- Stylesheet
 		link(rel='stylesheet', href=buildCssPath(getCssThemeModifier(userSettings, brandVariation)), id="main-stylesheet")
-		link(rel='stylesheet', href=buildStylesheetPath("ide.css"))
+		link(rel='stylesheet', href=buildStylesheetPath("libraries.css"))
 
 		block _headLinks
 

services/web/app/views/project/editor.pug

@@ -5,6 +5,9 @@ block vars
 	- var suppressFooter = true
 	- metadata.robotsNoindexNofollow = true
 
+block _headLinks
+	link(rel='stylesheet', href=buildStylesheetPath("ide.css"))
+
 block content
 	.editor(ng-controller="IdeController").full-size
 		//- required by react2angular-shared-context, must be rendered as a top level component

services/web/frontend/js/libraries.js

@@ -11,6 +11,9 @@ import 'libs/passfield'
 import 'libs/ng-tags-input-3.0.0'
 import 'libs/select/select'
 
+// CSS
+import 'angular/angular-csp.css'
+
 // Polyfill fetch for IE11
 import 'isomorphic-unfetch'
 

services/web/webpack.config.test.js

@@ -1,3 +1,4 @@
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const merge = require('webpack-merge')
 
 const base = require('./webpack.config')
@@ -5,6 +6,8 @@ const base = require('./webpack.config')
 module.exports = merge(base, {
   mode: 'development',
 
+  plugins: [new MiniCssExtractPlugin()],
+
   // Karma configures entry & output for us, so disable these
   entry: null,
   output: null