ui: Change approach to loading debug.css (#12242)

We need a way to load certain CSS based on the environment you are viewing, i.e. we have debug CSS that we use for our Eng Documentation and various other DX utilities that shouldn't be compiled into our production or test builds.

Previously we would compile two entirely different CSS files (app and debug) and the load one or the other depending on which environment you were in.

This approach just empties out the debug.css file in certain environments (prod/test) which means we can just import that file from app. When in staging/development this imports the contents of debug.css (quite a bit of CSS) whereas when building for production/test this debug.css is emptied out during the build process.

There is a slight little hack in order to have this work, we import _debug.scss which imports the debug.scss file. I couldn't for the life of me figure out how to have broccoli empty out a file during the build process, so instead we essentially copy over debug.scss during dev and create an empty file during prod to _debug.scss.

When using make build to build an artifact for production CSS remains at ~58kb (during dev its a lot bigger than this)

ui/packages/consul-ui/GNUmakefile

@@ -5,8 +5,8 @@ all: build
 
 deps: ../../node_modules clean
 
+# incase we ever need to clean anything again
 clean:
-	rm -rf ./tmp
 
 build-staging: deps
 	yarn run build:staging
@@ -17,6 +17,9 @@ build-ci: deps
 build: deps
 	yarn run build
 
+build-debug:
+	BROCCOLI_DEBUG=* $(MAKE) build
+
 start: deps
 	yarn run start
 

ui/packages/consul-ui/app/styles/app.scss

@@ -15,3 +15,6 @@
 @import 'icons';
 /* global control of themeable components */
 @import 'themes';
+/* debug only, this is empty during a production build */
+/* but uses the contents of ./debug.scss during dev */
+@import '_debug';

ui/packages/consul-ui/app/styles/debug.scss

@@ -1,4 +1,3 @@
-@import './app';
 @import './base/icons/debug';
 @import 'prism-coldark-dark';
 

ui/packages/consul-ui/ember-cli-build.js

@@ -97,14 +97,8 @@ module.exports = function(defaults, $ = process.env) {
       // exclude docfy
       '@docfy/ember'
     ];
-  } else {
-    // add debug css is we are not in test or production environments
-    outputPaths.app = {
-      css: {
-        'debug': '/assets/debug.css'
-      }
-    }
   }
+
   if(['production'].includes(env)) {
     // everything apart from production is 'debug', including test
     // which means this and everything it affects is never tested

ui/packages/consul-ui/lib/colocated-components/index.js

@@ -3,6 +3,8 @@
 
 const Funnel = require('broccoli-funnel');
 const mergeTrees = require('broccoli-merge-trees');
+const writeFile = require('broccoli-file-creator');
+const read = require('fs').readFileSync;
 
 module.exports = {
   name: require('./package').name,
@@ -12,15 +14,18 @@ module.exports = {
    * @import 'app-name/components/component-name/index.scss'
    */
   treeForStyles: function(tree) {
+    let debug = read(`${this.project.root}/app/styles/debug.scss`);
+    if (['production', 'test'].includes(process.env.EMBER_ENV)) {
+      debug = '';
+    }
     return this._super.treeForStyles.apply(this, [
-      mergeTrees(
+      mergeTrees([
-        (tree || []).concat([
+        writeFile(`_debug.scss`, debug),
-          new Funnel(`${this.project.root}/app/components`, {
+        new Funnel(`${this.project.root}/app/components`, {
-            destDir: `app/components`,
+          destDir: `app/components`,
-            include: ['**/*.scss'],
+          include: ['**/*.scss'],
-          }),
+        }),
-        ])
+      ]),
-      ),
     ]);
   },
 };

ui/packages/consul-ui/lib/startup/templates/head.html.js

@@ -8,9 +8,7 @@ module.exports = ({ appName, environment, rootURL, config }) => `
   <link rel="icon" href="${rootURL}assets/favicon.svg" type="image/svg+xml">
   <link rel="apple-touch-icon" href="${rootURL}assets/apple-touch-icon.png">
   <link integrity="" rel="stylesheet" href="${rootURL}assets/vendor.css">
-  <link integrity="" rel="stylesheet" href="${rootURL}assets/${
+  <link integrity="" rel="stylesheet" href="${rootURL}assets/${appName}.css">
-    !['test', 'production'].includes(environment) ? 'debug' : appName
-}.css">
   ${
     environment === 'test' ? `<link rel="stylesheet" href="${rootURL}assets/test-support.css">` : ``
   }