Tailwind JIT not updating styles when using styleUrls

Abierto
#24,469 6 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
45/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Estancado
Stack tecnológico
angular, tailwindcss, typescript
Área
build-system, frontend

Línea de trabajo

Comienza con la reproducción mínima enlazada: ejecuta yarn y después yarn start, y edita app.component.html mientras tailwind.css aparece por separado en styleUrls. Observa el estilo de fondo generado antes y después de reiniciar el proceso de serve. Está terminado cuando cambiar una clase de Tailwind que antes no se utilizaba actualiza los estilos servidos sin reiniciar.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

area: @ngtools/webpack freq1: low severity3: broken type: bug/fix
Command

serve

Is this a regression?
  • Yes, this behavior used to work in the previous version
The previous version in which this bug was not present was

No response

Description

When using styleUrls to specify the path to the tailwind css entrypoint file separately, the JIT will not detect changes properly.

To clarify:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss', '../tailwind.css'] // notice tailwind is separated here
})

Now if I try to use any class that is not already used in the HTML, the changes will not propagate properly. Only killing ng serve and restarting it will work.

I have attached a simple repro.

Minimal Reproduction

Repro at:

https://github.com/andreialecu/angular-tw-jit-repro

Run

yarn
yarn start

Open http://localhost:4200/ in the browser.

Then go into app.component.html and try to change bg-green-200 to bg-red-200, you will see that the background disappears because bg-red-200 does not exist.

If you ctrl+c then run yarn start again, the background will update.

Exception or Error

No response

Your Environment
Angular CLI: 13.3.10
Node: 16.14.2
Package Manager: yarn 1.22.19
OS: darwin arm64

Angular: 13.3.12
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1303.10
@angular-devkit/build-angular   13.3.10
@angular-devkit/core            13.3.10
@angular-devkit/schematics      13.3.10
@angular/cli                    13.3.10
@schematics/angular             13.3.10
rxjs                            7.5.7
typescript                      4.6.4
Anything else relevant?

Possibly related:

https://github.com/angular/angular-cli/issues/21749
https://stackoverflow.com/a/73446036

Lenguaje dominante
TypeScript
Estrellas
27k
Forks
11.8k
Merge medio
16 h 35 min
PR fusionados (30 d)
176

Guía de contribución

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de angular/angular-cli

Todos los issues de angular/angular-cli

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.