Lo stile di Woocommerce non me lo caricava più una volta inserito wp_deregister_style( 'storefront-style' ) nel functions.php. Ora il file style.css pesa 122kb rispetto ai circa 40kb prima delle modifiche.

Dici che avevo sbagliato qualcosa nel deregister? Cosa mi consigli di fare?

Dovresti cercare nel tema genitore lo snippet che registra lo stile, che lo voglio vedere, mi sembra strano.

Onestamente non saprei dove guardare, ti copio il functions.php di Storefront (sperando di aver quanto meno azzeccato il file giusto).

<?php
/**
 * Storefront engine room
 *
 * @package storefront
 */

/**
 * Assign the Storefront version to a var
 */
$theme              = wp_get_theme( 'storefront' );
$storefront_version = $theme['Version'];

/**
 * Set the content width based on the theme's design and stylesheet.
 */
if ( ! isset( $content_width ) ) {
	$content_width = 980; /* pixels */
}

$storefront = (object) array(
	'version'    => $storefront_version,

	/**
	 * Initialize all the things.
	 */
	'main'       => require 'inc/class-storefront.php',
	'customizer' => require 'inc/customizer/class-storefront-customizer.php',
);

require 'inc/storefront-functions.php';
require 'inc/storefront-template-hooks.php';
require 'inc/storefront-template-functions.php';
require 'inc/wordpress-shims.php';

if ( class_exists( 'Jetpack' ) ) {
	$storefront->jetpack = require 'inc/jetpack/class-storefront-jetpack.php';
}

if ( storefront_is_woocommerce_activated() ) {
	$storefront->woocommerce            = require 'inc/woocommerce/class-storefront-woocommerce.php';
	$storefront->woocommerce_customizer = require 'inc/woocommerce/class-storefront-woocommerce-customizer.php';

	require 'inc/woocommerce/class-storefront-woocommerce-adjacent-products.php';

	require 'inc/woocommerce/storefront-woocommerce-template-hooks.php';
	require 'inc/woocommerce/storefront-woocommerce-template-functions.php';
	require 'inc/woocommerce/storefront-woocommerce-functions.php';
}

if ( is_admin() ) {
	$storefront->admin = require 'inc/admin/class-storefront-admin.php';

	require 'inc/admin/class-storefront-plugin-install.php';
}

/**
 * NUX
 * Only load if wp version is 4.7.3 or above because of this issue;
 * https://core.trac.wordpress.org/ticket/39610?cversion=1&cnum_hist=2
 */
if ( version_compare( get_bloginfo( 'version' ), '4.7.3', '>=' ) && ( is_admin() || is_customize_preview() ) ) {
	require 'inc/nux/class-storefront-nux-admin.php';
	require 'inc/nux/class-storefront-nux-guided-tour.php';
	require 'inc/nux/class-storefront-nux-starter-content.php';
}

/**
 * Note: Do not add any custom code here. Please use a custom plugin so that your customizations aren't lost during updates.
 * https://github.com/woocommerce/theme-customisations
 */

Così mi dice poco, appena ho un attimo me lo installo e ci guardo

Sei gentilissimo, @overclokk . Nel frattempo ho testato la soluzione di mettere tutto nello stesso file CSS e ho minificato e aggregato tutti i file CSS con Autoptimize. Per il momento non sembra dare problemi, quindi direi che una soluzione, quanto meno parziale, l'ho trovata grazie al tuo aiuto.

Ciao, ho guardato un po' quel tema, direi di aver capito il problema, vediamo di risistemare tutto.

Però mi serve sapere il flusso di come vuoi caricare il CSS.

• storefront-gutenberg-blocks
• storefront-style
• storefront-icons
• storefront-fonts
• storefront-woocommerce-style [storefront-style, storefront-icons]
• storefront-child-style

Questi sono gli stili in ordine di caricamento, fra parentesi quadre sono indicati i CSS per gestire la dipendenza, ovvero, quali css devono essere caricati prima.
Come ultimo c'è anche il CSS nella root del tema figlio, ovvero il tema genitore se esiste un tema figlio attivo carica lui alla fine della pila il CSS.

Ora questo approccio ha diversi problemi quindi vediamo di fare un lavoro pulito e sistemare, fammi uno schemino sotto per come vorresti venisse caricato tutto.

Onestamente non so rispondere alla tua domanda. Esiste un ordine "standard" di caricamento? Anche mantenere l'ordine di caricamento di Storefront immagino che nel mio caso possa andare bene...

@overclokk ha detto in Cambiare breakpoint in Storefront:

storefront-style

Forse mi rispondo da solo, tu volevi sono cambiare il breakpoint qui storefront-style giusto?
Tutto il resto doveva rimanere invariato?

Sì, esatto. Scusa se sembro evasivo nelle risposte, ma ho sempre utilizzato temi starter proprio perché non saprei dove mettere le mani nella creazione da zero di un tema.

Ok, mi ero perso cercando di capire il flusso.

La lista sopra ti serve come riferimento a come vengono caricati i CSS dal tema genitore, tienila nel caso ti servisse in futuro.

Ora vediamo di semplificare il codice e per fare questo ti ho riscritto tutto cambiando anche API usata, invece di wp_deregister_style() useremo wp_dequeue_style() che a differenza della prima toglie solo dalla coda il CSS ma lo mantiene comunque nella lista dei CSS registrati, questo perché con questo tema l'altro approccio dava problemi.

Ci sono 2 punti fondamentali da comprendere, il primo è che storefront-woocommerce-style ha come dipedendenza storefront-style e storefront-icons e questo significa che se noi togliamo una delle due dipendenze storefront-woocommerce-style cercherà di caricarle ugualmente, quindi dobbiamo rimuovere dalle dipendenze anche storefront-woocommerce-style e poi se ne hai bisogno ti copi anche questo stile.

Il secondo punto è che il tema genitore se esiste un tema figlio carica in automatico il foglio di stile nella root del tema figlio, ora non discuto qui se sia un bene o un male, la cosa importante però è che questo stile non ha dipendenze ma viene caricato alla fine dellalista (quella sopra).

Tutto questo per dire che cambiando l'ordine di caricamento dei vari CSS, come poi hai notato, potrebbero esserci dei problemi di sovrascrittura degli stili, nel caso sai come fare a risolvere.

Ora ci possono essere due approcci, con il primo ti limiti solo a togliere dalla coda storefront-style e storefront-woocommerce-style e usare direttamente style.css del tema figlio mettendo lo stile che hai modificato e lo puoi fare così togliendo tutto il codice di cui abiamo discusso in questo topic:

function ctg_custom_child_theme_style() {
	\wp_dequeue_style( 'storefront-style' );
	\wp_dequeue_style( 'storefront-woocommerce-style' );
}
// 40 indica che la funzione viene eseguita dopo quelle del tema genitore
\add_action( 'wp_enqueue_scripts', 'ctg_custom_child_theme_style', 40 );

Il secondo approccio togli dalla coda anche lo stile che il tema genitore ti "pre-carica" in modo da caricarlo tu come vuoi e quando vuoi, la handle è questa storefront-child-style e la potresti inserire anche nella funzione sopra perché 40 comunque viene eseguito dopo.

Quindi qui dipende da te se vuoi stare semplice segui il primo approccio e usi style.css della root.

Ora però perché ti ho fatto seguire questo percorso, il motivo è semplice, in questo modo si evita di sovrascrivere il comportamento del CSS del tema genitore nel tema figlio, quando si ha la possibilità la best practice è quella di sostituire il CSS invece di sovrascrivere.