While the class that includes the "." is technically valid, the selector that's generated won't match it, as the browser will try and parse all the dots as a compound selector. To keep these class names but have the selector work, the dots in the class name would need to be escaped. I think ideally, the dots should not be used in the class names at all.
I've worked around this myself for now by replacing the dots with underscores via your filters, and then fixing them on the frontend by hoking the attribute_escape function:
/**
* Convert dots to underscores in all mime types
*/
add_filters(
['downloadlist_dashicons_icons', 'downloadlist_bootstrap_icons', 'downloadlist_fontawesome_icons'],
function ($dashicons) {
return array_combine(
str_replace(
'.',
'_',
array_keys($dashicons)
),
$dashicons
);
}
);
/**
* Do the same conversion for the frontend output
*/
add_filter('attribute_escape', function ($safe_text, $text) {
if (strpos($safe_text, 'vnd') === 0 && strpos($safe_text, '.') !== false) {
return str_replace('.', '_', $safe_text);
}
return $safe_text;
}, 10, 2);
For example, an attachment with MIME type
application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
gets the following classes:attachment-123
file_application
file_vnd.openxmlformats-officedocument.spreadsheetml.sheet
While the generated CSS selector is something like this:
While the class that includes the "
.
" is technically valid, the selector that's generated won't match it, as the browser will try and parse all the dots as a compound selector. To keep these class names but have the selector work, the dots in the class name would need to be escaped. I think ideally, the dots should not be used in the class names at all.I've worked around this myself for now by replacing the dots with underscores via your filters, and then fixing them on the frontend by hoking the
attribute_escape
function: