[kbn/optimizer] fix ui/* url rewrites in dist (elastic#58627)

* [kbn/optimizer] fix ui/* url rewrites in dist

* add tests to verify styles are built correctly and ui-rewrites are happening

* clarify change to dirs creation

* create tested & shared parsePath helper

* update renovate config

* split implementation of parsePath for dir and file paths

* switch to valid css property

Co-authored-by: Elastic Machine <[email protected]>

package.json

@@ -349,6 +349,7 @@
     "@types/mustache": "^0.8.31",
     "@types/node": "^10.12.27",
     "@types/node-forge": "^0.9.0",
+    "@types/normalize-path": "^3.0.0",
     "@types/numeral": "^0.0.26",
     "@types/opn": "^5.1.0",
     "@types/pegjs": "^0.10.1",

packages/kbn-optimizer/src/__fixtures__/mock_repo/plugins/bar/public/index.ts

@@ -17,6 +17,7 @@
  * under the License.
  */
 
+import './legacy/styles.scss';
 import { fooLibFn } from '../../foo/public/index';
 export * from './lib';
 export { fooLibFn };

packages/kbn-optimizer/src/__fixtures__/mock_repo/plugins/bar/public/legacy/styles.scss

@@ -0,0 +1,4 @@
+body {
+  width: $globalStyleConstant;
+  background-image: url("ui/icon.svg");
+}

packages/kbn-optimizer/src/__fixtures__/mock_repo/src/legacy/ui/public/styles/_styling_constants.scss

@@ -0,0 +1 @@
+$globalStyleConstant: 10;

packages/kbn-optimizer/src/integration_tests/basic_optimization.test.ts

@@ -24,14 +24,14 @@ import { inspect } from 'util';
 import cpy from 'cpy';
 import del from 'del';
 import { toArray, tap } from 'rxjs/operators';
-import { createAbsolutePathSerializer } from '@kbn/dev-utils';
-import { runOptimizer, OptimizerConfig, OptimizerUpdate } from '@kbn/optimizer';
+import { createAbsolutePathSerializer, ToolingLog, REPO_ROOT } from '@kbn/dev-utils';
+import { runOptimizer, OptimizerConfig, OptimizerUpdate, logOptimizerState } from '@kbn/optimizer';
 
 const TMP_DIR = Path.resolve(__dirname, '../__fixtures__/__tmp__');
 const MOCK_REPO_SRC = Path.resolve(__dirname, '../__fixtures__/mock_repo');
 const MOCK_REPO_DIR = Path.resolve(TMP_DIR, 'mock_repo');
 
