Skip to content

CSS file is deferred when CSS element has defer attribute in default_head_blocks.xml. #37814

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 13 commits into
base: 2.4-develop
Choose a base branch
from
Open

CSS file is deferred when CSS element has defer attribute in default_head_blocks.xml. #37814

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
597fd24
Added non-critical CSS attributes when defer parameter pass on css el…
nurullah Jul 28, 2023
7b65739
Deferred css file added in noscript tag to work when javascript is di…
nurullah Jul 28, 2023
c9a52f3
type=preload mistake fixed.
nurullah Jul 29, 2023
35a7260
Updated RendererTest inputs.
nurullah Aug 4, 2023
ad4e4cf
Fixed double space problem between tagname and attributes.
nurullah Aug 4, 2023
86ed4e6
Unit test added for defer attribute.
nurullah Aug 4, 2023
6a868e1
Unused local variable removed.
nurullah Aug 7, 2023
36917b9
Removed unnecessary defer attribute from CSS output.
nurullah Aug 7, 2023
f8d0db8
Fixed: PHPCS Inline control structures.
nurullah Aug 7, 2023
33fa192
escapeHtmlAttr function is used in the head element values for securi…
nurullah Aug 14, 2023
90c50ef
escapeHtmlAttr is used in getGroupAttributes value.
nurullah Aug 24, 2023
8f4ff6a
Merge branch '2.4-develop' into 2.4-develop
nurullah Sep 14, 2023
3cb0c63
Merge branch '2.4-develop' into 2.4-develop
nurullah Jan 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 45 additions & 11 deletions lib/internal/Magento/Framework/View/Page/Config/Renderer.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -330,7 +330,7 @@ protected function getGroupAttributes($group)
if (is_array($attributes)) {
$attributesString = '';
foreach ($attributes as $name => $value) {
$attributesString .= ' ' . $name . '="' . $this->escaper->escapeHtml($value) . '"';
$attributesString .= ' ' . $name . '="' . $this->escaper->escapeHtmlAttr($value) . '"';
}
$attributes = $attributesString;
} else {
Expand All @@ -344,43 +344,77 @@ protected function getGroupAttributes($group)
* Add default attributes
*
* @param string $contentType
* @param string $attributes
* @return string
* @param array|null $attributes
* @return array
*/
protected function addDefaultAttributes($contentType, $attributes)
{
$attributes = is_array($attributes)
? $attributes
: [];
$defaultAttributes = [];

if ($contentType === 'js') {
return ' type="text/javascript" ' . $attributes;
$defaultAttributes['type'] = 'text/javascript';
}

if ($contentType === 'css') {
return ' rel="stylesheet" type="text/css" ' . ($attributes ?: ' media="all"');
$defaultAttributes['rel'] = 'stylesheet';
$defaultAttributes['type'] = 'text/css';

if (empty($attributes)) {
$attributes['media'] = 'all';
}

// add defer attributes when defer parameter is exist
if (array_key_exists('defer', $attributes)) {
$defaultAttributes['rel'] = 'preload';
$defaultAttributes['as'] = 'style';
$defaultAttributes['onload'] = 'this.onload=null;this.rel=\'stylesheet\';';
}
}

if ($this->canTypeBeFont($contentType)) {
return 'rel="preload" as="font" crossorigin="anonymous"';
$defaultAttributes['rel'] = 'preload';
$defaultAttributes['as'] = 'font';
$defaultAttributes['crossorigin'] = 'anonymous';
}

return $attributes;
return array_merge($defaultAttributes, $attributes);
}

/**
* Returns assets template
*
* @param string $contentType
* @param string|null $attributes
* @param array|null $attributes
* @return string
*/
protected function getAssetTemplate($contentType, $attributes)
{
$attributesString = '';
foreach ($attributes as $name => $value) {

// don't add defer attribute to css output
if ($contentType === 'css' && $name === 'defer') {
continue;
}

$attributesString .= ' ' . $name . '="' . $this->escaper->escapeHtmlAttr($value) . '"';
}

switch ($contentType) {
case 'js':
$groupTemplate = '<script ' . $attributes . ' src="%s"></script>' . "\n";
$groupTemplate = '<script ' . trim($attributesString) . ' src="%s"></script>' . "\n";
break;

case 'css':
default:
$groupTemplate = '<link ' . $attributes . ' href="%s" />' . "\n";
$groupTemplate = '<link ' . trim($attributesString) . ' href="%s" />' . "\n";

if (array_key_exists('defer', $attributes)) {
$groupTemplate .= '<noscript><link rel="stylesheet" href="%1$s" /></noscript>' . "\n";
}
break;
}
return $groupTemplate;
Expand Down Expand Up @@ -411,7 +445,7 @@ protected function processIeCondition($groupHtml, $group)
protected function renderAssetHtml(\Magento\Framework\View\Asset\PropertyGroup $group)
{
$assets = $this->processMerge($group->getAll(), $group);
$attributes = $this->getGroupAttributes($group);
$attributes = $group->getProperty('attributes');

$result = '';
$template = '';
Expand Down
61 changes: 35 additions & 26 deletions lib/internal/Magento/Framework/View/Test/Unit/Page/Config/RendererTest.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@ protected function setUp(): void
->disableOriginalConstructor()
->getMock();
$this->escaperMock->expects($this->any())
->method('escapeHtml')
->method('escapeHtmlAttr')
->willReturnArgument(0);

$this->stringMock = $this->getMockBuilder(StringUtils::class)
Expand Down Expand Up @@ -425,41 +425,50 @@ public function dataProviderRenderAssets(): array
{
return [
[
['type' => 'css', 'attributes' => '', 'condition' => null],
['type' => 'js', 'attributes' => 'attr="value"', 'condition' => null],
'<link rel="stylesheet" type="text/css" media="all" href="url" />' . "\n"
. '<link rel="stylesheet" type="text/css" media="all" href="url" />' . "\n"
. '<script type="text/javascript" attr="value" src="no_route_url"></script>' . "\n"
['type' => 'css', 'attributes' => [], 'condition' => null],
['type' => 'js', 'attributes' => ['attr' => 'value'], 'condition' => null],
'<link rel="stylesheet" type="text/css" media="all" href="url" />' . "\n"
. '<link rel="stylesheet" type="text/css" media="all" href="url" />' . "\n"
. '<script type="text/javascript" attr="value" src="no_route_url"></script>' . "\n"
],
[
['type' => 'css', 'attributes' => ['defer' => "true"], 'condition' => null],
['type' => 'js', 'attributes' => ['defer' => "true"], 'condition' => null],
'<link rel="preload" type="text/css" as="style" onload="this.onload=null;this.rel=\'stylesheet\';" href="url" />' . "\n" //phpcs:ignore
. '<noscript><link rel="stylesheet" href="url" /></noscript>' . "\n"
. '<link rel="preload" type="text/css" as="style" onload="this.onload=null;this.rel=\'stylesheet\';" href="url" />' . "\n" //phpcs:ignore
. '<noscript><link rel="stylesheet" href="url" /></noscript>' . "\n"
. '<script type="text/javascript" defer="true" src="no_route_url"></script>' . "\n"
],
[
['type' => 'js', 'attributes' => ['attr' => 'value'], 'condition' => 'lt IE 7'],
['type' => 'css', 'attributes' => 'attr="value"', 'condition' => null],
'<link rel="stylesheet" type="text/css" attr="value" href="no_route_url" />' . "\n"
. '<!--[if lt IE 7]>' . "\n"
. '<script type="text/javascript" attr="value" src="url"></script>' . "\n"
. '<script type="text/javascript" attr="value" src="url"></script>' . "\n"
. '<![endif]-->' . "\n"
['type' => 'css', 'attributes' => ['attr' => 'value'], 'condition' => null],
'<link rel="stylesheet" type="text/css" attr="value" href="no_route_url" />' . "\n"
. '<!--[if lt IE 7]>' . "\n"
. '<script type="text/javascript" attr="value" src="url"></script>' . "\n"
. '<script type="text/javascript" attr="value" src="url"></script>' . "\n"
. '<![endif]-->' . "\n"
],
[
['type' => 'ico', 'attributes' => 'attr="value"', 'condition' => null],
['type' => 'css', 'attributes' => '', 'condition' => null],
'<link rel="stylesheet" type="text/css" media="all" href="no_route_url" />' . "\n"
. '<link attr="value" href="url" />' . "\n"
. '<link attr="value" href="url" />' . "\n"
['type' => 'ico', 'attributes' => ['attr' => 'value'], 'condition' => null],
['type' => 'css', 'attributes' => [], 'condition' => null],
'<link rel="stylesheet" type="text/css" media="all" href="no_route_url" />' . "\n"
. '<link attr="value" href="url" />' . "\n"
. '<link attr="value" href="url" />' . "\n"
],
[
['type' => 'js', 'attributes' => '', 'condition' => null],
['type' => 'js', 'attributes' => [], 'condition' => null],
['type' => 'ico', 'attributes' => ['attr' => 'value'], 'condition' => null],
'<link attr="value" href="no_route_url" />' . "\n"
. '<script type="text/javascript" src="url"></script>' . "\n"
. '<script type="text/javascript" src="url"></script>' . "\n"
'<link attr="value" href="no_route_url" />' . "\n"
. '<script type="text/javascript" src="url"></script>' . "\n"
. '<script type="text/javascript" src="url"></script>' . "\n"
],
[
['type' => 'non', 'attributes' => ['attr' => 'value'], 'condition' => null],
['type' => 'ico', 'attributes' => '', 'condition' => null],
['type' => 'ico', 'attributes' => [], 'condition' => null],
'<link href="no_route_url" />' . "\n"
. '<link attr="value" href="url" />' . "\n"
. '<link attr="value" href="url" />' . "\n"
. '<link attr="value" href="url" />' . "\n"
. '<link attr="value" href="url" />' . "\n"
]
];
}
Expand Down Expand Up @@ -492,7 +501,7 @@ public function testRenderAssetWithNoContentType() : void
[
[GroupedCollection::PROPERTY_CAN_MERGE, true],
[GroupedCollection::PROPERTY_CONTENT_TYPE, $type],
['attributes', 'rel="some-rel"'],
['attributes', ['rel' => 'some-rel']],
['ie_condition', null]
]
);
Expand All @@ -506,7 +515,7 @@ public function testRenderAssetWithNoContentType() : void
->willReturn([$groupMockOne]);

$this->assertEquals(
'<link rel="some-rel" href="url" />' . "\n",
'<link rel="some-rel" href="url" />' . "\n",
$this->renderer->renderAssets($this->renderer->getAvailableResultGroups())
);
}
Expand Down