Set up Master CSS in Angular
Guide to setting up Master CSS in your Angular project.
Master CSS Progressive Rendering scans the rendered HTML ahead of time, server-side or at build time, generates the corresponding CSS rules for each page, and defer loads the runtime engine to keep track of the dynamic class names.
Faster page loading
Non-rendering-blocking internal CSS and defer loading
Fully automatic
Capture any program-generated class names
CSS encapsulation
Only ship the page-used CSS instead of the whole site
Quick start
Clone the example
Copy-paste the commands to quickly start using the https://angular.pr.rc.css.master.co example.
You can skip all installation steps.
npm create @master/css@rc <project> --example angularcd <project>npm run devInstallation
Create a project
If you don't have a Angular project, create one first. It's recommended to refer Angular CLI.
ng new <project>cd <project>Initialize configuration file
Run the command to create a configuration file master.css.ts.
npm create @master/css@rcInstall Master CSS
Install Master CSS Server into your project via package managers.
npm i @master/css-runtime@rc @master/css-server@rcSet up CSS runtime engine
Initialize the runtime engine with your configuration.
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';import { AppModule } from './app/app.module';import { initCSSRuntime } from '@master/css-runtime'; import config from '../master.css'; initCSSRuntime(config); platformBrowserDynamic().bootstrapModule(AppModule) .catch(err => console.error(err));Set up Angular Universal
Run the command to create a Angular server-side application.
npx ng add @nguniversal/express-engineSet up CSS pre-rendering
All CSS rules are pre-rendered and injected into HTML on the server side or at build time.
import { render } from '@master/css-server'; import config from './master.css'; …export function app() { … server.get('*', (req, res) => { … res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] }); res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] }, (error: Error, html: string) => { error ? console.error(error) : res.send(render(html, config).html) } ) }); }Launch server
Run the development server.
npm run dev:ssrStart using Master CSS
Now style your first element using Master CSS syntax!
<h1 class="font:40 font:heavy italic m:12x text:center">Hello World</h1>Open your browser to watch the changes.