Hello,
thanks for your contribution.
The thing is that the @import
statement is not *wrong* itself but is considered (for obvious reasons) not the best practice anymore.
From the link you correctly brought to my attention you can read:
Note that the previous method was to import the parent theme stylesheet using @import: this is no longer best practice.
I thought about implementing the “new standard” and still I am. The main reason why I didn’t implement it yet is because I wanted to keep the plugin as simple as possible. The creation of a child-theme is a pretty easy task, so the plugin’s target is formed by users who generally don’t want to mess up with php code, and using the “new standard” could imply that.
An example:
There are “parent” themes for which the classic style.css is basically empty (it just contains the info needed by wordpress to recognize it as an actual theme), so that file doesn’t need to be included when using a child-theme (one of these themes is Customizr – which I treat as special case in this plugin: I don’t add the import statement for it).
In this case the only thing an user should be to avoid the “dummy” parent style.css enqueing is simply removing that @import
line in the child-theme style.css . This is a pretty safe action as an error in the CSS will not cause painful effects (like the dreaded WSOD)
On the other hand, using the new standard, an user should remove/comment that action modifying a php file. You might see it as a trivial task, but for non expert users it might be painful (see WSOD above).
An experienced users is clearly able to remove the import statement from the style.css and to add the code you (wordpress) suggest(s).
Also consider another scenario.
Take the twentyfifteen standard theme.
You can see how it loads the css here -> https://github.com/WordPress/WordPress/blob/master/wp-content/themes/twentyfifteen/functions.php#L233
(the order matters)
So it loads the genericons css then the theme css (note, it loads the stylesheet, meaning that if you’re running a child-theme it won’t load the parent style.css but the child-theme style.css) then other css.
So the order, in the case of a child-theme is:
twentyfifteen-fonts
genericons
twentyfifteen-child
other theme css
And if I don’t use the “import” statement in the child-theme style.css the parent style.css won’t be loaded.
If I use the code you suggest above the order will be:
twentyfifteen-parent
twentyfifteen-fonts
genericons
twentyfifteen-child
other theme css
Now this is wrong, even if is correct that the child theme is loaded after the parent theme, there’s still the twentyfifteen-fonts and genericons CSS that twentyfifteen code wants loaded before its style.css (this is an example, but the order matters in cascade stylesheets, as there might be rules which are written to override CSS loaded earlier).
Also as you could see from the link you posted, the wordpress codex offers an alternative if the code you put above isn’t enough. This means that that code might fail, so cannot be a definitive solution either.
So the whole process, even if simple in terms of tasks, might need the human intervention in some cases.
Most likely to have a plugin which can make child-theme without using that @import
(which can be useless anyways) and which allows the correct CSS loading order we might wait for a new wordpress API about enqueuing parent and child-themes.
( Ideally the real correct order should be:
twentyfifteen-fonts
genericons
twentyfifteen-parent
other theme css
twentyfifteen-child
As a child-theme should be able to override all the parent theme CSS easily – using the same selectors
)
Hope what I wrote is clear enough to explain why this plugin didn’t use the now suggested standard.
Thanks for letting me think again about it.
p.s.
this if a rough way to obtain the correct order with the twentyfifteen theme:
/* Write your awesome functions below */
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles', 20 );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_filter( 'print_styles_array', 'swap_parent_child_theme');
function swap_parent_child_theme( $styles ) {
$theme_key = array_search('parent-style', $styles );
$child_theme_key = array_search('twentyfifteen-style', $styles );
$styles[$theme_key] = 'twentyfifteen-style';
$styles[$child_theme_key] = 'parent-style';
return $styles;
}
p.p.s.
also consider that ending a pure php file with the php closing tag ?>
is also inadvisable as it can cause “headers already sent” issues see https://stackoverflow.com/a/8028987