Le foglie di stile del plugin devono usare le proprietà personalizzate CSS per i colori

Tra pochi giorni unirò questa PR nel core, che modifica il modo in cui vengono compilati gli stylesheet dei plugin. La modifica riguarda le variabili di colore SCSS utilizzate negli stylesheet dei plugin. In sintesi: devono essere sostituite con proprietà CSS personalizzate. La maggior parte dei plugin è già aggiornata e, in molti casi, si tratta di una modifica semplice: la variabile SCSS deve essere sostituita con una proprietà CSS personalizzata:

-   background-color: $primary-low;
+   background-color: var(--primary-low);

La guida disponibile all’indirizzo Update themes and plugins to support automatic dark mode contiene ulteriori esempi e mostra anche come gestire trasformazioni di colore più complesse. (Questa guida dovrebbe essere tutto ciò di cui gli autori di plugin hanno bisogno per garantire che i loro stili funzionino correttamente.)


Se ti stai chiedendo perché stiamo apportando questa modifica, continua a leggere.

In precedenza, gli stylesheet del core e dei plugin venivano compilati per tema per includere la palette di colori del tema ovunque venissero utilizzate variabili di colore SCSS. Ciò significava che un sito con molti temi (o un ambiente multisito) richiedeva molto tempo per la precompilazione, poiché doveva moltiplicare il numero di stylesheet del core e dei plugin per il numero di temi attivi per coprire tutte le combinazioni necessarie.

Da agosto 2020, per supportare il passaggio automatico alla modalità scura, abbiamo aggiunto un stylesheet separato per le definizioni dei colori, che memorizza le variabili di colore come proprietà CSS personalizzate. Questa modifica ci ha permesso di cambiare le palette di colori al volo, ma ha anche astratto i colori dalla maggior parte degli stylesheet. Grazie alla magia delle proprietà CSS personalizzate, ora possiamo fare riferimento ai colori ovunque (core, plugin, temi) senza dover caricare ogni tema al momento della compilazione dello stylesheet.

Negli ultimi mesi abbiamo convertito tutti i plugin per utilizzare le proprietà CSS personalizzate. La stragrande maggioranza dei plugin di Discourse è ora aggiornata, ma probabilmente esiste ancora qualche plugin che utilizza ancora variabili SCSS per i colori e che dovrà essere aggiornato.

10 Mi Piace

Grazie per la spiegazione chiara. Anche io l’ho capita quasi del tutto!

Questo causerà il fallimento degli aggiornamenti e delle ricostruzioni sui siti con componenti del tema che non rispettano queste regole? Come è successo per Failed to Bootstrap, due to discourse-alt-logo theme component per un altro motivo?

Se sì, c’è un modo per rendere il messaggio di errore più chiaro (per chi non riesce a interpretare i log di build)? E aggiungere qualcosa come “rimuovi il plugin x prima di tentare l’aggiornamento”. O, meglio ancora, esiste un modo per avvisare gli utenti nel pannello di amministrazione quando sappiamo che un tale cambiamento è in arrivo? (O forse esiste già, ma nessuno lo legge).

2 Mi Piace

No, questo non causerà fallimenti nei rebuild. Causerebbe solo colori errati sui plugin non aggiornati. Questo dovrebbe accadere solo per plugin creati in casa; ho controllato la maggior parte dei plugin pubblicati qui su Meta e mi sono assicurato che siano aggiornati.

Il problema a cui hai fatto riferimento non ha nulla a che fare con questa modifica: si tratta di un componente del tema e attualmente blocciamo i rebuild se un componente del tema contrassegnato per l’aggiornamento automatico non può essere aggiornato automaticamente.

4 Mi Piace

Ah. Hooray. Sorry about that. I’m still wrapping my head around these pieces.

2 Mi Piace

Ok, ho riscontrato un problema in modalità scura. Dove/che impostazione di colore devo modificare per il testo citato?

È a posto nelle categorie pubbliche, ma nelle bolle dei messaggi privati è illeggibile.

Ho provato alcune ricerche ma non sono riuscito a trovare il termine corretto.

Questo influisce anche sul link di un argomento.