[build] Include X-Pack plugins and use aliases (#22325)

Signed-off-by: Tyler Smalley <tyler.smalley@elastic.co>

src/core_plugins/kibana/public/discover/_index.scss

@@ -1,7 +1,7 @@
 @import 'components/fetch_error/index';
 @import 'directives/index';
 
-@import '../../../../ui/public/styles/local_search';
+@import 'ui/public/styles/local_search';
 
 @import 'hacks';
 

src/core_plugins/kibana/public/index.scss

@@ -1,4 +1,4 @@
-@import '../../../../src/ui/public/styles/styling_constants';
+@import 'ui/public/styles/styling_constants';
 
 // Discover styles
 @import './discover/index';

src/core_plugins/status_page/public/index.scss

@@ -1,4 +1,4 @@
-@import '../../../ui/public/styles/styling_constants';
+@import 'ui/public/styles/styling_constants';
 
 // SASSTODO: Remove when K7 applies background color to body
 .stsPage {

src/dev/build/tasks/transpile_scss_task.js

@@ -26,7 +26,9 @@ export const TranspileScssTask = {
 
   async run(config, log, build) {
     const scanDirs = [ build.resolvePath('src/core_plugins') ];
-    const { spec$ } = findPluginSpecs({ plugins: { scanDirs, paths: [] } });
+    const paths = [ build.resolvePath('node_modules/x-pack') ];
+
+    const { spec$ } = findPluginSpecs({ plugins: { scanDirs, paths } });
     const enabledPlugins = await spec$.pipe(toArray()).toPromise();
 
     try {

src/server/sass/build.js

@@ -66,6 +66,10 @@ export class Build {
       outFile,
       sourceMap: true,
       sourceMapEmbed: true,
+      includePaths: [
+        path.resolve(__dirname, '../..'),
+        path.resolve(__dirname, '../../../node_modules')
+      ]
     });
 
 

src/server/sass/build.test.js

@@ -17,6 +17,7 @@
  * under the License.
  */
 
+import path from 'path';
 import sass from 'node-sass';
 import { Build } from './build';
 
@@ -27,7 +28,7 @@ describe('SASS builder', () => {
 
   it('generates a glob', () => {
     const builder = new Build('/foo/style.sass');
-    expect(builder.getGlob()).toEqual('/foo/**/*.s{a,c}ss');
+    expect(builder.getGlob()).toEqual(path.join('/foo', '**', '*.s{a,c}ss'));
   });
 
   it('builds SASS', () => {
@@ -35,16 +36,15 @@ describe('SASS builder', () => {
     const builder = new Build('/foo/style.sass');
     builder.build();
 
-    expect(sass.render.mock.calls[0][0]).toEqual({
-      file: '/foo/style.sass',
-      outFile: '/foo/style.css',
-      sourceMap: true,
-      sourceMapEmbed: true
-    });
+    const sassCall = sass.render.mock.calls[0][0];
+    expect(sassCall.file).toEqual('/foo/style.sass');
+    expect(sassCall.outFile).toEqual(path.join('/foo', 'style.css'));
+    expect(sassCall.sourceMap).toBe(true);
+    expect(sassCall.sourceMapEmbed).toBe(true);
   });
 
   it('has an output file with a different extension', () => {
     const builder = new Build('/foo/style.sass');
-    expect(builder.outputPath()).toEqual('/foo/style.css');
+    expect(builder.outputPath()).toEqual(path.join('/foo', 'style.css'));
   });
 });

src/ui/public/styles/_styling_constants.scss

@@ -1,9 +1,9 @@
 // EUI global scope
-@import '../../../../node_modules/@elastic/eui/src/themes/k6/k6_globals';
-@import '../../../../node_modules/@elastic/eui/src/themes/k6/k6_colors_light';
-@import '../../../../node_modules/@elastic/eui/src/global_styling/functions/index';
-@import '../../../../node_modules/@elastic/eui/src/global_styling/variables/index';
-@import '../../../../node_modules/@elastic/eui/src/global_styling/mixins/index';
+@import '@elastic/eui/src/themes/k6/k6_globals';
+@import '@elastic/eui/src/themes/k6/k6_colors_light';
+@import '@elastic/eui/src/global_styling/functions/index';
+@import '@elastic/eui/src/global_styling/variables/index';
+@import '@elastic/eui/src/global_styling/mixins/index';
 
 // EUI TODO: Add this
 @mixin kibanaCircleLogo() {

x-pack/plugins/dashboard_mode/public/index.scss

@@ -1,3 +1,3 @@
-@import '../../../../src/ui/public/styles/styling_constants';
+@import 'ui/public/styles/styling_constants';
 
-@import '../../../../src/core_plugins/kibana/public/dashboard/index';
+@import 'core_plugins/kibana/public/dashboard/index';

x-pack/plugins/monitoring/public/index.scss

@@ -1,5 +1,5 @@
 // Import the EUI global scope so we can use EUI constants
-@import '../../../../src/ui/public/styles/_styling_constants';
+@import 'ui/public/styles/_styling_constants';
 
 // Temporary hacks
 @import 'hacks';