fix(mock-doc): updated node.prepend to work even if there are no existing children (#6640)

* Updated node.prepend to work even if there are no existing children to insert the new child before

* Updated addGlobalStyleToComponents option to default to 'client' and only attempt to add globalStyles when hydrating if the option is set to true

* Formatted changes with prettier

Author: kyleMessnerLillyContractor

src/compiler/bundle/app-data-plugin.ts

@@ -5,6 +5,7 @@ import type { LoadResult, Plugin, ResolveIdResult, TransformResult } from 'rollu
 import ts from 'typescript';
 
 import type * as d from '../../declarations';
+import type { BundlePlatform } from './bundle-interface';
 import { removeCollectionImports } from '../transformers/remove-collection-imports';
 import { APP_DATA_CONDITIONAL, STENCIL_APP_DATA_ID, STENCIL_APP_GLOBALS_ID } from './entry-alias-ids';
 
@@ -23,7 +24,7 @@ export const appDataPlugin = (
   compilerCtx: d.CompilerCtx,
   buildCtx: d.BuildCtx,
   buildConditionals: d.BuildConditionals,
-  platform: 'client' | 'hydrate' | 'worker',
+  platform: BundlePlatform,
 ): Plugin => {
   if (!platform) {
     return {
@@ -62,7 +63,7 @@ export const appDataPlugin = (
       if (id === STENCIL_APP_GLOBALS_ID) {
         const s = new MagicString(``);
         appendGlobalScripts(globalScripts, s);
-        await appendGlobalStyles(buildCtx, s);
+        await appendGlobalStyles(buildCtx, s, platform);
         return s.toString();
       }
       if (id === STENCIL_APP_DATA_ID) {
@@ -215,12 +216,13 @@ const appendGlobalScripts = (globalScripts: GlobalScript[], s: MagicString) => {
  *
  * @param buildCtx the build context
  * @param s the MagicString to append the global styles onto
+ * @param platform the platform that is being built
  */
-const appendGlobalStyles = async (buildCtx: d.BuildCtx, s: MagicString) => {
-  const globalStyles =
-    buildCtx.config.globalStyle && buildCtx.config.extras.addGlobalStyleToComponents !== false
-      ? await buildCtx.stylesPromise
-      : '';
+const appendGlobalStyles = async (buildCtx: d.BuildCtx, s: MagicString, platform: BundlePlatform) => {
+  const { addGlobalStyleToComponents } = buildCtx.config.extras;
+  const shouldIncludeGlobalStyles =
+    addGlobalStyleToComponents === true || (addGlobalStyleToComponents === 'client' && platform === 'client');
+  const globalStyles = buildCtx.config.globalStyle && shouldIncludeGlobalStyles ? await buildCtx.stylesPromise : '';
   s.append(`export const globalStyles = ${JSON.stringify(globalStyles)};\n`);
 };
 

src/compiler/bundle/bundle-interface.ts

@@ -17,7 +17,7 @@ export interface BundleOptions {
    * and omitted from the generated bundle.
    */
   externalRuntime?: boolean;
-  platform: 'client' | 'hydrate' | 'worker';
+  platform: BundlePlatform;
   /**
    * A collection of TypeScript transformation factories to apply during the "before" stage of the TypeScript
    * compilation pipeline (before built-in .js transformations)
@@ -59,3 +59,5 @@ export interface BundleOptions {
    */
   preserveEntrySignatures?: PreserveEntrySignaturesOption;
 }
+
+export type BundlePlatform = 'client' | 'hydrate' | 'worker';

src/compiler/bundle/core-resolve-plugin.ts

@@ -3,6 +3,7 @@ import { dirname } from 'path';
 import type { Plugin } from 'rollup';
 
 import type * as d from '../../declarations';
+import type { BundlePlatform } from './bundle-interface';
 import { HYDRATED_CSS } from '../../runtime/runtime-constants';
 import { fetchModuleAsync } from '../sys/fetch/fetch-module-async';
 import { getStencilModuleUrl, packageVersions } from '../sys/fetch/fetch-utils';
@@ -20,7 +21,7 @@ import {
 export const coreResolvePlugin = (
   config: d.ValidatedConfig,
   compilerCtx: d.CompilerCtx,
-  platform: 'client' | 'hydrate' | 'worker',
+  platform: BundlePlatform,
   externalRuntime: boolean,
   lazyLoad: boolean,
 ): Plugin => {

src/compiler/bundle/plugin-helper.ts

@@ -1,8 +1,9 @@
 import { buildError, relative } from '@utils';
 
 import type * as d from '../../declarations';
+import type { BundlePlatform } from './bundle-interface';
 
-export const pluginHelper = (config: d.ValidatedConfig, builtCtx: d.BuildCtx, platform: string) => {
+export const pluginHelper = (config: d.ValidatedConfig, builtCtx: d.BuildCtx, platform: BundlePlatform) => {
   return {
     name: 'pluginHelper',
     resolveId(importee: string, importer: string): null {

src/compiler/bundle/server-plugin.ts

@@ -3,8 +3,9 @@ import { isAbsolute } from 'path';
 import type { Plugin } from 'rollup';
 
 import type * as d from '../../declarations';
+import type { BundlePlatform } from './bundle-interface';
 
-export const serverPlugin = (config: d.ValidatedConfig, platform: string): Plugin => {
+export const serverPlugin = (config: d.ValidatedConfig, platform: BundlePlatform): Plugin => {
   const isHydrateBundle = platform === 'hydrate';
   const serverVarid = `@removed-server-code`;
 

src/compiler/bundle/worker-plugin.ts

@@ -2,6 +2,7 @@ import { generatePreamble, hasError, normalizeFsPath } from '@utils';
 import type { Plugin, PluginContext, TransformResult } from 'rollup';
 
 import type * as d from '../../declarations';
+import type { BundlePlatform } from './bundle-interface';
 import { optimizeModule } from '../optimize/optimize-module';
 import { bundleOutput } from './bundle-output';
 import { STENCIL_INTERNAL_ID } from './entry-alias-ids';
@@ -10,7 +11,7 @@ export const workerPlugin = (
   config: d.ValidatedConfig,
   compilerCtx: d.CompilerCtx,
   buildCtx: d.BuildCtx,
-  platform: string,
+  platform: BundlePlatform,
   inlineWorkers: boolean,
 ): Plugin => {
   if (platform === 'worker' || platform === 'hydrate') {

src/compiler/config/test/validate-config.spec.ts

@@ -407,7 +407,7 @@ describe('validation', () => {
     expect(config.extras.tagNameTransform).toBe(false);
     expect(config.extras.additionalTagTransformers).toBe(false);
     expect(config.extras.scopedSlotTextContentFix).toBe(false);
-    expect(config.extras.addGlobalStyleToComponents).toBe(true);
+    expect(config.extras.addGlobalStyleToComponents).toBe('client');
     expect(config.extras.additionalTagTransformers).toBe(false);
   });
 

src/compiler/config/validate-config.ts

@@ -155,7 +155,9 @@ export const validateConfig = (
   validatedConfig.extras.additionalTagTransformers =
     validatedConfig.extras.additionalTagTransformers === true ||
     (!devMode && validatedConfig.extras.additionalTagTransformers === 'prod');
-  validatedConfig.extras.addGlobalStyleToComponents = validatedConfig.extras.addGlobalStyleToComponents !== false;
+  validatedConfig.extras.addGlobalStyleToComponents = isBoolean(validatedConfig.extras.addGlobalStyleToComponents)
+    ? validatedConfig.extras.addGlobalStyleToComponents
+    : 'client';
 
   // TODO(STENCIL-914): remove when `experimentalSlotFixes` is the default behavior
   // If the user set `experimentalSlotFixes` and any individual slot fix flags to `false`, we need to log a warning

src/declarations/stencil-private.ts

@@ -201,7 +201,7 @@ export interface BuildConditionals extends Partial<BuildFeatures> {
   experimentalSlotFixes?: boolean;
   // TODO(STENCIL-1086): remove this option when it's the default behavior
   experimentalScopedSlotChanges?: boolean;
-  addGlobalStyleToComponents?: boolean;
+  addGlobalStyleToComponents?: boolean | 'client';
 }
 
 export type ModuleFormat =

src/declarations/stencil-public-compiler.ts

@@ -428,15 +428,18 @@ interface ConfigExtrasBase {
 
   /**
    * By default Stencil turns the stylesheet provided to `globalStyle` into a constructable stylesheet
-   * and adds it to each component which can be useful for sharing styles efficiently across components.
-   * In some cases this can be undesirable:
-   * - If `globalStyle` is intended to configure the lightDOM only
-   * - If `globalStyle` is large it can bloat the size of SSR output when using declarative-shadow-dom
+   * and adds it to each component when rendered on the client which can be useful for sharing styles
+   * efficiently across components.
+   *
+   * If you want Stencil to also add the `globalStyle` to each component when rendering on the server
+   * then set this to `true`. If your `globalStyle` sheet is large then doing this may bloat the size
+   * of your SSR output when using declarative-shadow-dom.
+   *
    * Setting this to `false` will prevent Stencil from adding any `globalStyle` to each component.
    *
-   * Defaults to `true`.
+   * Defaults to `'client'`.
    */
-  addGlobalStyleToComponents?: boolean;
+  addGlobalStyleToComponents?: boolean | 'client';
 }
 
 // TODO(STENCIL-914): delete this interface when `experimentalSlotFixes` is the default behavior