CSS Next Obsoleto ??

CSS Next Obsoleto

Entonces que pasara?

Existe alternativas?.

Al cabo que ni queria

Y muchas preguntas me surgieron pero la causa es muy interesante.

El motivo:

El colaborador Principal MoOx nos explica porque se dejo el proyecto.

• El colaborador principal practicamente se canso del proyecto y la visión de PostCSS.

• Trato de dejar el proyecto a otros colaboradores, ha pedido ayuda por twitter pero no respondieron.

Pero un colaborador activo hizo un fork y comenzo postcss-preset-env y posiblemente mejor que cssnext.

Es en serio?

Si, puedes ver el post completo:
Deprecating-cssnext

Cómo Migrar a postcss-preset-env ?

1. Primero instalaremos el postcss-cli en el entorno de trabajo y no global.

  npm install postcss-cli --save-dev

2… Para ejecutar el comando en el entorno de trabajo ejecutamos:

npx postcss-cli --version

(*) Documentación PostCSS CLI: https://github.com/postcss/postcss-cli

3. Instalar postcss-preset-env

  npm install postcss-preset-env --save-dev

Por defecto tendremos algunos plugins:

• autoprefixer
• insertBefore / insertAfter
• browers
• ver mas…

4. Creamos el Archivo de Configuración
postcss.config.js y agregamos:

  module.exports = {
      plugins: [
          require("postcss-preset-env")({
            autoprefixer: {
              grid: true
            },
            browsers: [
              "last 1 version",
              "> 1%",
              "not dead"
            ],
            stage: 1,
            features: {
                'nesting-rules': true
            }
          })
      ]
  }

Esta configuración nos ayudara para continuar elcurso de Curso de PostCSS.

Puedes probar más: Opciones postcss-preset-env

5. Ejecutamos:

  npx postcss src/css/home.css -o dist/css/home.css -w 

Sobre los comandos:

• La primera ruta indica el archivo base en PostCSS

• -o indica la salida

• La segunda ruta es donde se guardara el archivo transformado

• [ -w | --watch] revisa los cambios.

Suerte

Espero que puedas descubrir mucho más de postcss-preset-env y implementarlo en tus proyectos.