fixup build process to better support front-end packages

packages/kbn-optimizer/src/worker/webpack.config.ts

@@ -28,6 +28,14 @@ const IS_CODE_COVERAGE = !!process.env.CODE_COVERAGE;
 const ISTANBUL_PRESET_PATH = require.resolve('@kbn/babel-preset/istanbul_preset');
 const BABEL_PRESET_PATH = require.resolve('@kbn/babel-preset/webpack_preset');
 
+const nodeModulesButNotKbnPackages = (path: string) => {
+  if (!path.includes('node_modules')) {
+    return false;
+  }
+
+  return !path.includes(`node_modules${Path.sep}@kbn${Path.sep}`);
+};
+
 export function getWebpackConfig(bundle: Bundle, bundleRefs: BundleRefs, worker: WorkerConfig) {
   const ENTRY_CREATOR = require.resolve('./entry_point_creator');
 
@@ -134,7 +142,7 @@ export function getWebpackConfig(bundle: Bundle, bundleRefs: BundleRefs, worker:
         },
         {
           test: /\.scss$/,
-          exclude: /node_modules/,
+          exclude: nodeModulesButNotKbnPackages,
           oneOf: [
             ...worker.themeTags.map((theme) => ({
               resourceQuery: `?${theme}`,

packages/kbn-react-page-template/BUILD.bazel

@@ -9,7 +9,8 @@ SOURCE_FILES = glob(
   [
     "src/**/*.ts",
     "src/**/*.tsx",
-    "types/**/*.ts"
+    "src/**/*.scss",
+    "src/**/*.svg",
   ],
   exclude = [
     "**/*.test.*",
@@ -26,7 +27,6 @@ filegroup(
 )
 
 NPM_MODULE_EXTRA_FILES = [
-  "react/package.json",
   "package.json",
   "README.md"
 ]
@@ -41,22 +41,29 @@ RUNTIME_DEPS = [
 
 TYPES_DEPS = [
   "//packages/kbn-babel-preset",
+  "//packages/kbn-i18n",
   "@npm//tslib",
   "@npm//@types/jest",
   "@npm//@types/prop-types",
   "@npm//@types/classnames",
   "@npm//@types/react",
   "@npm//@elastic/eui",
-   "//packages/kbn-i18n",
 ]
 
 jsts_transpiler(
-  name = "target_node",
+  name = "target_webpack",
   srcs = SRCS,
   build_pkg_name = package_name(),
   web = True,
 )
 
+jsts_transpiler(
+  name = "target_node",
+  srcs = SRCS,
+  build_pkg_name = package_name(),
+  web = False,
+)
+
 ts_config(
   name = "tsconfig",
   src = "tsconfig.json",
@@ -83,7 +90,7 @@ ts_project(
 js_library(
   name = PKG_BASE_NAME,
   srcs = NPM_MODULE_EXTRA_FILES,
-  deps = RUNTIME_DEPS + [":target_node", ":tsc_types"],
+  deps = RUNTIME_DEPS + [":target_node", ":target_webpack", ":tsc_types"],
   package_name = PKG_REQUIRE_NAME,
   visibility = ["//visibility:public"],
 )

packages/kbn-react-page-template/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@kbn/react-page-template",
   "main": "./target_node/index.js",
+  "browser": "./target_webpack/index.js",
   "types": "./target_types/index.d.ts",
   "version": "1.0.0",
   "license": "SSPL-1.0 OR Elastic License 2.0",

packages/kbn-react-page-template/src/solution_nav/solution_nav_avatar.scss

@@ -7,7 +7,7 @@
     line-height: 100px;
     border-radius: 100px;
     display: inline-block;
-    background: $euiColorEmptyShade url('../../assets/texture.svg') no-repeat;
+    background: $euiColorEmptyShade url('../assets/texture.svg') no-repeat;
     background-size: cover, 125%;
     text-align: center;
   }

src/dev/bazel/jsts_transpiler.bzl

@@ -33,6 +33,7 @@ def jsts_transpiler(name, srcs, build_pkg_name, web = False, root_input_dir = "s
     "--out-dir",
     "$(@D)",
     "--no-babelrc",
+    "--copy-files",
     "--extensions",
     ".ts,.tsx,.js",
   ] + inline_presets + additional_args