From c23a53e823b46abd5a56d9383a3d7e04b7876de2 Mon Sep 17 00:00:00 2001
From: Spencer <email@spalger.com>
Date: Thu, 19 Mar 2020 19:43:51 -0700
Subject: [PATCH] [canvas/shareable_runtime] sync sass loaders with
 kbn/optimizer (#60653) (#60716)

* [canvas/shareable_runtime] sync sass loaders with kbn/optimizer

* limit sass options to those relevant in this context

Co-authored-by: spalger <spalger@users.noreply.github.com>
Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Co-authored-by: spalger <spalger@users.noreply.github.com>
Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
---
 .../shareable_runtime/webpack.config.js       | 55 +++++++++++++++++--
 x-pack/package.json                           |  1 +
 2 files changed, 51 insertions(+), 5 deletions(-)

diff --git a/x-pack/legacy/plugins/canvas/shareable_runtime/webpack.config.js b/x-pack/legacy/plugins/canvas/shareable_runtime/webpack.config.js
index 0ce722eb90d43..66b0a7bc558cb 100644
--- a/x-pack/legacy/plugins/canvas/shareable_runtime/webpack.config.js
+++ b/x-pack/legacy/plugins/canvas/shareable_runtime/webpack.config.js
@@ -6,6 +6,7 @@
 
 const path = require('path');
 const webpack = require('webpack');
+const { stringifyRequest } = require('loader-utils'); // eslint-disable-line
 
 const {
   KIBANA_ROOT,
@@ -140,19 +141,63 @@ module.exports = {
       },
       {
         test: /\.scss$/,
-        exclude: /\.module.(s(a|c)ss)$/,
+        exclude: [/node_modules/, /\.module\.s(a|c)ss$/],
         use: [
-          { loader: 'style-loader' },
-          { loader: 'css-loader', options: { importLoaders: 2 } },
+          {
+            loader: 'style-loader',
+          },
+          {
+            loader: 'css-loader',
+            options: {
+              sourceMap: !isProd,
+            },
+          },
           {
             loader: 'postcss-loader',
             options: {
+              sourceMap: !isProd,
               config: {
-                path: require.resolve('./postcss.config.js'),
+                path: require.resolve('./postcss.config'),
+              },
+            },
+          },
+          {
+            loader: 'resolve-url-loader',
+            options: {
+              // eslint-disable-next-line no-unused-vars
+              join: (_, __) => (uri, base) => {
+                if (!base) {
+                  return null;
+                }
+
+                // manually force ui/* urls in legacy styles to resolve to ui/legacy/public
+                if (uri.startsWith('ui/') && base.split(path.sep).includes('legacy')) {
+                  return path.resolve(KIBANA_ROOT, 'src/legacy/ui/public', uri.replace('ui/', ''));
+                }
+
+                return null;
+              },
+            },
+          },
+          {
+            loader: 'sass-loader',
+            options: {
+              // must always be enabled as long as we're using the `resolve-url-loader` to
+              // rewrite `ui/*` urls. They're dropped by subsequent loaders though
+              sourceMap: true,
+              prependData(loaderContext) {
+                return `@import ${stringifyRequest(
+                  loaderContext,
+                  path.resolve(KIBANA_ROOT, 'src/legacy/ui/public/styles/_styling_constants.scss')
+                )};\n`;
+              },
+              webpackImporter: false,
+              sassOptions: {
+                outputStyle: 'nested',
+                includePaths: [path.resolve(KIBANA_ROOT, 'node_modules')],
               },
             },
           },
-          { loader: 'sass-loader' },
         ],
       },
       {
diff --git a/x-pack/package.json b/x-pack/package.json
index 76a9a62e7c092..e2fbb263931c8 100644
--- a/x-pack/package.json
+++ b/x-pack/package.json
@@ -142,6 +142,7 @@
     "jest-cli": "^24.9.0",
     "jest-styled-components": "^7.0.0",
     "jsdom": "^15.2.1",
+    "loader-utils": "^1.2.3",
     "madge": "3.4.4",
     "marge": "^1.0.1",
     "mocha": "^6.2.2",