El [Nuevo] estado de CSS en Angular

Artículo original de Angular Blog por Emma Twersky en inglés aquí:
Han pasado algunos años desde la última vez que cubrimos CSS en el blog de Angular,¡y han sucedido muchas cosas desde entonces!

En esta publicación, veremos las nuevas funciones web que afectan la forma en que definimos el estilo en nuestras aplicaciones Angular.

Usando @use en Lugar de @import

En 2019,Sass introdujo un nuevo sistema de módulos, incluida una migración de @import a @use. Al cambiar a la sintaxis@use, podemos determinar más fácilmente qué CSS no se utiliza y reducir el tamaño de la salida CSS compilada. Esto hace que sea imposible extraer inadvertidamente dependencias transitivas. Cada módulo se incluye solo una vez, sin importar cuántas veces se carguen esos estilos.

Angular Material v12 incluyó una migración del uso de @import a @use para todas las importaciones en los estilos Angular Material Sass. Esta refactorización de nuestra Superficie de API de personalización es más fácil de entender y leer, lo que ayuda a los desarrolladores a aprovechar mejor este nuevo sistema de módulos. Esta migración tiene lugar en los scripts incluidos en ng update. Un ejemplo de este cambio está en cómo definimos un tema de Angular Material :

// El estilo de Angular Material se importa como 'mat'.
@use '@angular/material' as mat;// 'mat' namespace is referenced.

// Se hace referencia al espacio de nombre "mat".
$my-primary: mat.define-palette(mat.$indigo-palette, 500);
$my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);

Ahora hacemos uso de la introducción de espacios de nombres para definir el núcleo'@angular/material' como mat, luego accedemos a variables como mat.$indigo-palette. Si profundizamos en el código fuente, somos más intencionales sobre qué variables se @forward-ed (reenvían) para el acceso público a fin de guiar a los usuarios hacia un estilo más limpio.
Consulte la documentación de temas Angular Material recientemente reescrita para ver cómo @use y esta migración simplifican la aplicación de temas los componentes. 

Habilitación de conceptos CSS modernos

Angular v13 eliminó el soporte para IE11 después de una solicitud exitosa de comentarios, lo que hace posible que Angular adopte un estilo web moderno como CSS Grid, propiedades lógicas CSS, CSS calc (), :: hover y más. Puedes esperar que la librería de Angular Material comience a usar estas funciones, y te alentamos a que también lo hagas.

Si tienes curiosidad por mejorar tus habilidades de CSS modernas, te recomiendo encarecidamente el curso Learn CSS de web.dev como una excelente manera de aprender o pulir tus conocimientos de CSS.

¡Comienza a usar variables CSS!

La eliminación de la compatibilidad con IE11 allana el camino para algo que me entusiasma mucho: las variables CSS, también conocidas como propiedades personalizadas de CSS. Piense en ello como la definición de una superficie de API que los desarrolladores pueden usar para personalizar estilos. Puede proporcionar un conjunto de propiedades abiertas para guiar el tamaño de los márgenes o una gama de variables de color y permitir que los desarrolladores las consuman y anulen.

Imagina una librería que incluye un botón para compartir con un estilo personalizado:

:root {
  --primary: pink;
  --accent: blue;
}
.share-button {
  background-color: var(--primary);
  color: var(--accent);
}

Luego, un usuario puede implementar un estilo limpio usando variables CSS en el ámbito en el que este componente de librería se usa para reasignar los colores primarios y de realce, y ver estos cambios visuales reflejados en su uso del botón de compartir:

:root {
  --primary: green;
  --accent: purple;
}

El futuro de los estilos predominantes

Las variables CSS abren la puerta a API's bien compatibles para la personalización de componentes, lo que permite a los desarrolladores alejarse de las anulaciones de CSS y ::ng-deep.

Recomendamos introducir variables personalizadas en sus librerías y dependencias con el fin de crear una superficie de API para personalizar librerías sin la necesidad de ::ng-deep. La implementación de variables personalizadas permite a los desarrolladores tener más control sobre su estilo y proporcionar una ruta lejos de las invalidaciones de CSS y ::ng-deep.

Variables CSS en Angular Material

Estamos explorando las variables CSS para abrir la superficie de API para personalización de Material y admitir una mayor individualización de los componentes Angular Material como parte de la expansión de los sistemas de personalización de Material Design.

Te Interesa este proyecto? ¿Sobreescribes de manera personalizada Angular Material en tu proyecto? Me encantaría saber más sobre tu experiencia con la personalización de temas de Angular Material. Ponte en contacto con nuestro equipo por correo electrónico.

El CLI de Angular puede ayudarte a diseñar

Inline Sass en componentes

v12 introdujo la opción de usar Sass en línea en tus componentes Angular. El CLI ahora tiene una opción para proporcionar un inlineStyleLanguage y compila Sass directamente desde sus componentes Angular en el estilo. Esto es útil para los desarrolladores que utilizan componentes de un solo archivo o que desean agregar pequeñas cantidades de estilo dentro de sus archivos de componentes.

Para usar Sass, deberá especificar el idioma en sus configuraciones de compilación de angular.json:

{ "projects": {
    "architect": {
      "build": {
        "options": {
          "styles": [
            "src/styles.scss"
          ],
          "inlineStyleLanguage": "scss",
          ...

¡Ahora puedes escribir Sass en tus @Componentes!

 

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 y otros PostCSS

Angular v11.2 agregó soporte nativo para ejecutar TailwindCSS PostCSS con Angular CLI.
Para habilitar TailwindCSS, ng update(actualice) a v11.2 + y luego:

1. Instale con yarn add -D tailwindcss
2. Cree un archivo de configuración TailwindCSS en el espacio de trabajo o en la raíz del proyecto.

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Inlining CSS crítico (Critical CSS inlining)

Angular v12 también introdujo Critical CSS Inlining para ayudar a garantizar que las aplicaciones Angular entreguen las mejores métricas de Core Web Vital posibles. Puede obtener más información sobre la inserción de recursos en el canal de Angular en YouTube. ¡Este es un gran ejemplo de cómo Angular está a la vanguardia del rendimiento web!

¡Gracias por seguir haciendo de la web un lugar más elegante con Angular! ¿Qué nueva caracteristica de estilo te entusiasma más?