Details
-
Bug
-
Resolution: Fixed
-
Blocker
-
13.7-rc-1
-
Unknown
-
N/A
-
N/A
-
Description
Follow these steps to reproduce:
- install the following WebJar using Extension Manager's advanced search: org.webjars.npm:smartwizard 5.1.1
- create a new wiki page with this content:
{{velocity}} #set ($discard = $xwiki.linkx.use($services.webjars.url('org.webjars.npm:smartwizard', 'dist/css/smart_wizard_all.min.css'), {'type': 'text/css', 'rel': 'stylesheet'})) {{/velocity}} - open the browser's developer tools and check the Network tab. Filter by "smartwizard" and check the content type of the response for the /xwiki/webjars/wiki%3Axwiki/smartwizard/5.1.1/dist/css/smart_wizard_all.min.css request.
The content type should have been text/css but instead it is application/javascript. This prevents the browser from using the CSS.
The root problem is in Tika for which I reported TIKA-3686. The workaround is described in https://stackoverflow.com/questions/4216344/mime-type-linking-to-css-w-a-txt-extension : basically you need to request the content of the CSS file (as text) and then inject a style tag in the page head with it:
var style = $('<style></style>');
$('head').append(style);
style.load("$services.webjars.url('org.webjars.npm:smartwizard', 'dist/css/smart_wizard_all.min.css')");
Note that the only CSS files affected are those that are matching the magic JavaScript detection from tika-mimetypes.xml:
<mime-type type="application/javascript">
<alias type="application/x-javascript"/>
<alias type="text/javascript"/>
<sub-class-of type="text/plain"/>
<_comment>JavaScript Source Code</_comment>
<glob pattern="*.js"/>
<!-- Note - there is no Unique Magic for JavaScript files! -->
<!-- Generally you can only detect JS with the filename -->
<!-- However... A few common JS libraries accidentally trigger -->
<!-- the HTML priority=20 magic incorrectly. So, for those only, -->
<!-- we list "magic" for those specific files -->
<magic priority="50">
<!-- jQuery -->
<match value="/* jQuery " type="string" offset="0"/>
<match value="/*! jQuery " type="string" offset="0"/>
<match value="/*!" type="string" offset="0">
<match value="* jQuery " offset="4:8"/>
</match>
<match value="(function(e,undefined){" type="string" offset="0"/>
<match value="!function(window,undefined){" type="string" offset="0"/>
<!-- Prototype -->
<match value="/* Prototype JavaScript " type="string" offset="0"/>
<match value="var Prototype={" type="string" offset="0"/>
<match value="function $w(t){" type="string" offset="0"/>
<!-- React -->
<match value="/** @license React" type="string" offset="0"/>
<match value="/**" type="string" offset="0">
<match value="* React " offset="4:8"/>
</match>
</magic>
</mime-type>
This means for instance CSS files that start with a (CSS) comment that starts with "jQuery" or "React"...
Attachments
Issue Links
- is related to
-
XWIKI-18865 Upgrade to Tika 2.0
-
- Closed
-
-
TIKA-3686 Loading...