Usar autoprefixer
autoprefixer es una librería en JS que procesa el CSS y le agrega prefijos a estilos no soportados en versiones antiguas de navegadores (o que todavía no están soportadas en los navegadores actuales). Creo que nos ayudaría a hacer los sitios más compatibles, por ejemplo con Safari 13 que vimos problemas con flex.
Lo que no sé es cómo instalarlo... hay que mantenerlo instalado en producción porque estamos permitiendo personalizar el CSS desde el panel, con lo que el CSS se genera dinámicamente. Si fuese estático lo haríamos durante desarrollo y ya. Separar CSS estático de dinámico es un bardo porque una variable de Bootstrap tipo $primary
se aplica por todos lados.
En Rails hay un rails-autoprefixer que instalar un autoprefixer.js que corre solo pero ocupa 8.5MB o sea que cada sitio ocuparía ese espacio de más. O sea que si todos los sitios que tenemos ahora lo usaran ocuparíamos 3.4GB en copias de autoprefixer.
Algo similar si lo instalamos con npm/yarn/pnpm, quizás el problema sería mucho menor con pnpm, porque ya sabe deduplicar archivos.
La otra opción es que sea un paso más de la "CI" del panel, o sea correr bundler
, yarn
, jekyll
y al final autoprefixer
. Similar con la minificación del CSS. Eso mantendría una sola copia del archivo.
Creo que las opciones son:
- Empezar a usar
pnpm
para todos los proyectos, esto es algo que tenemos que hacer igual para ahorrar espacio - Implementar
autoprefixer
como paso de la compilación de un sitio
La 2 implica un laburo extra mientras que la 1 viene gratis, aunque habría que agregar un soporte genérico para pnpm en los sitios. Es algo que tengo que hacer esta semana igual :P
Relacionado con sutty/gems#1