ui: Add in-repo addon to configure inclusion of components/**/*.scss (#8660)

ui-v2/ember-cli-build.js

@@ -13,7 +13,11 @@ module.exports = function(defaults) {
     trees.app = new Funnel(
       'app',
       {
-        exclude: ['components/**/pageobject.js']
+        exclude: [
+          'components/**/pageobject.js',
+          'components/**/*.test-support.js',
+          'components/**/*.test.js'
+        ]
       }
     );
   }

ui-v2/lib/colocated-components/index.js

@@ -0,0 +1,25 @@
+'use strict';
+
+const Funnel = require('broccoli-funnel');
+const mergeTrees = require('broccoli-merge-trees');
+
+module.exports = {
+  name: require('./package').name,
+
+  /**
+   * Make any CSS available for import within app/components/component-name:
+   * @import 'app-name/components/component-name/index.scss'
+   */
+  treeForStyles: function(tree) {
+    return this._super.treeForStyles.apply(this, [
+      mergeTrees(
+        (tree || []).concat([
+          new Funnel(`${this.project.root}/app/components`, {
+            destDir: `app/components`,
+            include: ['**/*.scss'],
+          }),
+        ])
+      ),
+    ]);
+  },
+};

ui-v2/lib/colocated-components/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "colocated-components",
+  "keywords": [
+    "ember-addon"
+  ]
+}

ui-v2/package.json

@@ -62,6 +62,7 @@
     "base64-js": "^1.3.0",
     "broccoli-asset-rev": "^3.0.0",
     "broccoli-funnel": "^3.0.3",
+    "broccoli-merge-trees": "^3.0.2",
     "chalk": "^4.1.0",
     "clipboard": "^2.0.4",
     "css.escape": "^1.5.1",
@@ -140,6 +141,7 @@
   "ember-addon": {
     "paths": [
       "lib/block-slots",
+      "lib/colocated-components",
       "lib/commands",
       "lib/startup"
     ]