[sass] compress in prod (#32139)

src/dev/build/tasks/transpile_scss_task.js

@@ -34,7 +34,13 @@ export const TranspileScssTask = {
     const uiExports = collectUiExports(enabledPlugins);
 
     try {
-      const bundles = await buildAll(uiExports.styleSheetPaths, log, build.resolvePath('built_assets/css'));
+      const bundles = await buildAll({
+        styleSheets: uiExports.styleSheetPaths,
+        log,
+        buildDir: build.resolvePath('built_assets/css'),
+        outputStyle: 'compressed',
+        sourceMap: false
+      });
       bundles.forEach(bundle => log.info(`Compiled SCSS: ${bundle.sourcePath} (theme=${bundle.theme})`));
     } catch (error) {
       const { message, line, file } = error;

src/legacy/server/sass/build.js

@@ -57,7 +57,7 @@ const makeAsset = (request, { path, root, boundry, copyRoot, urlRoot }) => {
 };
 
 export class Build {
-  constructor({ log, sourcePath, targetPath, urlImports, theme }) {
+  constructor({ log, sourcePath, targetPath, urlImports, theme, sourceMap  = true, outputStyle = 'nested' }) {
     this.log = log;
     this.sourcePath = sourcePath;
     this.sourceDir = dirname(this.sourcePath);
@@ -66,6 +66,8 @@ export class Build {
     this.urlImports = urlImports;
     this.theme = theme;
     this.includedFiles = [sourcePath];
+    this.sourceMap = sourceMap;
+    this.outputStyle = outputStyle;
   }
 
   /**
@@ -88,8 +90,9 @@ export class Build {
     const rendered = await renderSass({
       file: this.sourcePath,
       outFile: this.targetPath,
-      sourceMap: true,
-      sourceMapEmbed: true,
+      sourceMap: this.sourceMap,
+      outputStyle: this.outputStyle,
+      sourceMapEmbed: this.sourceMap,
       includePaths: [
         resolve(__dirname, '../../../../node_modules'),
       ],

src/legacy/server/sass/build_all.js

@@ -21,7 +21,7 @@ import { resolve } from 'path';
 
 import { Build } from './build';
 
-export async function buildAll(styleSheets, log, buildDir) {
+export async function buildAll({ styleSheets, log, buildDir, sourceMap, outputStyle }) {
   const bundles = await Promise.all(styleSheets.map(async styleSheet => {
 
     if (!styleSheet.localPath.endsWith('.scss')) {
@@ -31,6 +31,8 @@ export async function buildAll(styleSheets, log, buildDir) {
     const bundle = new Build({
       sourcePath: styleSheet.localPath,
       log,
+      sourceMap,
+      outputStyle,
       theme: styleSheet.theme,
       targetPath: resolve(buildDir, styleSheet.publicPath),
       urlImports: styleSheet.urlImports

src/legacy/server/sass/index.js

@@ -45,7 +45,11 @@ export async function sassMixin(kbnServer, server, config) {
   };
 
   try {
-    scssBundles = await buildAll(kbnServer.uiExports.styleSheetPaths, log, fromRoot('built_assets/css'));
+    scssBundles = await buildAll({
+      styleSheets: kbnServer.uiExports.styleSheetPaths,
+      log,
+      buildDir: fromRoot('built_assets/css')
+    });
 
     scssBundles.forEach(bundle => {
       bundle.includedFiles.forEach(file => trackedFiles.add(file));