Tailwind e AlpineJS su WP

Da quando è uscito Livewire mi sono appassionato molto a questi due fw, quindi ho pensato di portarli su WP e fare un tema (quello che utilizzerà questi sito) utilizzando questi, e nel frattempo prendermi gli appunti che mi servono XD

Cercando un po’ su Google, ho trovato due articoli molto interessanti che mi hanno permesso di arrivare al mio scopo:

• Uno che spiega come installare Tailwind
• Il prerequisito di utilizzare laravel-mix per la compilazione

In effetti laravel-mix è un ottimo wrapper di webpack, usarlo per compilare anche fuori Laravel non è una brutta idea. Riassumendo la procedura:

• npm init su cartella root del tema
• npm install –save-dev laravel-mix cross-env
• Aggiungere gli script al file packages.json:
  • scripts: { "dev": "npm run development", "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "watch": "npm run development -- --watch", "watch-poll": "npm run watch -- --watch-poll", "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js", "prod": "npm run production", "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js" }
• creare il file webpack.mix.js
• richiamare mix e tramite postCss compilare il file css e js:
  • const mix = require('laravel-mix');
mix.postCss('resources/css/theme.css', 'css', [ require('tailwindcss'), // require('postcss-nested')]).js('resources/js/app.js', 'js')/* .options({ processCssUrls: false}) */;

• creare i file resources/js/app.js e resources/css/theme.css
  

Installare tailwind

• installare la libreria con npm install tailwindcss
• inizzializzare tailwind con npx tailwindcss init (questo creerà anche il file tailwind.config.js)
• nel file theme.css importare i componenti tailwind:
  • @import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

opzionale postcss-nested

L’articolo di cui sopra suggerisce di installare il plugin postcss-nested (infatti nel codice di webpack c’è una parte commentata), per ora funziona anche senza; comunque basta installare la lib tramite npm install postcss-nested e decommentare il codice sopra.

Installare Alpinejs

• installare la lib tramite npm install alpinejs
• importare e Inizializzare Alpine nel file app.js:
  • import Alpine from 'alpinejs'
window.Alpine = Alpine
Alpine.start()

Importare i file compilati

• compilare i file con npm run dev
• questo comando genererà due file (coma da istruzioni mix):
  • css/theme.css
  • js/app.js
• Diciamo a WP di utilizzare questi file, “enquequando” i due file; nel file functions.php con:
  • wp_enqueue_style( ‘lpuk-theme-styles’, get_template_directory_uri().’/css/theme.css’, array(), ‘0.1’ );
  • wp_enqueue_script(‘lpuk-theme-scripts’, get_stylesheet_directory_uri() . ‘/js/app.js’, array(), ‘0.1’);
• il primo parametro è un identificativo, il secondo il percorso al file, il terzo le dipendenze e il quarto la versione

defer per AlpineJs

AlpineJs richiede che lo script di inizializzazione sia caricato con l’attributo defer; in wordpress questo non è ancora pienamente supportato, e abbiamo due modi per poterlo fare:

• aggiungere al file header.php lo script di import del file Js
• aggiungere un filtro che aggiunge l’attributo in base al nome di riferimento dello script

Personalmente ho preferito la seconda opzione, perchè basterebbe aggiungere un OR (||) all’if della funzione del filtro per rendere altri script deferred.