Configuración

Node, Snowpack, Eleventy, PostCSS, TailwindCSS

Las configuraciones que siguen se refieren a los paquetes instalados en el paso anterior (Instalación). Si prefieren usar otros (por ej. Webpack en lugar de Snowpack, u otro CSS en vez de Tailwind) se deben crear los archivos correspondientes.

Para que las herramientas que instalamos y sus plugins funcionen, y lo hagan coordinadamente, debemos crear y/o editar varios archivos de coniguración:

1 - Node

En este caso los scripts son mínimos ya que le paso el trabajo a Snowpack.

package.json

"browserslist": "> 0.5%, last 2 versions, not dead",
"scripts": {
    "start": "npm run dev",
    "dev": "snowpack dev",
    "build": "snowpack build"
},

Por comodidad uso npm start como sinónimo de npm run dev.

"browserslist" le indica a Snowpack los navegadores sobre los que se quiere que se vea "bien" el sitio. En base a esto adapta el código para que funcione en ellos. Más información sobre este tema en este sitio

Con mi configuración la cobertura de navegadores en Argentina sería:

>> npx browserslist --coverage="AR"
 >> These browsers account for 92.24% of all users in the AR

2 - Snowpack

Este guía la construcción del sitio, haciendo llamadas a las herramientas necesarias en el orden que dispongamos.

Ver la Documentación

snowpack.config.js


module.exports = {
  mount: {
      // los archivos generados por Eleventy    
      'eleventy': '/',
      // recursos como fuentes, estilos y scripts externos, imágenes.
      'recursos': '/',
      // los estilos son procesados por PostCSS
      'src/css' :'/css',
      // los scripts propios pasan sin modificar en la etapa "dev", 
      // se optimizan en "build" 
      'src/js': '/js',
      // secciones que no quiero que sean procesadas por eleventy 
      'varios/ProgFuncional': '/varios/ProgFuncional',
      'varios/MVC':'/varios/MVC'
  },
  plugins: [
    [
      '@snowpack/plugin-run-script',
      {
        cmd: 'eleventy',
        watch: '$1 --incremental --watch',
      },
    ],
    ['@snowpack/plugin-postcss'],
  ],
  packageOptions: {
    /* ... */
  },
  devOptions: {
    open: "none",
    tailwindConfig: './tailwind.config.js',
  },
  buildOptions: {
    /* ... */
  },
  optimize: {     
    entrypoints: ['./index.html'],
    bundle: true,
    minify: true,
    target: 'es2016',
  },
};

Explicación del código:

mount Hace la conversión de la estructura de directorios a la de url en el sitio final.

plugins Llama a los plugins pasándoles los parámetros necesarios.
Uso @snowpack/plugin-run-script para poner en marcha Eleventy en dos pasos, en el primero (cmd) eleventy procesa sus archivos, y en el segundo (watch) queda observando los cambios en el código.
@snowpack/plugin-postcss llama al procesador de PostCSS.

optimize indica que en la etapa de "build" voy a procesar el código (recopilación, transpilación y minificación) con esbuild y se le pasan las opciones correspondientes.
Si se desea usar para esto Webpack o Rollup se usan los plugins correspondientes (en este caso no se necesita configurar estos "bundlers").

3 - Eleventy

Ver la Documentación

eleventy.js

module.exports = function (eleventyConfig) {
  // retraso en el procesamiento al modificar archivos
  // para cuando se guardan varios simultáneamente
  eleventyConfig.setWatchThrottleWaitTime(500);

  // indico el directorio de origen y el de destino 
  return {
    dir: {
      input: "src",
      output: "eleventy",
    },
  }
}

En pasos posteriores esta configuración se amplía (y mucho) al agregar "plugins", "shortcodes" y otros elementos.

Un detalle importante es que el directorio de salida de eleventy actúa como un punto intermedio para continuar luego con otros procesos.

4 - PostCSS

Documentación

Es interesante revisar la lista de plugins disponibles.

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

En este caso (para empezar) uso una configuración mínima, indicando solo los plugins a usar con sus opciones por defecto (las {}).

5 - TailwindCSS

Documentación (como plugin de PostCSS).

El archivo de configuración básico se genera con npx tailwindcss init

Nota: Si se usa la instrucción npx tailwindcss init -p también se crea postcss.config.js

tailwind.config.js

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

content indica donde Tailwind debe buscar las clases que se usan dentro del sitio para incluir solo a estas en el CSS generado. theme: { extend: { ... }} contiene algunas modificaciones y agregados a las clases de Tailwind.

Ampliaré más esta configuración en una sección dedicada a Tailwind.