![The [New] State of CSS in Angular](https://miro.medium.com/v2/resize:fit:1400/1*4BbZueqjISHs6_JqY7wtHA.png)
The [New] State of CSS in Angular
It’s been a few years since we last covered CSS on this blog — and a lot has happened since then!
In this post, we’ll take a look at new web features that impact how we define styling in our Angular applications.
Using @use instead of @import
In 2019, Sass introduced a new module system, including a migration from @import to @use. By switching to @use syntax, we can more easily determine what CSS is unused, and reduce the size of the compiled CSS output. This makes it impossible to inadvertently pull in transitive dependencies. Each module is included only once no matter how many times those styles are loaded.
Angular Material v12 included a migration from @import usage to @use for all imports into the Angular Material Sass styles. This refactor of our theming API surface is easier to understand and read, helping developers take better advantage of this new module system. This migration takes place in scripts included in ng update. One example of this change is in how we define an Angular Material theme:
// Angular Material styling is imported as ‘mat’.
@use '@angular/material' as mat;// ‘mat’ namespace is referenced.
$my-primary: mat.define-palette(mat.$indigo-palette, 500);
$my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
We now make use of the introduction of namespaces to define the core ‘@angular/material’ as mat, then access variables such as mat.$indigo-palette. If you dig into the source code, we’re more intentional about what variables are @forward-ed for public access to guide users toward cleaner styling.
Check out the newly rewritten Angular Material theming documentation to see how @use and this migration simplify theming your components.
Enabling modern CSS concepts
Angular v13 removed support for IE11 after a successful request for comments — making it possible for Angular to adopt modern web styling such as CSS Grid, CSS logical properties, CSS calc(), ::hover and more! You can expect the Angular Material library to start using these features, and we encourage you to as well.
If you’re curious about improving your modern CSS skills, I highly recommend web.dev’s Learn CSS course as a great way to learn or polish your CSS knowledge.
Start using CSS Variables!
The removal of IE11 support paves the way for something I’m very excited about — CSS Variables, also known as CSS Custom Properties! Think of it as defining an API surface that developers can use to customize styles. You can provide a set of open properties for margin size guidance or a range of color variables and allow developers to consume and override them.
Imagine a library includes a share button with custom styling:
:root {
--primary: pink;
--accent: blue;
}.share-button {
background-color: var(--primary);
color: var(--accent);
}
A user can then implement clean styling using CSS variables in the scope that this library component is used to reassign the primary and accent colors, and see these visual changes reflected in their usage of the share button:
:root {
--primary: green;
--accent: purple;
}Future of overriding styles
CSS Variables open the door to well-supported APIs for component customization, allowing developers to shift away from CSS overrides and ::ng-deep.
We recommend introducing custom variables in your libraries and dependencies in order to create an API surface for customizing libraries without the need for ::ng-deep. Implementation of custom variables allows developers to have more control over their styling and provide a path away from CSS overrides and ::ng-deep.
CSS Variables in Angular Material
We’re exploring CSS Variables to open up the API surface of Material theming and support more individualization of the Angular Material Components as part of expansion to Material Design’s systems for customization.
Interested in this project? Do you custom override Angular Material in your project? I would love to hear more about your experiences with Angular Material theming customization. Please connect with our team via email.
The Angular CLI can help you style
Inline Sass in components
v12 introduced the option to use inline Sass in your Angular components. The CLI now has an option to provide a inlineStyleLanguage and compiles Sass directly from your Angular components into styling. This is helpful for developers using single file components or who want to add small amounts of styling within their component files.
To use Sass, you’ll need to specify the language in your angular.json build configurations:
{ "projects": {
"architect": {
"build": {
"options": {
"styles": [
"src/styles.scss"
],
"inlineStyleLanguage": "scss",
...Now you can write Sass in your @Components!
import { Component } from '@angular/core';@Component({
selector: 'app-root,
template: '<h1>v12 has inline Sass!</h1>',
styles: [`
$neon: #cf0;
@mixin background ($color: #fff) {
background: $color;
}
h1 {@include background($neon)}
`]
}) export class AppComponent {}
Tailwind and other PostCSS
Angular v11.2 added native support for running TailwindCSS PostCSS with the Angular CLI.
To enable TailwindCSS, ng update to v11.2+ and then:
1. Install with yarn add -D tailwindcss
2. Create a TailwindCSS configuration file in the workspace or project root
// tailwind.config.jsmodule.exports = {
purge: [],
darkMode: false, // or ‘media’ or ‘class’
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
Critical CSS inlining
Angular v12 also introduced Critical CSS Inlining to help ensure Angular applications delivered the best possible Core Web Vital metrics. You can learn more about resource inlining on our YouTube channel. This is a great example of Angular being on the forefront of web performance!
