Commit 2c11efed authored by catch's avatar catch

Issue #352951 by Wim Leers, mfer, mcjim, larowlan, RobLoach, sdboyer, Owen...

Issue #352951 by Wim Leers, mfer, mcjim, larowlan, RobLoach, sdboyer, Owen Barton, JohnAlbin: Make JS & CSS Preprocessing Pluggable.
parent 36975492
......@@ -559,3 +559,25 @@ services:
tags:
- { name: event_subscriber }
arguments: ['@authentication']
asset.css.collection_renderer:
class: Drupal\Core\Asset\CssCollectionRenderer
asset.css.collection_optimizer:
class: Drupal\Core\Asset\CssCollectionOptimizer
arguments: [ '@asset.css.collection_grouper', '@asset.css.optimizer', '@asset.css.dumper', '@state' ]
asset.css.optimizer:
class: Drupal\Core\Asset\CssOptimizer
asset.css.collection_grouper:
class: Drupal\Core\Asset\CssCollectionGrouper
asset.css.dumper:
class: Drupal\Core\Asset\AssetDumper
asset.js.collection_renderer:
class: Drupal\Core\Asset\JsCollectionRenderer
asset.js.collection_optimizer:
class: Drupal\Core\Asset\JsCollectionOptimizer
arguments: [ '@asset.js.collection_grouper', '@asset.js.optimizer', '@asset.js.dumper', '@state' ]
asset.js.optimizer:
class: Drupal\Core\Asset\JsOptimizer
asset.js.collection_grouper:
class: Drupal\Core\Asset\JsCollectionGrouper
asset.js.dumper:
class: Drupal\Core\Asset\AssetDumper
This diff is collapsed.
......@@ -436,6 +436,10 @@ function install_begin_request(&$install_state) {
$container->register('url_generator', 'Drupal\Core\Routing\NullGenerator');
// Register the CSS and JavaScript asset collection renderers.
$container->register('asset.css.collection_renderer', 'Drupal\Core\Asset\CssCollectionRenderer');
$container->register('asset.js.collection_renderer', 'Drupal\Core\Asset\JsCollectionRenderer');
Drupal::setContainer($container);
}
......
<?php
/**
* @file
* Contains \Drupal\Core\Asset\AssetCollectionGrouperInterface.
*/
namespace Drupal\Core\Asset;
/**
* Interface defining a service that logically groups a collection of assets.
*/
interface AssetCollectionGrouperInterface {
/**
* Groups a collection of assets into logical groups of asset collections.
*
* @param array $assets
* An asset collection.
*
* @return array
* A sorted array of asset groups.
*/
public function group(array $assets);
}
<?php
/**
* @file
* Contains \Drupal\Core\Asset\AssetCollectionOptimizerInterface.
*/
namespace Drupal\Core\Asset;
/**
* Interface defining a service that optimizes a collection of assets.
*/
interface AssetCollectionOptimizerInterface {
/**
* Optimizes a collection of assets.
*
* @param array $assets
* An asset collection.
*
* @return array
* An optimized asset collection.
*/
public function optimize(array $assets);
}
<?php
/**
* @file
* Contains \Drupal\Core\Asset\AssetCollectionRendererInterface.
*/
namespace Drupal\Core\Asset;
/**
* Interface defining a service that generates a render array to render assets.
*/
interface AssetCollectionRendererInterface {
/**
* Renders an asset collection.
*
* @param array $assets
* An asset collection.
*
* @return array
* A render array to render the asset collection.
*/
public function render(array $assets);
}
<?php
/**
* Contains \Drupal\Core\Asset\AssetDumper.
*/
namespace Drupal\Core\Asset;
use Drupal\Core\Asset\AssetDumperInterface;
use Drupal\Component\Utility\Crypt;
/**
* Dumps a CSS or JavaScript asset.
*/
class AssetDumper implements AssetDumperInterface {
/**
* {@inheritdoc}
*
* The file name for the CSS or JS cache file is generated from the hash of
* the aggregated contents of the files in $data. This forces proxies and
* browsers to download new CSS when the CSS changes.
*/
public function dump($data, $file_extension) {
// Prefix filename to prevent blocking by firewalls which reject files
// starting with "ad*".
$filename = $file_extension. '_' . Crypt::hashBase64($data) . '.' . $file_extension;
// Create the css/ or js/ path within the files folder.
$path = 'public://' . $file_extension;
$uri = $path . '/' . $filename;
// Create the CSS or JS file.
file_prepare_directory($path, FILE_CREATE_DIRECTORY);
if (!file_exists($uri) && !file_unmanaged_save_data($data, $uri, FILE_EXISTS_REPLACE)) {
return FALSE;
}
// If CSS/JS gzip compression is enabled and the zlib extension is available
// then create a gzipped version of this file. This file is served
// conditionally to browsers that accept gzip using .htaccess rules.
// It's possible that the rewrite rules in .htaccess aren't working on this
// server, but there's no harm (other than the time spent generating the
// file) in generating the file anyway. Sites on servers where rewrite rules
// aren't working can set css.gzip to FALSE in order to skip
// generating a file that won't be used.
if (config('system.performance')->get($file_extension . '.gzip') && extension_loaded('zlib')) {
if (!file_exists($uri . '.gz') && !file_unmanaged_save_data(gzencode($data, 9, FORCE_GZIP), $uri . '.gz', FILE_EXISTS_REPLACE)) {
return FALSE;
}
}
return $uri;
}
}
<?php
/**
* @file
* Contains \Drupal\Core\Asset\AssetDumperInterface.
*/
namespace Drupal\Core\Asset;
/**
* Interface defining a service that dumps an (optimized) asset.
*/
interface AssetDumperInterface {
/**
* Dumps an (optimized) asset to persistent storage.
*
* @param string $data
* An (optimized) asset's contents.
* @param string $file_extension
* The file extension of this asset.
*
* @return string
* An URI to access the dumped asset.
*/
public function dump($data, $file_extension);
}
<?php
/**
* @file
* Contains \Drupal\Core\Asset\AssetCollectionOptimizerInterface.
*/
namespace Drupal\Core\Asset;
/**
* Interface defining a service that optimizes an asset.
*/
interface AssetOptimizerInterface {
/**
* Optimizes an asset.
*
* @param array $asset
* An asset.
*
* @return string
* The optimized asset's contents.
*/
public function optimize(array $asset);
}
<?php
/**
* Contains \Drupal\Core\Asset\CssCollectionGrouper.
*/
namespace Drupal\Core\Asset;
use Drupal\Core\Asset\AssetCollectionGrouperInterface;
/**
* Groups CSS assets.
*/
class CssCollectionGrouper implements AssetCollectionGrouperInterface {
/**
* {@inheritdoc}
*
* Puts multiple items into the same group if they are groupable and if they
* are for the same 'media' and 'browsers'. Items of the 'file' type are
* groupable if their 'preprocess' flag is TRUE, items of the 'inline' type
* are always groupable, and items of the 'external' type are never groupable.
*
* Also ensures that the process of grouping items does not change their
* relative order. This requirement may result in multiple groups for the same
* type, media, and browsers, if needed to accommodate other items in between.
*/
public function group(array $css_assets) {
$groups = array();
// If a group can contain multiple items, we track the information that must
// be the same for each item in the group, so that when we iterate the next
// item, we can determine if it can be put into the current group, or if a
// new group needs to be made for it.
$current_group_keys = NULL;
// When creating a new group, we pre-increment $i, so by initializing it to
// -1, the first group will have index 0.
$i = -1;
foreach ($css_assets as $item) {
// The browsers for which the CSS item needs to be loaded is part of the
// information that determines when a new group is needed, but the order
// of keys in the array doesn't matter, and we don't want a new group if
// all that's different is that order.
ksort($item['browsers']);
// If the item can be grouped with other items, set $group_keys to an
// array of information that must be the same for all items in its group.
// If the item can't be grouped with other items, set $group_keys to
// FALSE. We put items into a group that can be aggregated together:
// whether they will be aggregated is up to the _drupal_css_aggregate()
// function or an
// override of that function specified in hook_css_alter(), but regardless
// of the details of that function, a group represents items that can be
// aggregated. Since a group may be rendered with a single HTML tag, all
// items in the group must share the same information that would need to
// be part of that HTML tag.
switch ($item['type']) {
case 'file':
// Group file items if their 'preprocess' flag is TRUE.
// Help ensure maximum reuse of aggregate files by only grouping
// together items that share the same 'group' value and 'every_page'
// flag. See drupal_add_css() for details about that.
$group_keys = $item['preprocess'] ? array($item['type'], $item['group'], $item['every_page'], $item['media'], $item['browsers']) : FALSE;
break;
case 'inline':
// Always group inline items.
$group_keys = array($item['type'], $item['media'], $item['browsers']);
break;
case 'external':
// Do not group external items.
$group_keys = FALSE;
break;
}
// If the group keys don't match the most recent group we're working with,
// then a new group must be made.
if ($group_keys !== $current_group_keys) {
$i++;
// Initialize the new group with the same properties as the first item
// being placed into it. The item's 'data', 'weight' and 'basename'
// properties are unique to the item and should not be carried over to
// the group.
$groups[$i] = $item;
unset($groups[$i]['data'], $groups[$i]['weight'], $groups[$i]['basename']);
$groups[$i]['items'] = array();
$current_group_keys = $group_keys ? $group_keys : NULL;
}
// Add the item to the current group.
$groups[$i]['items'][] = $item;
}
return $groups;
}
}
<?php
/**
* Contains \Drupal\Core\Asset\CssCollectionOptimizer.
*/
namespace Drupal\Core\Asset;
use Drupal\Core\Asset\AssetCollectionOptimizerInterface;
use Drupal\Core\KeyValueStore\KeyValueStoreInterface;
/**
* Optimizes CSS assets.
*/
class CssCollectionOptimizer implements AssetCollectionOptimizerInterface {
/**
* A CSS asset grouper.
*
* @var \Drupal\Core\Asset\CssCollectionGrouper
*/
protected $grouper;
/**
* A CSS asset optimizer.
*
* @var \Drupal\Core\Asset\CssOptimizer
*/
protected $optimizer;
/**
* An asset dumper.
*
* @var \Drupal\Core\Asset\AssetDumper
*/
protected $dumper;
/**
* The state key/value store.
*
* @var \Drupal\Core\KeyValueStore\KeyValueStoreInterface
*/
protected $state;
/**
* Constructs a CssCollectionOptimizer.
*
* @param \Drupal\Core\Asset\AssetCollectionGrouperInterface
* The grouper for CSS assets.
* @param \Drupal\Core\Asset\AssetOptimizerInterface
* The optimizer for a single CSS asset.
* @param \Drupal\Core\Asset\AssetDumperInterface
* The dumper for optimized CSS assets.
* @param \Drupal\Core\KeyValueStore\KeyValueStoreInterface
* The state key/value store.
*/
public function __construct(AssetCollectionGrouperInterface $grouper, AssetOptimizerInterface $optimizer, AssetDumperInterface $dumper, KeyValueStoreInterface $state) {
$this->grouper = $grouper;
$this->optimizer = $optimizer;
$this->dumper = $dumper;
$this->state = $state;
}
/**
* {@inheritdoc}
*
* The cache file name is retrieved on a page load via a lookup variable that
* contains an associative array. The array key is the hash of the file names
* in $css while the value is the cache file name. The cache file is generated
* in two cases. First, if there is no file name value for the key, which will
* happen if a new file name has been added to $css or after the lookup
* variable is emptied to force a rebuild of the cache. Second, the cache file
* is generated if it is missing on disk. Old cache files are not deleted
* immediately when the lookup variable is emptied, but are deleted after a
* set period by drupal_delete_file_if_stale(). This ensures that files
* referenced by a cached page will still be available.
*/
public function optimize(array $css_assets) {
// Group the assets.
$css_groups = $this->grouper->group($css_assets);
// Now optimize (concatenate + minify) and dump each asset group, unless
// that was already done, in which case it should appear in
// drupal_css_cache_files.
// Drupal contrib can override this default CSS aggregator to keep the same
// grouping, optimizing and dumping, but change the strategy that is used to
// determine when the aggregate should be rebuilt (e.g. mtime, HTTPS …).
$map = $this->state->get('drupal_css_cache_files') ?: array();
$css_assets = array();
foreach ($css_groups as $order => $css_group) {
// We have to return a single asset, not a group of assets. It is now up
// to one of the pieces of code in the switch statement below to set the
// 'data' property to the appropriate value.
$css_assets[$order] = $css_group;
unset($css_assets[$order]['items']);
switch ($css_group['type']) {
case 'file':
// No preprocessing, single CSS asset: just use the existing URI.
if (!$css_group['preprocess']) {
$uri = $css_group['items'][0]['data'];
$css_assets[$order]['data'] = $uri;
}
// Preprocess (aggregate), unless the aggregate file already exists.
else {
$key = $this->generateHash($css_group);
$uri = '';
if (isset($map[$key])) {
$uri = $map[$key];
}
if (empty($uri) || !file_exists($uri)) {
// Optimize each asset within the group.
$data = '';
foreach ($css_group['items'] as $css_asset) {
$data .= $this->optimizer->optimize($css_asset);
}
// Per the W3C specification at
// http://www.w3.org/TR/REC-CSS2/cascade.html#at-import, @import
// rules must proceed any other style, so we move those to the
// top.
$regexp = '/@import[^;]+;/i';
preg_match_all($regexp, $data, $matches);
$data = preg_replace($regexp, '', $data);
$data = implode('', $matches[0]) . $data;
// Dump the optimized CSS for this group into an aggregate file.
$uri = $this->dumper->dump($data, 'css');
// Set the URI for this group's aggregate file.
$css_assets[$order]['data'] = $uri;
// Persist the URI for this aggregate file.
$map[$key] = $uri;
$this->state->set('drupal_css_cache_files', $map);
}
else {
// Use the persisted URI for the optimized CSS file.
$css_assets[$order]['data'] = $uri;
}
$css_assets[$order]['preprocessed'] = TRUE;
}
break;
case 'inline':
// We don't do any caching for inline CSS assets.
$data = '';
foreach ($css_group['items'] as $css_asset) {
$data .= $this->optimizer->optimize($css_asset);
}
unset($css_assets[$order]['data']['items']);
$css_assets[$order]['data'] = $data;
break;
case 'external':
// We don't do any aggregation and hence also no caching for external
// CSS assets.
$uri = $css_group['items'][0]['data'];
$css_assets[$order]['data'] = $uri;
break;
}
}
return $css_assets;
}
/**
* Generate a hash for a given group of CSS assets.
*
* @param array $css_group
* A group of CSS assets.
*
* @return string
* A hash to uniquely identify the given group of CSS assets.
*/
protected function generateHash(array $css_group) {
$css_data = array();
foreach ($css_group['items'] as $css_file) {
$css_data[] = $css_file['data'];
}
return hash('sha256', serialize($css_data));
}
}
<?php
/**
* Contains \Drupal\Core\Asset\CssCollectionRenderer.
*/
namespace Drupal\Core\Asset;
use Drupal\Core\Asset\AssetCollectionRendererInterface;
use Drupal\Component\Utility\String;
/**
* Renders CSS assets.
*/
class CssCollectionRenderer implements AssetCollectionRendererInterface {
/**
* {@inheritdoc}
*/
public function render(array $css_assets) {
$elements = array();
// A dummy query-string is added to filenames, to gain control over
// browser-caching. The string changes on every update or full cache
// flush, forcing browsers to load a new copy of the files, as the
// URL changed.
$query_string = variable_get('css_js_query_string', '0');
// Defaults for LINK and STYLE elements.
$link_element_defaults = array(
'#type' => 'html_tag',
'#tag' => 'link',
'#attributes' => array(
'rel' => 'stylesheet',
),
);
$style_element_defaults = array(
'#type' => 'html_tag',
'#tag' => 'style',
);
// For filthy IE hack.
$current_ie_group_keys = NULL;
$get_ie_group_key = function ($css_asset) {
return array($css_asset['type'], $css_asset['preprocess'], $css_asset['group'], $css_asset['every_page'], $css_asset['media'], $css_asset['browsers']);
};
// Loop through all CSS assets, by key, to allow for the special IE
// workaround.
$css_assets_keys = array_keys($css_assets);
for ($i = 0; $i < count($css_assets_keys); $i++) {
$css_asset = $css_assets[$css_assets_keys[$i]];
switch ($css_asset['type']) {
// For file items, there are three possibilites.
// - There are up to 31 CSS assets on the page (some of which may be
// aggregated). In this case, output a LINK tag for file CSS assets.
// - There are more than 31 CSS assets on the page, yet we must stay
// below IE<10's limit of 31 total CSS inclussion tags, we handle this
// in two ways:
// - file CSS assets that are not eligible for aggregation (their
// 'preprocess' flag has been set to FALSE): in this case, output a
// LINK tag.
// - file CSS assets that can be aggregated (and possibly have been):
// in this case, figure out which subsequent file CSS assets share
// the same key properties ('group', 'every_page', 'media' and
// 'browsers') and output this group into as few STYLE tags as
// possible (a STYLE tag may contain only 31 @import statements).
case 'file':
// The dummy query string needs to be added to the URL to control
// browser-caching.
$query_string_separator = (strpos($css_asset['data'], '?') !== FALSE) ? '&' : '?';
// As long as the current page will not run into IE's limit for CSS
// assets: output a LINK tag for a file CSS asset.
if (count($css_assets) <= 31) {
$element = $link_element_defaults;
$element['#attributes']['href'] = file_create_url($css_asset['data']) . $query_string_separator . $query_string;;
$element['#attributes']['media'] = $css_asset['media'];
$element['#browsers'] = $css_asset['browsers'];
$elements[] = $element;
}
// The current page will run into IE's limits for CSS assets: work
// around these limits by performing a light form of grouping.
// Once Drupal only needs to support IE10 and later, we can drop this.
else {
// The file CSS asset is ineligible for aggregation: output it in a
// LINK tag.
if (!$css_asset['preprocess']) {
$element = $link_element_defaults;
$element['#attributes']['href'] = file_create_url($css_asset['data']) . $query_string_separator . $query_string;
$element['#attributes']['media'] = $css_asset['media'];
$element['#browsers'] = $css_asset['browsers'];
$elements[] = $element;
}
// The file CSS asset can be aggregated, but hasn't been: combine
// multiple items into as few STYLE tags as possible.
else {
$import = array();
// Start with the current CSS asset, iterate over subsequent CSS
// assets and find which ones have the same 'type', 'group',
// 'every_page', 'preprocess', 'media' and 'browsers' properties.
$j = $i;
$next_css_asset = $css_asset;
$current_ie_group_key = $get_ie_group_key($css_asset);
do {
// The dummy query string needs to be added to the URL to
// control browser-caching. IE7 does not support a media type on
// the @import statement, so we instead specify the media for
// the group on the STYLE tag.
$import[] = '@import url("' . String::checkPlain(file_create_url($next_css_asset['data']) . '?' . $query_string) . '");';
// Move the outer for loop skip the next item, since we
// processed it here.
$i = $j;
// Retrieve next CSS asset, unless there is none: then break.
if ($j + 1 < count($css_assets_keys)) {