Set up Master CSS in Angular

Keep Angular's builder and use the Master CSS CLI to generate a stylesheet it can load. During development, run both watchers: Master CSS updates the generated CSS, and Angular serves the app that imports it.

This setup assumes an existing browser-rendered Angular app with a global src/styles.css, a working npm start command and a supported Node.js 24 release. It uses Angular's default emulated encapsulation, which allows global styles to reach component templates. Shadow DOM components need styles inside their own shadow roots.

#Installation

1. #Add Master CSS

   Run the installer from the Angular project root:

   npm create @master/css@2.0.0 -- --framework angular --yes

   The static setup adds @master/css and @master/css-cli. For the installer's optional tooling and preview options, see Installation.

2. #Check the stylesheet connection

   The installer creates a Master CSS source entry at the project root:

   master.css

   @import '@master/css';

   It also adds this import to Angular's global stylesheet, preserving its existing contents:

   src/styles.css

   @import './master.generated.css';

   Keep src/styles.css in the application's build.options.styles array in angular.json. Angular's global styles configuration determines whether the generated CSS reaches the page. For a nonstandard workspace layout, adjust the output path and import together.

   Put Master CSS definitions such as @theme and @utility in master.css. Angular consumes the generated native CSS; its ordinary CSS builder does not compile those definitions. Do not edit src/master.generated.css or import it back into master.css.

3. #Generate the CSS

   In one terminal, generate the stylesheet and keep watching for changes:

   npx master-css generate --output src/master.generated.css --watch

   Wait for the initial generation to finish. Then start Angular in a second terminal:

   npm start

   Keep both processes running. Angular's watcher alone does not regenerate Master CSS when you add a class.

4. #Start using Master CSS

   Add this markup to the template referenced by your root component. With Angular's current naming convention, that is usually src/app/app.html; an existing project may use src/app/app.component.html.

   <p id="master-check" class="w-fit m(0) p-md b-solid b(1) b-line-divider r-md text-sm font-regular bg-surface-raised fg-text-strong">Hello Angular</p>

   Generated CSS

   @layer theme {  :root,  :host {    --color-zinc-90: oklch(24.6% .0022 265);    --color-zinc-100: oklch(15% .0016 265)  }  :root,  :host {    --color-surface-raised: light-dark(var(--color-white), var(--color-zinc-90));    --color-line-divider: light-dark(oklch(0% 0 none / .12), oklch(100% 0 none / .12));    --color-text-strong: light-dark(var(--color-zinc-100), var(--color-white))  }  :root,  :host {    --color-white: oklch(100% 0 none)  }  :root,  :host {    --font-weight-regular: 400;    --font-size-sm: .875rem;    --text-sm: var(--font-size-sm);    --text-sm--line-height: 1.5;    --text-sm--letter-spacing: 0;    --radius-md: .375rem;    --spacing-md: 1rem  }}@layer utilities {  .text-sm {    font-size: var(--text-sm);    line-height: var(--text-sm--line-height, normal);    letter-spacing: var(--text-sm--letter-spacing, normal)  }  .bg-surface-raised {    background-color: var(--color-surface-raised)  }  .b-line-divider {    border-color: var(--color-line-divider)  }  .r-md {    border-radius: var(--radius-md)  }  .b-solid {    border-style: solid  }  .b\(1\) {    border-width: calc(1 * 1px)  }  .fg-text-strong {    color: var(--color-text-strong)  }  .font-regular {    font-weight: var(--font-weight-regular)  }  .m\(0\) {    margin: calc(0 * 1px)  }  .p-md {    padding: var(--spacing-md)  }  .w-fit {    width: fit-content  }}

   The paragraph has a neutral surface, a fine border, small corners and 1rem of padding on every side.

#Verify the result

Open the Angular app. The paragraph should match the example's spacing and surface. Change p-md to p-lg in the template: with both watchers running, its padding should grow from 1rem to 1.5rem. Change it back after checking the update.

If the style does not appear, trace the connection in order:

• Check the Master CSS terminal for generation errors and confirm src/master.generated.css exists.
• Check the import in src/styles.css and that file's registration in angular.json.
• Inspect the paragraph in browser devtools for a matching rule and any component style overriding it.

Static generation needs complete class strings in source or an explicit safelist. Keep conditional class names complete; use CSS custom properties for dynamic values. See Scanning class names when a class is missing from the generated output.

#Build for deployment

Generate CSS before Angular packages the app:

npx master-css generate --output src/master.generated.cssnpm run build

Use the same order in CI. Serving an old generated file can hide missing styles, so check the production build after a fresh generation.

Static describes the CSS generation step. A browser-rendered Angular app still needs JavaScript to create its HTML.

#Choose another rendering mode

Static rendering is the default. Use runtime rendering when classes must be generated from browser DOM changes rather than known source strings.

npm create @master/css@2.0.0 -- --framework angular --mode runtime --yes

@import '@master/css/base.css';

document.querySelector('#master-check').classList.add('underline')