PostCSS not running for exposed Component's styles

[JGhignatti]

With what library do you have an issue?

native-federation

Reproduction of the bug/regression with instructions

GitHub repo with reproduction can be found here.

1. ng new nf-postcss-remote-repro
2. npm install -D tailwindcss @tailwindcss/postcss postcss and setup as described here, but skip the styles.css part.
3. npm install -D @angular-architects/native-federation
4. ng g @angular-architects/native-federation:init --project nf-postcss-remote-repro --type remote --port 4201

Update the app as follows to simulate my scenario:

5. Create a new Component to expose as Remote Module (src/app/exposed-modules/feature-1/feature-1.ts); Import TailwindCSS in its styles; Use a TailwindCSS class in the template:

@Component({
  selector: 'app-remote-feature-1',
  template: `
    <div class="p-4">
      <button>Click</button>
    </div>
  `,
  styles: `
    @import 'tailwindcss';
  `,
})
export class Feature1 {}

6. Make the app render the Feature-1 component in app.routes.ts

export const routes: Routes = [
  {
    path: '',
    component: Feature1,
  },
];

7. Update federation.config.js to expose the Feature-1 component

exposes: {
  "./Feature-1": "./src/app/exposed-modules/feature-1/feature-1.ts",
},

8. Run ng build
9. Navigate to dist/nf-postcss-remote-repro/browser/Feature-1-<some hash>.js and leave the file open (format the file for better readability).
10. Navigate to dist/nf-postcss-remote-repro/browser/main-<some hash>.js and locate the following part at the end

return{imports:o,scopes:{}}})}I().catch(e=>console.error(e)).then(e=>import("./chunk-<some hash>.js")).catch(e=>console.error(e));

11. Navigate to that ./chunk-<some hash>.js inside the import function and leave the file open (format the file for better readability).

Expected behavior

The file I expose and load in my Host is the Feature-1-<some hash>.js.

When I check the file's contents, I expect to find the inline component styles to have been run by PostCSS.

Actual behavior:

I can easily see that it didn't by the following observations:

1. Inside Feature-1-<some hash>.js I can see this part:

styles: [
      '@layer theme,base,components,utilities;@layer theme{@theme default{ ...

@theme is a custom at-rule, if this file had gone through PostCSS, it'd have been properly replaced.

2. If you search for that TailwindCSS class I used p-4, you'll only find it here

consts: [[1, "p-4"]],

But I expected it to be present in that styles property (it's not).

Versions of Native/Module Federation, Angular, Node, Browser, and operating system

nf-postcss-remote-repro@0.0.0
├── @angular-architects/native-federation@20.1.7
├── @angular-devkit/build-angular@20.3.6
├── @angular/animations@20.3.5
├── @angular/build@20.3.6
├── @angular/cli@20.3.6
├── @angular/common@20.3.5
├── @angular/compiler-cli@20.3.5
├── @angular/compiler@20.3.5
├── @angular/core@20.3.5
├── @angular/forms@20.3.5
├── @angular/platform-browser@20.3.5
├── @angular/router@20.3.5
├── @softarc/native-federation-node@3.3.6
├── @tailwindcss/postcss@4.1.14
├── @types/jasmine@5.1.10
├── es-module-shims@1.10.1
├── jasmine-core@5.8.0
├── karma-chrome-launcher@3.2.0
├── karma-coverage@2.2.1
├── karma-jasmine-html-reporter@2.1.0
├── karma-jasmine@5.1.0
├── karma@6.4.4
├── postcss@8.5.6
├── rxjs@7.8.2
├── tailwindcss@4.1.14
├── tslib@2.8.1
├── typescript@5.8.3
└── zone.js@0.15.1

Node: v22.16.0

Other information

Inside the dist/nf-postcss-remote-repro/browser/main-<some hash>.js file, find the component (selectors: [["app-remote-feature-1"]],).

If you perform the same 2 checks in this file, you'll see a different behavior:

1. From this line

styles: [
      `@layer theme,base,components,utilities;@layer theme{[_ngcontent-%COMP%]:root, [_nghost-%COMP%]{--font-sans: ...

There's no @theme at-rule. Also, Angular correctly scoped the styles to my component and added [_ngcontent-%COMP%] to the CSS rules.

2. If you search for that p-4 I used, you'll find it in 2 places:

• Inside the consts: [[1, "p-4"]],, but also
• Inside the styles property: ...@layer utilities{.p-4[_ngcontent-%COMP%]{padding:calc(var(--spacing) * 4)}}

---

The exposed Remote Module is "less-complete" than the version I see when I run ng serve.

I would be willing to submit a PR to fix this issue

• Yes
• No

[JGhignatti]

Mu steps to reproduce are very similar to this comment in another issue, only missing the encapsulation: ViewEncapsulation.None.
But adding the different encapsulation did not show positive results, the findings are the same still.

[Aukevanoost]

Thanks! I'll dig into it when I can

[JGhignatti]

I was able to figure out the problem and implement a solution, please check the PR.

Turns out with TailwindCSS v4 and a setup without a tailwind.config.js file caused the compilation from the Native Federation side to miss Tailwind. The setup was missing the addition of the PostCSS config to cover this scenario.

[DungDD10]

Hi @Aukevanoost , @JGhignatti
When i setup with the latest ver of angular (V21.x + Native Federration V21). Why the issue still happen?
Many tks of give yours res!

[JGhignatti]

@DungDD10 please refer to #1021, they're not the same issue.

[DungDD10]

[like] Dung Dao Dinh reacted to your message:

…

________________________________ From: João Ghignatti ***@***.***> Sent: Monday, December 15, 2025 10:43:40 PM To: angular-architects/module-federation-plugin ***@***.***> Cc: Dung Dao Dinh ***@***.***>; Mention ***@***.***> Subject: Re: [angular-architects/module-federation-plugin] PostCSS not running for exposed Component's styles (Issue #964) [https://avatars.githubusercontent.com/u/27514735?s=20&v=4]JGhignatti left a comment (angular-architects/module-federation-plugin#964)<#964 (comment)> @DungDD10<https://github.com/DungDD10> please refer to #1021<#1021>, they're not the same issue. — Reply to this email directly, view it on GitHub<#964 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/BUOGA4FLDF7HPCCMDJCUO6L4B42RZAVCNFSM6AAAAACJJVMZUGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZTMNJXHEYTGNRQHA>. You are receiving this because you were mentioned.Message ID: ***@***.***> *********************************************************************** IMPORTANT NOTICE This email may contain confidential and/ or privileged information that belongs to FPT Software. If you are not the intended recipient or might have received this email by accident from an unreliable source, please notify the sender from FPT Software immediately and destroy this email. Keep in mind that any unauthorized copying, editing, disclosure or distribution of the material in this email is strictly forbidden, plus against the law by which FPT Software and involved clients abide.