Set up Master CSS in Angular
Guide to setting up Master CSS in your Angular project.
Create a project
If you don't have a Angular project, create one first. It's recommended to refer Angular CLI.
ng new my-appcd my-appInstall Master CSS
Install Master CSS Server into your project via package managers.
npm i @master/css@rc @master/css-runtime@rc @master/css-server@rcSet up CSS runtime engine
Initialize the runtime engine in the browser entry. This manual setup uses the bundled preset manifest; use an official build integration when application code needs to import the compiled project manifest.
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';import { AppModule } from './app/app.module';import defaultManifest from '@master/css-preset/default-manifest.json' with { type: 'json' }; import { CSSRuntime } from '@master/css-runtime'; CSSRuntime.create({ manifest: defaultManifest }).observe(); platformBrowserDynamic().bootstrapModule(AppModule) .catch(err => console.error(err));Import the default stylesheet
Import Master CSS from Angular's app stylesheet. This stylesheet is also the project CSS entry.
@import '@master/css';Set up code linting
Install the Master CSS ESLint config and Angular template parser, then configure ESLint for Angular templates and TypeScript.
Use @angular-eslint/template-parser for .html files and @typescript-eslint/parser for .ts files.
npm i -D @master/eslint-config-css@rc @angular-eslint/template-parser @typescript-eslint/parser eslintimport htmlParser from '@angular-eslint/template-parser'import tsParser from '@typescript-eslint/parser'import css from '@master/eslint-config-css'export default [ { files: ['**/*.html'], languageOptions: { parser: htmlParser } }, { files: ['**/*.ts'], languageOptions: { parser: tsParser } }, ...css ]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. This manual example renders with the default preset manifest.
import defaultManifest from '@master/css-preset/default-manifest.json' with { type: 'json' }; import { render } from '@master/css-server'; …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, defaultManifest).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="italic m:2xl text:neutral font:5xl font:heavy">Hello World</h1>Open your browser to watch the changes.