Configurar Parcel Bundler + POSTCSS (UNCSS) || Limpia nuestro CSS

configParcel.md

Configurar Parcel Bundler + POSTCSS (UNCSS) || Limpiar / Purgar nuestro CSS.

1) Si no tienes instalado Parcel:

yarn global add parcel-bundler

o

npm install -g parcel-bundler

2) Instalamos postcss y sus complementos:

npm i -D postcss-modules postcss-uncss uncss

3) Creamos el archivo postcss.config.js y escribimos:

   plugins: [
     require("postcss-uncss")({
       html: ["./index.html"],
     }),
   ],
 };

4) Configuramos la parte de scripts en package.json:

"scripts": {
    "start": "parcel index.html",
    "build": "parcel build index.html --public-url ./"
}

NOTA: El --public-url ./ es porque Parcel modifica el path al hacer el build dejando las rutas así: src="/ejemplo.jpg" por lo cual las rutas no son tomadas correctamente. Agregando eso, las rutas pasan a estar bien: src="ejemplo.jpg" (sin la barra /).

5) Al finalizar nuestro proyecto y esté listo para producción ejecutamos:

npm run build

y tendremos todo minificado el HTML, CSS y JS de nuestro archivo y además gracias a POSTCSS todas las clases y selectores que no hayamos utilizado en nuestro HTML, los quitará automáticamente :).

Sobre todo el --public-url ./ es realmente importante

Sobre todo el --public-url ./ es realmente importante

Sin dudas!!

Se que llego bastante tarde pero sabrias como se instala postcss-uncss en parcel 2? He leido la documentación de postcss, uncss y parcel y he logrado hacerlo funcionar. Mi problema es que cuando voy a empezar a trabajar en el servidor de desarrollo utilizo Bootstrap y quiero tener todos los componentes que ofrece el framework, pero uncss los quita.
Basicamente busco que al ejecutar "npm run start" no este uncss y al ejecutar "npm run build" si.
Saludos