Altering CSS markup

Question

I would like to add custom property on drupal's stylesheets <link /> tag. I tried following in hook_css_alter:

foreach ($css as &$style) {
  $style['#attributes']['property'] = 'stylesheet';
  $style['#attributes'] = ['property' => 'stylesheet'];
  $style['property'] = 'stylesheet';
  $style['element']['#theme'] = 'stylesheet';
  $style['#markup'] = '<stylesheet />';
  $style['element']['#markup'] = '<stylesheet />';
}

Nothing seeps to do any changes, and I feel like I am guessing around. So how to properly alter <link /> elements markup?

Second question would be how to get all stylesheets as array in theme. It seeps that in Drupal 8 beta 10 you cloud just do {% for style in styles %} in Your twig template, but with beta 12 update this does not work, styles returns placeholder element.

Answer 1

Drupal 8

$css variable is converted to an array of <link> tags through CssCollectionRenderer::render(), so you just have to swap this service (https://www.drupal.org/node/2026959) and override render function:

class MyModuleCssCollectionRenderer extends CssCollectionRenderer {
  /**
   * {@inheritdoc}
   */
  public function render(array $css_assets) {
    $elements = parent::render($css_assets)))
    foreach($elements as &$elements) {
      $element['#attributes']['property'] = 'stylesheet';
    }
    return $elements;
  }
}

Drupal 7

The CSS files are managed by drupal_get_css. After being altered by hook_css_alter(), $css is passed in a render array:

// Render the HTML needed to load the CSS.
$styles = array(
  '#type' => 'styles',
  '#items' => $css,
);

This render array is declared in system_element_info() as:

$types['styles'] = array(
  '#items' => array(),
  '#pre_render' => array('drupal_pre_render_styles'),
  '#group_callback' => 'drupal_group_css',
  '#aggregate_callback' => 'drupal_aggregate_css'
);

As you can see there is a pre-render callback drupal_pre_render_styles(), this is the function responsible for converting the $css variable to <link> tags. This is where you can work, just add you own callback in a hook_element_info_alter():

/**
 * Implements hook_element_info_alter().
 */
function mymodule_element_info_alter(&$types) {
  // Add a pre_render callback to styles.
  $types['styles']['#pre_render'][] = 'mymodule_pre_render_styles';
}

/**
 * Append property to stylesheet <link> tags.
 */
function mymodule_pre_render_styles($elements) {
    foreach($elements as &$element) {
        $element['#attributes']['property'] = 'stylesheet';
    }
}