-expect.addSnapshotSerializer(createAbsolutePathSerializer(MOCK_REPO_DIR));
+expect.addSnapshotSerializer(createAbsolutePathSerializer(REPO_ROOT));
 
 beforeAll(async () => {
   await del(TMP_DIR);
@@ -51,20 +51,25 @@ it('builds expected bundles, saves bundle counts to metadata', async () => {
     repoRoot: MOCK_REPO_DIR,
     pluginScanDirs: [Path.resolve(MOCK_REPO_DIR, 'plugins')],
     maxWorkerCount: 1,
+    dist: true,
   });
 
   expect(config).toMatchSnapshot('OptimizerConfig');
 
-  const msgs = await runOptimizer(config)
-    .pipe(
-      tap(state => {
-        if (state.event?.type === 'worker stdio') {
-          // eslint-disable-next-line no-console
-          console.log('worker', state.event.stream, state.event.chunk.toString('utf8'));
+  const log = new ToolingLog({
+    level: 'error',
+    writeTo: {
+      write(chunk) {
+        if (chunk.endsWith('\n')) {
+          chunk = chunk.slice(0, -1);
         }
-      }),
-      toArray()
-    )
+        // eslint-disable-next-line no-console
+        console.error(chunk);
+      },
+    },
+  });
+  const msgs = await runOptimizer(config)
+    .pipe(logOptimizerState(log, config), toArray())
     .toPromise();
 
   const assert = (statement: string, truth: boolean, altStates?: OptimizerUpdate[]) => {
@@ -133,23 +138,31 @@ it('builds expected bundles, saves bundle counts to metadata', async () => {
   expect(foo.cache.getModuleCount()).toBe(3);
   expect(foo.cache.getReferencedFiles()).toMatchInlineSnapshot(`
     Array [
-      <absolute path>/plugins/foo/public/ext.ts,
-      <absolute path>/plugins/foo/public/index.ts,
-      <absolute path>/plugins/foo/public/lib.ts,
+      <absolute path>/packages/kbn-optimizer/src/__fixtures__/__tmp__/mock_repo/plugins/foo/public/ext.ts,
+      <absolute path>/packages/kbn-optimizer/src/__fixtures__/__tmp__/mock_repo/plugins/foo/public/index.ts,
+      <absolute path>/packages/kbn-optimizer/src/__fixtures__/__tmp__/mock_repo/plugins/foo/public/lib.ts,
     ]
   `);
 
   const bar = config.bundles.find(b => b.id === 'bar')!;
   expect(bar).toBeTruthy();
   bar.cache.refresh();
-  expect(bar.cache.getModuleCount()).toBe(5);
+  expect(bar.cache.getModuleCount()).toBe(
+    // code + styles + style/css-loader runtime
+    14
+  );
+
   expect(bar.cache.getReferencedFiles()).toMatchInlineSnapshot(`
     Array [
-      <absolute path>/plugins/foo/public/ext.ts,
-      <absolute path>/plugins/foo/public/index.ts,
-      <absolute path>/plugins/foo/public/lib.ts,
-      <absolute path>/plugins/bar/public/index.ts,
-      <absolute path>/plugins/bar/public/lib.ts,
+      <absolute path>/node_modules/css-loader/package.json,
+      <absolute path>/node_modules/style-loader/package.json,
+      <absolute path>/packages/kbn-optimizer/src/__fixtures__/__tmp__/mock_repo/plugins/bar/public/index.ts,
+      <absolute path>/packages/kbn-optimizer/src/__fixtures__/__tmp__/mock_repo/plugins/bar/public/legacy/styles.scss,
+      <absolute path>/packages/kbn-optimizer/src/__fixtures__/__tmp__/mock_repo/plugins/bar/public/lib.ts,
+      <absolute path>/packages/kbn-optimizer/src/__fixtures__/__tmp__/mock_repo/plugins/foo/public/ext.ts,
+      <absolute path>/packages/kbn-optimizer/src/__fixtures__/__tmp__/mock_repo/plugins/foo/public/index.ts,
+      <absolute path>/packages/kbn-optimizer/src/__fixtures__/__tmp__/mock_repo/plugins/foo/public/lib.ts,
+      <absolute path>/packages/kbn-optimizer/src/__fixtures__/__tmp__/mock_repo/src/legacy/ui/public/icon.svg,
     ]
   `);
 });
@@ -159,6 +172,7 @@ it('uses cache on second run and exist cleanly', async () => {
     repoRoot: MOCK_REPO_DIR,
     pluginScanDirs: [Path.resolve(MOCK_REPO_DIR, 'plugins')],
     maxWorkerCount: 1,
+    dist: true,
   });
 
   const msgs = await runOptimizer(config)

typings/normalize_path/index.d.ts → packages/kbn-optimizer/src/worker/parse_path.test.ts

@@ -17,8 +17,20 @@
  * under the License.
  */
 
-declare function NormalizePath(path: string, stripTrailing?: boolean): string;
+import { parseFilePath, parseDirPath } from './parse_path';
 
-declare module 'normalize-path' {
-  export = NormalizePath;
-}
+const DIRS = ['/', '/foo/bar/baz/', 'c:\\', 'c:\\foo\\bar\\baz\\'];
+const AMBIGUOUS = ['/foo', '/foo/bar/baz', 'c:\\foo', 'c:\\foo\\bar\\baz'];
+const FILES = ['/foo/bar/baz.json', 'c:/foo/bar/baz.json', 'c:\\foo\\bar\\baz.json'];
+
+describe('parseFilePath()', () => {
+  it.each([...FILES, ...AMBIGUOUS])('parses %s', path => {
+    expect(parseFilePath(path)).toMatchSnapshot();
+  });
+});
+
+describe('parseDirPath()', () => {
+  it.each([...DIRS, ...AMBIGUOUS])('parses %s', path => {
+    expect(parseDirPath(path)).toMatchSnapshot();
+  });
+});

packages/kbn-optimizer/src/worker/parse_path.ts

@@ -0,0 +1,43 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import normalizePath from 'normalize-path';
+
+/**
+ * Parse an absolute path, supporting normalized paths from webpack,
+ * into a list of directories and root
+ */
+export function parseDirPath(path: string) {
+  const filePath = parseFilePath(path);
+  return {
+    ...filePath,
+    dirs: [...filePath.dirs, ...(filePath.filename ? [filePath.filename] : [])],
+    filename: undefined,
+  };
+}
+
+export function parseFilePath(path: string) {
+  const normalized = normalizePath(path);
+  const [root, ...others] = normalized.split('/');
+  return {
+    root: root === '' ? '/' : root,
+    dirs: others.slice(0, -1),
+    filename: others[others.length - 1] || undefined,
+  };
+}