feat: adapt global styles in WCs SSR

packages/brisa/src/utils/get-client-code-in-page/index.test.ts

@@ -22,7 +22,7 @@ const i18nCode = 3072;
 const brisaSize = 5743; // TODO: Reduce this size :/
 const webComponents = 1144;
 const unsuspenseSize = 217;
-const rpcSize = 2468; // TODO: Reduce this size
+const rpcSize = 2467; // TODO: Reduce this size
 const lazyRPCSize = 4171; // TODO: Reduce this size
 // lazyRPC is loaded after user interaction (action, link),
 // so it's not included in the initial size

packages/brisa/src/utils/ssr-web-component/index.test.tsx

@@ -856,5 +856,26 @@ describe('utils', () => {
       expect(output[2][0][2][0][2][0]).toBe('span');
       expect(output[2][0][2][0][2][2]).toBe('bar');
     });
+
+    it('should add style with the CSS_FILES imports when CSS_FILES comes and is not skipping global styles', async () => {
+      globalThis.mockConstants = {
+        ...getConstants(),
+        CSS_FILES: ['foo.css', 'bar.css'],
+      } as unknown as BrisaConstants;
+      const Component = ({ foo }: any) => <div>{foo}</div>;
+      const selector = 'web-component';
+      const output = (await SSRWebComponent(
+        {
+          'ssr-Component': Component,
+          'ssr-selector': selector,
+          foo: <span id="server-part">bar</span>,
+        },
+        requestContext,
+      )) as any;
+
+      expect(output[2][0][2][2][1]).toEqual({
+        html: `<style>@import '/foo.css';@import '/bar.css'</style>`,
+      });
+    });
   });
 });

packages/brisa/src/utils/ssr-web-component/index.tsx

@@ -2,6 +2,7 @@ import { toInline } from '@/helpers';
 import { Fragment as BrisaFragment } from '@/jsx-runtime';
 import type { RequestContext } from '@/types';
 import { getConstants } from '@/constants';
+import dangerHTML from '../danger-html';
 
 export const AVOID_DECLARATIVE_SHADOW_DOM_SYMBOL = Symbol.for(
   'AVOID_DECLARATIVE_SHADOW_DOM',
@@ -31,7 +32,7 @@ export default async function SSRWebComponent(
     selector = props.selector;
   }
 
-  const { WEB_CONTEXT_PLUGINS } = getConstants();
+  const { WEB_CONTEXT_PLUGINS, CSS_FILES } = getConstants();
   const showContent = !store.has(AVOID_DECLARATIVE_SHADOW_DOM_SYMBOL);
   const self = { shadowRoot: {}, attachInternals: voidFn } as any;
   let style = '';
@@ -98,21 +99,33 @@ export default async function SSRWebComponent(
     }
   }
 
+  // This should be calculated after the Component execution because the devs can
+  // skip global CSS setting adoptedStyleSheets to an empty array
+  // (this approach works in both worlds: SSR + client-side)
+  const skipGlobalCSS = self.shadowRoot.adoptedStyleSheets?.length === 0;
+  const useCSSImports = !skipGlobalCSS && CSS_FILES.length > 0;
+
   return (
     // @ts-ignore
     <Selector key={__key} {...props} __isWebComponent>
       {showContent && (
         <template
           shadowrootmode="open"
           // @ts-ignore
-          __skipGlobalCSS={self.shadowRoot.adoptedStyleSheets?.length === 0}
+          __skipGlobalCSS={skipGlobalCSS}
         >
           {content}
           {style.length > 0 && <style>{toInline(style)}</style>}
+          {useCSSImports &&
+            dangerHTML(`<style>${getCSSImports(CSS_FILES)}</style>`)}
         </template>
       )}
       {/* @ts-ignore */}
       <BrisaFragment slot="">{props.children}</BrisaFragment>
     </Selector>
   );
 }
+
+function getCSSImports(CSS_FILES: string[]) {
+  return CSS_FILES.map((file) => `@import '/${file}'`).join(';');
+}