Tengo una aplicación compuesta de dos partes:

• ( A ) aplicación heredada (AngularJs) con sus propias clases CSS.
• ( B ) div que contiene una aplicación completamente nueva (React). B está construido con webpack, postcss y Tailwind.

¿Puedo asegurarme de que las clases de Tailwind de B no se vean afectadas por las hojas de estilo de A y viceversa, sin cambios significativos en el código base?

malas soluciones

Actualmente encontré dos posibles soluciones que requieren grandes cambios:

1. Entiendo que Tailwind tiene una opción de configuración de prefijo , pero preferiría no anteponer literalmente miles de clases (especialmente teniendo en cuenta que el prefijo es más largo que el nombre de la clase en sí).
2. Use módulos css con importaciones locales. Tampoco me gusta este enfoque, ya que:
   • (i) No estoy seguro de qué tan bien funciona eso con Tailwind, y
   • (ii) incluso si funciona, preferiría no tener que importar localmente desde todo tipo de lugares, ya que hace que las cosas sean mucho más detalladas:
     • por ejemplo className="x" ... className="y" se convierte en:
       • import s1 from 's1'; import s2 from 's2'; ... className="s1.x" ... className="s2.y"

Enfoques más relevantes

Encontré otros dos complementos de postcss relevantes, pero se quedan cortos:

1. postcss-rename es excelente, pero no corrige los nombres en los archivos *.js .
2. purgecss puede encontrar clases en función de su presencia en archivos *.js y luego eliminarlas de la lista de clases de salida, pero no permiten el cambio de nombre.

Encontré específicamente que la característica faltante más crucial parece ser el analizador de archivos *.js de purgecss . Ninguna otra solución parece tener eso todavía.

Problema sin resolver

¿O estoy equivocado? ¿Hay alguna solución para aplicar una transformación personalizada (por ejemplo, cambiar el nombre) a todas las clases postcss, que también se aplican a los nombres de clase de salida de los elementos HTML/JSX? ¿O hay alguna otra forma de que el paquete web haga automáticamente que mis clases de CSS no sean conflictivas para mí?